Accessing Fragment data within array, in intermediate component

[alexdgourlay]

Summary

I'm having trouble correctly typing the data in a Typescript React component when using a Fragment - with the code generator's client-preset.

I have a parent component that performs a query:

Parent component

// QUERY
const getProjectsQueryDocument = graphql(`
  query GetProjects {
    projects() {
      ...ProjectItemFields
    }
  }
`);

export default () => {
  const { loading, data } = useQuery(getProjectsQueryDocument);
  ...
  return (
   ...
        <ProjectGrid projects={data.projects} />
   ...
  );
};

The query includes use of a fragment and returns an array of 'projects' within data.

The project array is then passed into a <ProjectGrid> component which renders multiple <ProjectItem>s, passing in a single project from the projects array. <ProjectGrid> also needs to access the projects data.

<ProjectGrid>

// How do I type projects here?
export default (props: { projects: ??? }) => {
 ...
  return (
    ...
         {projects.map((project, index) => (
            <ProjectItem
              project={project}
            />
        ))}
    ...
  );
}

<ProjectItem>

// FRAGMENT
export const ProjectItemFragment = graphql(`
  fragment ProjectItemFields on Project {
    id
    name
   ...
`);

export default (props: { project: FragmentType<typeof ProjectItemFragment> }) => {

  const project = useFragment(ProjectItemFragment, props.project);
  ...
}

---

Question

How should I type the projects prop of <ProjectGrid>?

I have attempted to type it as so:

{  projects: GetProjectsQuery['projects'] }

Which is an Array of Objects type, however the Fragment's fields do not exist within the objects, resulting in this linting error when trying to access:

Property 'name' does not exist on type '{ __typename?: "Project" | undefined; } & { ' $fragmentRefs'?: { ProjectItemFragment: ProjectItemFragment; } | undefined; }'.

---

Dependencies

    "@graphql-codegen/cli": "^2.16.4",
    "@graphql-codegen/client-preset": "^1.2.6",
    "typescript": "^4.9.4"
    "graphql": "^16.6.0",

[OmarBurney]

Did you figure this out? I'm having the same issue, the generated type is giving an in-between $fragmentRefs field

[alexdgourlay]

I gave up in the end and disabled fragment masking in the codegen.ts :

const config: CodegenConfig = {
  ...
  generates: {
    './gql/': {
      preset: 'client',
      plugins: [],
      presetConfig: {
        fragmentMasking: false // HERE
      }
    }
  }
}

[OmarBurney]

Ended up getting fragment masking to work for my project. I just had to rename useFragment to getFragmentData so react didn't think it was a hook.

Without fragment masking. The generated types arent composable enough like Apollo's codegen tooling was since a type is not generated for each sub field

[mcrowder65]

@alexdgourlay thanks for posting getting fragment masking turned off.. we actually didn't want to use fragment masking in our code but I couldn't figure out how to turn it off.

[saihaj]

you can provide fragmentMasking: false to the presetConfig https://the-guild.dev/graphql/codegen/plugins/presets/gql-tag-operations-preset#fragment-masking

[FacundoGFlores]

Without the useFragment hook I am able to achieve what I am looking for using the following:

https://the-guild.dev/graphql/codegen/plugins/presets/gql-tag-operations-preset#fragment-masking

Setup the codegen.yml

import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'src/path/to/your/schema.graphql',
  documents: ['src/**/*.ts', '!src/gql/**/*'],
  generates: {
    './src/gql/': {
      preset: 'gql-tag-operations-preset'
    }
  }
}
export default config

import { gql, DocumentType } from '../gql'
 
const TweetFragment = gql(/* GraphQL */ `
  fragment TweetFragment on Tweet {
    id
    body
  }
`)
 
const Tweet = (props: {
  // NOTE: We do not use useFragment anymore and we do not use FragmentType but DocumentType instead
  tweet: DocumentType<typeof TweetFragment>
}) => {
  return <li data-id={props.tweet.id}>{props.tweet.body}</li>
}
 
const TweetsQuery = gql(/* GraphQL */ `
  query TweetsQuery {
    Tweets {
      id
      ...TweetFragment
    }
  }
`)
 
const Tweets = () => {
  const [result] = useQuery({ query: TweetsQuery })
  const { data, fetching, error } = result
 
  if (fetching) return <p>Loading…</p>
  if (error) return <p>Oh no… {error.message}</p>
 

  // NOTE: here the Tweets object will not come with that weird $fragmentRefs
  return (
    <ul>
      {data.Tweets.map(tweet => (
        <Tweet key={tweet.id} tweet={tweet} />
      ))}
    </ul>
  )
}

with previous steps you can solve the problems:

• fragments composition "ala Relay"
• infer types from the query and the fragments properly

[jmayergit]

Leaving this here in case it helps anyone.

---

The query

export const aDocument = graphql(/* GraphQL */ `
  query A {
    anOperation() {
        anObject {
          items {
            ...Item
          }
        }
      }
    }
`);

