Apollo-client: Queries with fragments not being re-fetched

[LauraBeatris]

Intended outcome:
The queries that are using fragments should be re-fetched

Actual outcome:
The queries that are using fragments aren't being re-fetched

How to reproduce the issue:

Create queries with fragments, as the following one:

const LIST_EVENTS_JOINED_BY_USER_QUERY = gql`
  query ListEventsJoinedByUser {
    eventsJoinedByUser: listFunds (filters: {
      type: EVENT,
      pendingInvitation: false,
      roles: [MEMBER],
    }) {
      ...listFundsFields
    }
  }
`;

And try to refetch it after executing a mutation:

 const [updateMemberRoleToCoHost] = useUpdateMemberRoleToCoHostMutation({
    refetchQueries: { query: LIST_EVENTS_JOINED_BY_USER_QUERY },
  });

---

I don't know if it would affect something but it's also worth to mention that I'm using @graphql-codegen + @apollo/client

And that's how I'm creating the fragments used on the query above

const LIST_FUNDS_FIELDS = gql`
  fragment listFundsFields on Fund {
    id
    name
    membersCount
    contributionGoal
    scheduleDatetime
    newActivitiesCount
    icon {
      id
      baseIconUrl
    }
    host {
      id
      user {
        id
        name
      }
    }
    currentMember {
      id
      role
    }
    location {
      id
      vicinity
    }
  }
`;

Versions
System:
OS: macOS 10.15.6
Binaries:
Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
Browsers:
Chrome: 84.0.4147.135
Safari: 13.1.2
npmPackages:
@apollo/client: ^3.1.3 => 3.1.3
apollo-sentry-helper: ^2.0.3 => 2.0.3

[LauraBeatris]

The fragments are not being found when the queries are re-fetched

Probably related to https://github.com/apollographql/apollo-client/issues/3402

[knedev42]

Based on the example you didn't include your fragment in the query before using it:

const LIST_EVENTS_JOINED_BY_USER_QUERY = gql`
  ${LIST_FUNDS_FIELDS}

  query ListEventsJoinedByUser {
    eventsJoinedByUser: listFunds (filters: {
      type: EVENT,
      pendingInvitation: false,
      roles: [MEMBER],
    }) {
      ...listFundsFields
    }
  }
`;

Edit: since you also have variables for your query, you might want to include them when you're defining refetchQueries like so:

refetchQueries: [{ query: LIST_EVENTS_JOINED_BY_USER_QUERY, variables: { ... } }]

or use the string syntax, which would match the operation name with the currently active queries

refetchQueries: ['ListEventsJoinedByUser']

[benjamn]

@LauraBeatris @knedev42 is right: fragment declarations need to be included in the query document along with the query that uses them.

While I consider this an unfortunate limitation of GraphQL (wouldn't it be nice if you could declare well-known fragments on the server, and then refer to them in your queries without re-declaring them?), we (the AC team, in case my affiliation wasn't apparent) are currently considering ways we can make managing fragments easier, for example by allowing you to pre-register your fragments with the client/cache, so you can later refer to them by name in your queries, and the client will make sure the appropriate fragment declarations end up in the actual query (at most once).

[LauraBeatris]

Thanks, @benjamn @knedev42 for clarifying the issue.

I didn't know that this was related to a GraphQL limitation instead of being an Apollo issue. And I'm looking forward to seeing easier ways to manage fragments with Apollo 🚀