[Debt] Skill and SkillFamily fragment masking

apps/web/src/pages/SkillFamilies/UpdateSkillFamilyForm.stories.tsx

@@ -1,26 +1,40 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import { fakeSkills, fakeSkillFamilies } from "@gc-digital-talent/fake-data";
+import { makeFragmentData } from "@gc-digital-talent/graphql";
 
-import { UpdateSkillFamilyForm } from "./UpdateSkillFamilyPage";
+import {
+  UpdateSkillFamilyForm,
+  UpdateSkillFamilySkill_Fragment,
+  UpdateSkillFamily_Fragment,
+} from "./UpdateSkillFamilyPage";
 
 const mockSkills = fakeSkills();
 const mockSkillFamilies = fakeSkillFamilies();
 
+const skillFragments = mockSkills.map((skill) =>
+  makeFragmentData(skill, UpdateSkillFamilySkill_Fragment),
+);
+
+const skillFamilyFragment = makeFragmentData(
+  mockSkillFamilies[0],
+  UpdateSkillFamily_Fragment,
+);
+
 export default {
   component: UpdateSkillFamilyForm,
   title: "Forms/Update Skill Family Form",
-} as ComponentMeta<typeof UpdateSkillFamilyForm>;
+} as Meta<typeof UpdateSkillFamilyForm>;
 
