testing-library/react causes infinite loops on query unless onCompleted is wrapped in a useCallback

Intended outcome:

Given the following query:

const { loading } = useQuery(QUERY, {
  fetchPolicy: 'network-only',
  onCompleted: (data) => console.log(data),
})

The component continually re-renders, onCompleted is never called, and loading is always true.

This issue is pretty well documented on https://github.com/apollographql/apollo-client/issues/6301; however, the solution mentioned in the comments is to wrap onCompleted in a useCallback.

const { loading } = useQuery(QUERY, {
  fetchPolicy: 'network-only',
  onCompleted: React.useCallback((data) => console.log(data'), []),
})

I’m more or less wondering if this is an acceptable solution from the Apollo Client team or if there’s something that can be done in the client itself to resolve.

Actual outcome:

The component continually renders, never firing the onCompleted and always having the loading prop from the query as true.

How to reproduce the issue:

It appears this code sandbox is still valid in regards to an app hitting this issue: https://codesandbox.io/s/sleepy-mendeleev-1q9jf?file=/src/App.js. My specific use-case is only seeing this behavior in a test environment. If this would be helpful to reproduce via a code sandbox, I’ll gladly spin one up if the original link here is not helpful at all.

Versions

  System:
    OS: macOS 11.2
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.150
    Firefox: 85.0
    Safari: 14.0.3
  npmPackages:
    @apollo/client: ^3.2.5 => 3.3.9 
    apollo-upload-client: ^14.1.3 => 14.1.3 

[ynotdraw]

Hey @benjamn , thanks for your time and the response! Here’s what I’m seeing with @wry/equality:

✗ yarn why @wry/equality
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "@wry/equality"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@wry/equality@0.2.0"
info Reasons this module exists
   - "@apollo#client" depends on it
   - Hoisted from "@apollo#client#@wry#equality"
info Disk size without dependencies: "172KB"
info Disk size with unique dependencies: "240KB"
info Disk size with transitive dependencies: "240KB"
info Number of shared dependencies: 1
=> Found "@types/apollo-upload-client#@wry/equality@0.3.0"
info Reasons this module exists
   - "@types#apollo-upload-client#@apollo#client" depends on it
   - Hoisted from "@types#apollo-upload-client#@apollo#client#@wry#equality"
info Disk size without dependencies: "76KB"
info Disk size with unique dependencies: "144KB"
info Disk size with transitive dependencies: "144KB"
info Number of shared dependencies: 1
=> Found "apollo-utilities#@wry/equality@0.1.11"
info This module exists because "@lifeomic#graphql-tools-cli#graphql-tools#apollo-utilities" depends on it.
info Disk size without dependencies: "68KB"
info Disk size with unique dependencies: "136KB"
info Disk size with transitive dependencies: "136KB"
info Number of shared dependencies: 1
✨  Done in 0.92s.

It appears I have three different versions, due to three different dependencies requiring the different versions. I’m starting to wonder if that is the root cause of the issue? I can see if I can create a reproduction in the code sandbox with @testing-library/react as well, but I’m starting to wonder if this is the problem.

[hwillson]

Let us know if this is still a concern with @apollo/client@latest - thanks!