onCompleted is called during render phase, causing React errors (reproduction provided)

[dylanwulf]

Intended outcome:
There should be no React errors when using apollo client

Actual outcome:
React error is printed to the console:

Warning: Cannot update a component (`App`) while rendering a different component (`PeopleList`). To locate the bad setState() call inside `PeopleList`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

The cause of this seems to be that onCompleted gets called during the render phase if the query results are available in the cache. This can cause problems when doing something like dispatching a redux action from inside the onCompleted function.

How to reproduce the issue:
Clone and run my reproduction, using branch react-console-errors: https://github.com/dylanwulf/react-apollo-error-template/tree/react-console-errors. Install packages with npm install and run the app with npm start. When running the app, wait until "parent query completed" is true, then click the button and watch the console log.

Versions

  System:
    OS: Windows 10 10.0.22000 (envinfo doesn't seem to detect this properly, I'm actually running Windows 11)
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.33)
  npmPackages:
    @apollo/client: ^3.6.6 => 3.6.6

[dylanwulf]

Submitted a PR which should fix this: #9801

[simplecommerce]

@dylanwulf thanks for this, I believe I am having the same issue with onCompleted but with useMutation.

I took your repo and did some modifications to test it with useMutation

https://github.com/simplecommerce/react-apollo-error-template/tree/mutation-onCompleted-error

Could you please confirm if this is the same problem?

In my actual project in order to bypass this, I had to use mutation().then(() => instead of onCompleted to not have the error.

[dylanwulf]

@simplecommerce I can confirm that the reproduction you provided does get fixed with the PR I submitted

[kaufmann42]

What is the order of which onCompleted is called? Is it called sync with updating data? Or is it waited to be completed before any state updates are finished?

[dylanwulf]

Fixed by #9801!