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.

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

See original GitHub issue

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