awaitRefetchQueries is not working

[Nnoerregaard]

Intended outcome:

I expect the value of loading returned from useMutation to stay true while my refetch queries are executing when passing along awaitRefetchQueries: true. Also, I expect onCompleted to be delayed until my refetch queries are done executing, My code looks as follows:

const [createComment, { loading }] = useMutation<
    MutateCreateShopifyOrderComment,
    MutateCreateShopifyOrderCommentVariables
  >(MUTATION_CREATE_SHOPIFY_ORDER_COMMENT, {
    variables: { orderId, comment },
    refetchQueries: () => ['QuerySelectedCampaignInformation'],
    awaitRefetchQueries: true,
    onCompleted: resetState,
  });

Actual outcome:

When I call the mutation, loading becomes false and onCompleted is called before the refetchQueries have finished executing. Here's a video demonstrating the issue:

When the circular loading indicator disappears, loading (returned from useMutation) becomes false. When "On complete called" is printed in the console onCompleted is called. Finally, when the comment appears in the UI, the refetchQueries are done. Here is a video showing the network tab during the issue.

The first two requests are the OPTION and POST requests for the mutation while the last two are the OPTION and POST requests for the refetch query. As you can see, the circular loading indicator (which means loading has become false) disappears from the UI long before the refetch query is finished executing.

How to reproduce the issue:

Call a mutation with (lengthy) refetch queries and awaitRefetchQueries: true. Add a console.log to onCompleted and a console.log printing out the value of loading and notice how these are printed before the refetch queries have finished executing

Version

System: OS: macOS Mojave 10.14.6 Binaries: Node: 12.6.0 - /usr/local/bin/node Yarn: 1.19.1 - ~/Documents/work/webapp-v2/node_modules/.bin/yarn npm: 6.4.1 - /usr/local/bin/npm Browsers: Chrome: 79.0.3945.117 Firefox: 69.0.3 Safari: 13.0.4 npmPackages: @apollo/react-hooks: 3.0.1 => 3.0.1 apollo: 2.18.3 => 2.18.3 apollo-cache-inmemory: 1.6.2 => 1.6.2 apollo-client: 2.6.3 => 2.6.3 apollo-link: 1.2.12 => 1.2.12 apollo-link-batch-http: 1.2.12 => 1.2.12 apollo-link-context: 1.0.18 => 1.0.18 apollo-link-error: 1.1.11 => 1.1.11 apollo-link-http: 1.5.15 => 1.5.15 apollo-link-state: 0.4.2 => 0.4.2 apollo-upload-client: 11.0.0 => 11.0.0 react-apollo: 3.1.3 => 3.1.3

[sseppola]

Having the same problem, getting flashes of old content when using refetchQueries and awaitRefetchQueries.

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
    Yarn: 1.16.0 - ~/projects/my-app/app/node_modules/.bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.17.0/bin/npm
  Browsers:
    Chrome: 80.0.3987.122
    Firefox: 73.0
    Safari: 13.0.5
  npmPackages:
    apollo: 2.11.0 => 2.11.0
    apollo-cache: 1.3.2 => 1.3.2
    apollo-cache-inmemory: 1.5.1 => 1.5.1
    apollo-cache-persist: ^0.1.1 => 0.1.1
    apollo-client: 2.6.4 => 2.6.4
    apollo-link: 1.2.12 => 1.2.12
    apollo-link-batch-http: 1.2.11 => 1.2.11
    apollo-link-error: 1.1.10 => 1.1.10
    apollo-utilities: 1.3.2 => 1.3.2
    react-apollo: 3.1.3 => 3.1.3

I'm running the mutation function a bit differently

const [createComment] = useMutation<
  MutateCreateShopifyOrderComment,
  MutateCreateShopifyOrderCommentVariables
>(MUTATION_CREATE_SHOPIFY_ORDER_COMMENT);

const handleCreateComment = useCallback((orderId: string, comment: string) => {
  createComment({
    variables: { orderId, comment },
    refetchQueries: () => ['QuerySelectedCampaignInformation'],
    awaitRefetchQueries: true,
  }).then(() => {
	// This runs without waiting for the refetch, setting state which
    // makes it obvious that the content has not been updated..
  })
}, [createComment])

[wosephjeber]

I'm experiencing the same issue. The awaitRefetchQueries option on the useMutation hook doesn't seem to do anything. The mutation promise resolves before the refetchQueries have resolved. I've also tried performing the mutation with the Apollo Client directly with the same result, so perhaps it's not an issue with react-apollo itself?

npmPackages:
  react-apollo => 3.1.3
  apollo-cache-inmemory => 1.6.3
  apollo-client => 2.6.4
  apollo-link => 1.1.0
  apollo-link-error => 1.1.0
  apollo-link-http => 1.5.16

[wosephjeber]

Update: I just found that it works when I define the refetchQueries as objects instead of referencing them by their names with strings. For example, the following does not work:

const [performMutation] = useMutation(MUTATION, {
  refetchQueries: ['QueryName'],
  awaitRefetchQueries: true
});

But the following does work:

const [performMutation] = useMutation(MUTATION, {
  refetchQueries: [{
    query: QUERY,
    variables: { ... }
  }],
  awaitRefetchQueries: true
});

But again, I'm getting the same result using the useMutation hook and the Apollo Client directly, so I think the issue lies in the Apollo Client itself.

[wosephjeber]

Another update: The fetchPolicy of the query I'm refetching seems to be a factor. When that query uses cache-and-network, the mutation resolves before the network request has completed. But when I change the query's fetchPolicy to network-only, the mutation waits for that query to resolve as expected.

[hatchli]

Another update: The fetchPolicy of the query I'm refetching seems to be a factor. When that query uses cache-and-network, the mutation resolves before the network request has completed. But when I change the query's fetchPolicy to network-only, the mutation waits for that query to resolve as expected.

Thank you @wosephjeber ! I'd been using wonky workarounds until your comments! I greatly appreciate it!