Graphql fragments best practices

Get Help and Help Others
1

I’m looking for clarification on how to properly use fragments. My initial read through the RW and Apollo docs leads me to believe that fragments should be co-located with the query that uses them. However, I want to declare my fragments centrally in a single file and re-use them in several cells or components through importing the query/mutation.

The reason for seeking guidance on this is due to a bug I encountered where fragments would cause the trusted documents store to not be populated.

  • web/src/utils/queries.ts (Central location that exports queries/mutations and fragments to be used in components)
export const PREFERENCE_INFO_FRAGMENT = gql`
  fragment PreferenceInfo on Preference {
    id
    language
    theme
  }
`

export const UPDATE_PREFERENCE = gql`
  mutation UpdatePreference($id: Int!, $input: UpdatePreferenceInput!) {
    updatePreference(id: $id, input: $input) {
      ...PreferenceInfo
    }
  }
`

export const FIND_PREFERENCE = gql`
  query FindPreference($id: Int!) {
    findPreference(id: $id) {
      ...PreferenceInfo
    }
  }
`

Notice this works even without using registerFragment or adding the fragment to the query/mutation with ${PREFERENCE_INFO_FRAGMENT} inside the gql tag

A component then just imports the UPDATE_PREFERENCE mutation. This seems to work, but sometimes I notice red squiggly lines inside a query or mutation where I use the fragment. I’m not sure if this is the right way, because I’ve noticed you can declare them with export const or registerFragment and it would still work either way. I feel like there are several (probably wrong) ways of using this feature that could lead to issues in the project.

How does the community use fragments? What are issues or hardships you’ve encountered with this feature?