-const Template: ComponentStory<typeof UpdateSkillFamilyForm> = (args) => {
-  const { initialSkillFamily, skills } = args;
+const Template: StoryFn<typeof UpdateSkillFamilyForm> = (args) => {
+  const { skillFamilyQuery, skillsQuery } = args;
 
   return (
     <UpdateSkillFamilyForm
-      skills={skills}
-      initialSkillFamily={initialSkillFamily}
+      skillFamilyQuery={skillFamilyQuery}
+      skillsQuery={skillsQuery}
       handleUpdateSkillFamily={async (id, data) => {
         return new Promise((resolve) => {
           setTimeout(() => {
@@ -38,6 +52,6 @@ const Template: ComponentStory<typeof UpdateSkillFamilyForm> = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  skills: mockSkills,
-  initialSkillFamily: mockSkillFamilies[0],
+  skillFamilyQuery: skillFamilyFragment,
+  skillsQuery: skillFragments,
 };

apps/web/src/pages/SkillFamilies/UpdateSkillFamilyPage.tsx

@@ -14,20 +14,21 @@ import {
   TextArea,
   unpackIds,
 } from "@gc-digital-talent/forms";
-import { notEmpty } from "@gc-digital-talent/helpers";
+import { unpackMaybes } from "@gc-digital-talent/helpers";
 import {
   getLocale,
   errorMessages,
   commonMessages,
 } from "@gc-digital-talent/i18n";
 import { Pending, NotFound, Heading } from "@gc-digital-talent/ui";
 import {
-  Skill,
   SkillFamily,
   UpdateSkillFamilyInput,
   UpdateSkillFamilyMutation,
   Scalars,
   graphql,
+  FragmentType,
+  getFragment,
 } from "@gc-digital-talent/graphql";
 
 import SEO from "~/components/SEO/SEO";
@@ -44,25 +45,66 @@ type FormValues = Pick<SkillFamily, "name" | "description"> & {
   skills: string[];
 };
 
+export const UpdateSkillFamilySkill_Fragment = graphql(/* GraphQL */ `
+  fragment UpdateSkillFamilySkill on Skill {
+    id
+    key
+    name {
+      en
+      fr
+    }
+    category
+  }
+`);
+
+export const UpdateSkillFamily_Fragment = graphql(/* GraphQL */ `
+  fragment UpdateSkillFamily on SkillFamily {
+    id
+    key
+    name {
+      en
+      fr
+    }
+    description {
+      en
+      fr
+    }
+    skills {
+      id
+      key
+      category
+      name {
+        en
+        fr
+      }
+    }
+  }
+`);
+
 interface UpdateSkillFamilyFormProps {
-  initialSkillFamily: SkillFamily;
-  skills: Skill[];
+  skillFamilyQuery: FragmentType<typeof UpdateSkillFamily_Fragment>;
+  skillsQuery: FragmentType<typeof UpdateSkillFamilySkill_Fragment>[];
   handleUpdateSkillFamily: (
     id: string,
     data: UpdateSkillFamilyInput,
   ) => Promise<UpdateSkillFamilyMutation["updateSkillFamily"]>;
 }
 
 export const UpdateSkillFamilyForm = ({
-  initialSkillFamily,
-  skills,
+  skillFamilyQuery,
+  skillsQuery,
   handleUpdateSkillFamily,
 }: UpdateSkillFamilyFormProps) => {
   const intl = useIntl();
   const locale = getLocale(intl);
   const navigate = useNavigate();
   const paths = useRoutes();
-  const sortedSkills = sortBy(skills, (skill) => {
+  const initialSkillFamily = getFragment(
+    UpdateSkillFamily_Fragment,
+    skillFamilyQuery,
+  );
+  const skills = getFragment(UpdateSkillFamilySkill_Fragment, skillsQuery);
+  const sortedSkills = sortBy([...skills], (skill) => {
     return skill.name?.[locale]?.toLocaleUpperCase();
   });
 
@@ -222,35 +264,11 @@ type RouteParams = {
 const UpdateSkillFamilyData_Query = graphql(/* GraphQL */ `
   query SkillFamilySkillsData($id: UUID!) {
     skills {
-      id
-      key
-      name {
-        en
-        fr
-      }
-      category
+      ...UpdateSkillFamilySkill
     }
 
     skillFamily(id: $id) {
-      id
-      key
-      name {
-        en
-        fr
-      }
-      description {
-        en
-        fr
-      }
-      skills {
-        id
-        key
-        name {
-          en
-          fr
-        }
-        category
-      }
+      ...UpdateSkillFamily
     }
   }
 `);
@@ -272,11 +290,10 @@ const UpdateSkillFamilyPage = () => {
   const intl = useIntl();
   const routes = useRoutes();
   const { skillFamilyId } = useRequiredParams<RouteParams>("skillFamilyId");
-  const [{ data: lookupData, fetching, error }] = useQuery({
+  const [{ data, fetching, error }] = useQuery({
     query: UpdateSkillFamilyData_Query,
     variables: { id: skillFamilyId || "" },
   });
-  const skills: Skill[] | [] = lookupData?.skills.filter(notEmpty) ?? [];
 
   const [, executeMutation] = useMutation(UpdateSkillFamily_Mutation);
   const handleUpdateSkillFamily = (
@@ -334,10 +351,10 @@ const UpdateSkillFamilyPage = () => {
       />
       <AdminContentWrapper>
         <Pending fetching={fetching} error={error}>
-          {lookupData?.skillFamily ? (
+          {data?.skillFamily ? (
             <UpdateSkillFamilyForm
-              initialSkillFamily={lookupData?.skillFamily}
-              skills={skills}
+              skillFamilyQuery={data.skillFamily}
+              skillsQuery={unpackMaybes(data.skills)}
               handleUpdateSkillFamily={handleUpdateSkillFamily}
             />
           ) : (

apps/web/src/pages/Skills/UpdateSkillForm.stories.tsx

@@ -1,26 +1,36 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import { fakeSkills, fakeSkillFamilies } from "@gc-digital-talent/fake-data";
+import { makeFragmentData } from "@gc-digital-talent/graphql";
 
-import { UpdateSkillForm } from "./UpdateSkillPage";
+import {
+  UpdateSkillForm,
+  UpdateSkillSkillFamily_Fragment,
+  UpdateSkill_Fragment,
+} from "./UpdateSkillPage";
 
 const mockSkills = fakeSkills();
 const mockSkillFamilies = fakeSkillFamilies();
 
+const skillFragment = makeFragmentData(mockSkills[0], UpdateSkill_Fragment);
+const skillFamiliesFragment = mockSkillFamilies.map((skillFamily) =>
+  makeFragmentData(skillFamily, UpdateSkillSkillFamily_Fragment),
+);
+
 export default {
   component: UpdateSkillForm,
   title: "Forms/Update Skill Form",
-} as ComponentMeta<typeof UpdateSkillForm>;
+} as Meta<typeof UpdateSkillForm>;
 
-const Template: ComponentStory<typeof UpdateSkillForm> = (args) => {
-  const { initialSkill, families } = args;
+const Template: StoryFn<typeof UpdateSkillForm> = (args) => {
+  const { skillQuery, familiesQuery } = args;
 
   return (
     <UpdateSkillForm
-      families={families}
-      initialSkill={initialSkill}
+      familiesQuery={familiesQuery}
+      skillQuery={skillQuery}
       handleUpdateSkill={async (id, data) => {
         return new Promise((resolve) => {
           setTimeout(() => {
@@ -38,6 +48,6 @@ const Template: ComponentStory<typeof UpdateSkillForm> = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  initialSkill: mockSkills[0],
-  families: mockSkillFamilies,
+  skillQuery: skillFragment,
+  familiesQuery: skillFamiliesFragment,
 };