The component which declares it's data dependencies

export const ItemFragment = graphql(/* GraphQL */ `
  fragment Item on Items {
    aField
  }
`);

interface Props {
  items: FragmentType<typeof ItemFragmentDoc>[]; // notice the use of `[]`
}

export default function Items(props: Props) {
  // I use getFragmentData instead of useFragment here
  const items = getFragmentData(ItemFragmentDoc, props.items);
}

The component which invokes the query

  const { data } = useQuery(aDocument);

  const items = data?.anOperation.anObject?.items ?? [];
  
  <SomeComponent items={items} />

[Urigo]

@jmayergit thank you for the example!
Do you think we could add/change something in the docs to make it easier for others?

[ryparker]

Any recommendations on how to solve this if you're defining all your queries and fragments in .graphql files instead of .ts?

[DatStorm]

We are facing the exact same problem!

[ryparker]

I ended up getting around it by disabling fragmentMasking:

codegen.ts

const config: CodegenConfig = {
  ...
  documents: 'src/gql/*.graphql',
  generates: {
    'src/gql/generated/': {
      preset: 'client',
      config: {
        avoidOptionals: false,
      },
      presetConfig: {
        fragmentMasking: false,
      },
    },
  },
};
export default config;

[Urigo]

Its a shame to miss such an important feature as fragment masking
What's the reason you are using .graphql files instead of .ts?

[mhaagens]

Having the same issue.
If you have this query:

query {
  items {
    id
    subItems {
      ...SubItemFields
    }
  }
}

fragment SubItemFields on SubItem {
  id
}

You cannot do this from the <Items /> component

items.map(item => item.subItems.map(subItem => subItem.id))

subItem will only have __typename, not id.

[misha-erm]

Did you find a solution for it by any chance?

[minglecm]

Yep, you need to define id on both SubItemFields as well as subItems:

query {
  items {
    id
    subItems {
      id
      ...SubItemFields
    }
  }
}

You can now access subItem.id.

[jer-k]

Running into the same issue here with intermediate components. It doesn't look like any of the answers have given a solution. I've been trying to figure out the proper terminology to see if I can google anything, but coming across this discussion and seeing the troubles people have run into, I'm not sure there is one?

While @jmayergit solution is good for a single level, what happens when you need to pass masked data down through multiple components?

For example, we have

// Top level component

const AnObject = graphql(`
  fragment AnObject on Object {
      id
      items {
        id
        ...Item
      }
      otherItems {
        ...OtherItem
      }
  }
`);

export const aDocument = graphql(/* GraphQL */ `
  query A {
    anOperation() {
        anObject {
          ...AnObject
        }
      }
    }
`);

export default function TopLevel() {
    const { data } = useQuery(A});
    const anObject = data?.anObject

   if (!anObject) return null;

  const unmaskedObject = getFragmentData(AnObject, anObject);
   return (
     <>
       {unmaskedObject.items.map(item => <Item id={item.id} item={item} otherItems={unmaskedObject.otherItems} />)}
     </>
  )
}

Now we go into Item

const Item = graphql(`
  fragment Item on Item {
      id
      name
  }
`);

type Props = {
  item: FragmentType<typeof Item>;
  otherItems: ???
}

export default function Item(props: Props) {
  const item = getFragmentData(Item, props.item);

  return (
    <>
      <p>{item.name}</p>
      <OtherItems otherItems={props.otherItems} />
    </>
  )
}

And OtherItems

const OtherItem = graphql(`
  fragment OtherItem on OtherItem {
      id
      name
  }
`);

type Props = {
  otherItems: FragmentType<typeof OtherItem>[];
}

export default function OtherItem(props: Props) {
  const otherItems = getFragmentData(OtherItem, props.otherItems);

  return (
    <>
      {otherItems.map(otherItem => (<p id={otherItem.id}>{otherItem.name}</p>))
    </>
  )
}

I'm unsure of what to do in the Item component for otherItems.

What I tried to do was create an intermediate fragment, say const Item_OtherItem = graphql(fragment Item_OtherItem on OtherItem ...)

If we update the props in Item to

type Props = {
  item: FragmentType<typeof Item>;
  otherItems: FragmentType<typeof Item_OtherItem>[]
}

and add the Item_OtherItem into the query, we can achieve passing the data into the first level. But if we attempt to pass otherItems down to OtherItem we get a mismatch of types because we have said that otherItems is FragmentType<typeof Item_OtherItem>[] where as OtherItem expects FragmentType<typeof OtherItem>[].

This approach seems to not work unless there was some union type of OtherItem | Item_OtherItem but because the consts aren't exported, I don't think that is possible?

@Urigo Are there any docs or information out there on what to do in a situation like this?

[DanielAdari]

I ran into the same issue,
Found this article suggesting renaming to getFragmentData - https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#the-usefragment-helper

This did not solve my issue :(
Still only getting __typename on the query result that used the fragment.