Fixing unknown query requested in refetchQueries option.includes array in GraphQL Apollo client

unknown-query-error-refetchQueries-graphql-apollo-client.md

Fixing "unknown query requested in refetchQueries option.includes array" in GraphQL Apollo client

Situation

You're writing tests for a component that uses Apollo client. Sometimes you'll see incredibly long error messages which link you to the Apollo Client docs where the error is shown in greater detail. Ideally, you'd just get the proper message in your terminal, but this is not enabled by default. To get this working, add this to your specHelper.js file.

// Adds Apollo GraphQL messages only in a dev environment
// https://www.apollographql.com/docs/react/errors/
if (process.env.NODE_ENV !== 'production') {
  loadDevMessages();
  loadErrorMessages();
}

Now the incredibly long and uninformative errors will be formatted more legibly like this:

Unknown query {
  kind: 'Document',
  definitions: [Array],
  loc: [Object],
  problematicQueryName: [Object]
} requested in refetchQueries options.include array

Solution

Now that you know what the offending query is, you can update your refetchQueries to follow the correct format.

Per this StackOverflow post, "you need to pass an object with a query key in the refetchQueries array."

Like so:

const [addUser, { data, loading, error }] =
  useMutation(ADD_USER_QUERY, {
    refetchQueries: [{ query: GET_USERS_QUERY }],
});

If this works, you will no longer see the Unknown query { kind: 'Document' ....... } requested in refetchQueries options.include array error.

Note: Make sure that the mock requests in your test mirror the structure of your GraphQL requests in your application code.

Hope this helped!