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

[ynotdraw]

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 #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 

[benjamn]

@ynotdraw This kind of problem should have been fixed by #6588. When I update the @apollo/client version in that old reproduction, then download the .zip and run npm install locally, I no longer see the repeated rerenders. Perhaps you're stuck on an older version of @wry/equality? To find out, check node_modules/@wry/equality/package.json and/or your package-lock.json file (the latest version is 0.3.2). Also, since that old reproduction doesn't seem to be using @testing-library/react, where exactly does that package come into play in your case?

[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/[email protected]"
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/[email protected]"
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/[email protected]"
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.

[benjamn]

If you can update to @apollo/[email protected] (instead of 3.2.5), I think yarn will be able to figure out that @wry/[email protected] is the right version to be using, though you might need to add/remove packages and examine your yarn.lock file to make sure you end up with that version.

If all else fails, since you're using yarn, you might be able to solve this version conflict using their resolutions feature, since @wry/[email protected] is backwards compatible with 0.2.x (it's just a little more permissive in some ways).

Although I hope @lifeomic/graphql-tools-cli will eventually update their dependencies to avoid depending on the old apollo-utilities package, I believe that's mostly harmless here.

[SubZane]

EDIT:

Never mind this. I forgot the step to wrap my app with ApolloProvider. When I did that, it worked as intended :)

<ApolloProvider client={client}>...</ApolloProvider

---

(first off, I'm new to ApolloClient and GraphQL so please my lack of knowledge :) )

I've checked that I have the updated libs as suggested above.

however, I cannot use useQuery() as in the documentation examples as it will run an infinitive loop

This will just run logs to the console forever until I stop the server

const { loading, error, data } = useQuery(my-query)
console.log('data: ', data)

if this is not the correct way of using useQuery() maybe the docs should be updated?

[hwillson]

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