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

[dryzhkov]

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

[KoenBrouwer]

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?

[Azerothian]

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)],
      });

[mfurniss]

Same issue for me.

[mfurniss]

3.5.10 was the last version where mutation refetchQueries worked for me. I am on React 18, is that the problem?

[KoenBrouwer]

@mfurniss Probably not, we’re still on React 17. Forgot to point that out in my earlier reply.

[mfurniss]

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.

[rush86999]

no refetch with client object as well using array with documentNode parsed by gql and string name as variables for refetch arguments.
using @apollo/client": "^3.5.10", "@apollo/react-hooks": "^4.0.0",

[MYKEU]

Experience the same issue with the latest version 3.6.5.

Reverting back to 3.5.10 fixes the issue and my refetches work as expected.

[jpvajda]

@benjamn 👋 I just wanted to make you aware of this issue, Given we pushed a lot of bug fixes to useQuery in 3.6.5, I thought this may be relevant. cc @hwillson

[KoenBrouwer]

@benjamn @jpvajda @hwilson Guys, it's been nearly 6 months. How about a little update on this issue?

[mfurniss]

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

[jpvajda]

@mfurniss thanks for sharing that! @KoenBrouwer can you try upgrading your client to 3.6.8which is our current release? 🤞

[KoenBrouwer]

@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! 😃 👍🏻

[jpvajda]

@KoenBrouwer Great news! Thanks for confirming.

[shunshimono]

This problem does not seem to have been solved.

I am using v3.6.8 and the re-fetch does not run!

[KoenBrouwer]

This problem does not seem to have been solved.

I am using v3.6.8 and the re-fetch does not run!

Let’s update to 3.6.9, cause it 100% worked for me. Mind sharing some of your code as well? I’d be happy to help out.