question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

The onCompleted callback of the useQuery hook executes on data mutations

See original GitHub issue

Intended outcome: The onCompleted callback in the useQuery hook shouldn’t be executed when data has changed by a mutation. The callback function needs to be called only once, after the data has been fetched.

Actual outcome: The onCompleted callback of the useQuery hook executes on each data change.

How to reproduce the issue: https://codesandbox.io/s/mutations-oncompleted-callback-execution-2n2yic?file=/src/index.js

  1. Add a todo
  2. Update the todo

Switch between @apollo/client versions to see the behavior of the onCompleted callback varies between 3.4.x and 3.5.x, 3.6.x versions. On version 3.4.x, the onCompleted callback is called only once, when data fetches, while on versions 3.5.x and 3.6.x, the callback is executed two times, when data fetches and additionally after the mutation.

Versions 3.4.14: works as expected. 3.5.x and 3.6.x: the onCompleted callback of the useQuery hook executes on data mutations.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:7
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

5reactions
alessbellcommented, Oct 26, 2022

Appreciate the reproduction here, @krasai! I have https://github.com/apollographql/apollo-client/pull/10229 open with the fix, I’ll update this issue again when it’s merged and released. Thanks everyone 🙇‍♀️

1reaction
alessbellcommented, Dec 12, 2022

The fix is now available in the current 3.8 alpha release which can be installed via npm i @apollo/client@alpha.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Mutations in Apollo Client - Apollo GraphQL Docs
The useMutation React hook is the primary API for executing mutations in an Apollo application. As shown above, you use the gql function...
Read more >
onCompleted callback is not calling for 2nd ... - Stack Overflow
It seems to be a known issue that Apollo's onCompleted option works differently between queries fulfilled over the network and by the cache....
Read more >
useQuery | TanStack Query Docs
const { data, ... This value only applies to the hook it is defined on. ... the function will be executed with the...
Read more >
Update data with mutations - Apollo GraphQL Docs
Unlike useQuery , useMutation doesn't execute its operation as soon as its component renders. Instead, the hook returns a mutate function that we...
Read more >
urql Documentation - React API
The Mutation component accepts a query prop, and a function callback must be passed to children that receives the mutation result and must...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found