apollo-client: Query refetched after a mutation doesn't trigger re-render

Seeing strange behavior where useQuery hook doesn’t trigger re-render when the query is included inside useMutation’s refetchQueries array as an object with no variables.

For example, when I specify a query to be refetched after a mutation occurs like this: refetchQueries: [{ query: DocumentNode }] I am seeing the following results: mutation succeeds, refetch query happens, the cache is updated correctly but UI is not.

However, both refetchQueries: ['QueryName'] and refetchQueries: [DocumentNode] work as expected.

Side note: the documentation for refetchQueries array is inconsistent about the element type: https://www.apollographql.com/docs/react/data/mutations/#refetching-queries https://www.apollographql.com/docs/react/data/mutations/#refetchqueries

Versions System: OS: macOS 12.0.1 Binaries: Node: 16.8.0 Yarn: 1.22.15 npm: 8.0.0 Browsers: Chrome: 96.0.4664.110 Firefox: 85.0.2 Safari: 15.1

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 8
Comments: 16 (3 by maintainers)

Most upvoted comments

As of 3.6.8 the issue is fixed for me. Thanks!

mfurniss on Jun 24, 2022

@jpvajda Looks like we’re at 3.6.9 right now. I upgraded to 3.6.9 and can confirm that refetchQueries is back working again. Thanks, I appreciate the follow up! 😃 👍🏻

KoenBrouwer on Jun 29, 2022

@KoenBrouwer Great news! Thanks for confirming.

jpvajda on Jun 29, 2022

I tried using both a list of strings and objects. Same result. With 3.6.2 no refetch occurs on any query. I’ll roll back to 3.5.10 for now.

mfurniss on May 13, 2022

I get the same with the following on 3.6.2, rolling back to 3.5.10 fixes the issue

const [mutation] = useMutation(createObjectMutation);
---
      const response = await mutation({
        variables: {
          id: id,
          input,
        },
        awaitRefetchQueries: true,
        refetchQueries: [getOperationName(getObjectListQuery), getOperationName(getObjectQuery)],
      });

Azerothian on May 4, 2022

Bump, I can confirm that this is the case using the (pseudo)code below using version 3.6.2 whereas this worked fine using version 3.5.10.

const [mutate] = useSomeMutation({      // Generated hook by graphql-codegen
  refetchQueries: [
    {query: GetSomeDocument},
  ],
});

mutate(); // GetSomeDocument doesn't get refetched

Edit: actually, the actual query isn’t even triggered, and of course a re-render doesn’t happen as well. Maybe related to #9597?

KoenBrouwer on May 3, 2022