apollo-client: Updating 3.4.17 -> 3.5.5 causing weird behaviour with tests

Intended outcome:

Update the package

Actual outcome:

Tests started to fail with the following error: Invariant Violation: client.watchQuery cannot be called with fetchPolicy set to "standby"

I narrowed it down to my components that are doing somethign like useQuery(query, {skip: whatever}). If I hardcode skip to true, the invariant violation will pop up consistently, if I hardcode it to false, it goes away 😕

I also tried changing my approach to use useLazyQuery instead of doing a skip approach, however with useLazyQuery I get the invariant violation consistently 😢

I’m not explicitly using a fetch policy anywhere, just sticking to the default, so I have no idea why it would be complaining about a fetchPolicy thats set to ‘standby’.

This also happens when trying to update to version 3.5.0 instead of 3.5.5.

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 3
Comments: 15 (3 by maintainers)

Commits related to this issue

Downgrade @apollo/client ref: https://github.com/apollographql/apollo-client/issues/9122 — committed to syuchan1005/BookReader by syuchan1005 3 years ago

Most upvoted comments

@dovalist It looks like you’re still using the apollo-client package (AC2). All AC3 versions of Apollo Client (3.0.0-3.5.5) are published to npm under the name @apollo/client, just in case that’s useful to know. Given the version range identified by @meeoh (updating 3.4.17 to 3.5.5), I don’t think AC2 issues belong in this issue.

benjamn on Nov 30, 2021

Invariant Violation: client.watchQuery cannot be called with fetchPolicy set to “standby” at new InvariantError (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/apollo-client/node_modules/ts-invariant/lib/invariant.js:16:28) at invariant (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/apollo-client/node_modules/ts-invariant/lib/invariant.js:28:15) at QueryManager.watchQuery (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/apollo-client/bundle.umd.js:1692:143) at ApolloClient.watchQuery (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/apollo-client/bundle.umd.js:2572:32) at /Users/rms/WebstormProjects/dovalist/hotels/node_modules/@apollo/client/react/hooks/hooks.cjs:35:31 at useReducer (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/react-dom/cjs/react-dom-server.node.development.js:1194:57) at Object.useState (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/react-dom/cjs/react-dom-server.node.development.js:1132:10) at Object.useState (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/react/cjs/react.development.js:1497:21) at useQuery (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/@apollo/client/react/hooks/hooks.cjs:28:20) at useLazyQuery (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/@apollo/client/react/hooks/hooks.cjs:265:18) at HotelListing (webpack-internal:///./pages/listing/index.jsx:110:75) at processChild (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14) at resolve (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5) at ReactDOMServerRenderer.render (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22) at ReactDOMServerRenderer.read (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29) at renderToString (/Users/rms/WebstormProjects/dovalist/hotels/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27) { framesToPop: 1 }

dovalist on Nov 30, 2021

Just going to mention here that a new PR was merged that deals with defaultOptions here: #9105

However, even on @apollo/client 3.5.7 I’m still getting this issue. I can still trace it down to the tests where im doing
const whatever = useQuery(QUERY, {
  skip: someCondition
});
If someCondition is true, the tests will fail with Invariant Violation: client.watchQuery cannot be called with fetchPolicy set to "standby" however if I hardcode someCondition to false, the tests pass completely fine 😕

Same here, it works as long has skip value is falsy. Reverted to 3.4.17 and I don’t have the error anymore

MathieuMathurin on Jan 17, 2022

@meeoh Ah ha! It looks like you’re also still importing from apollo-client somewhere. In the useQuery.js file, it looks like useApolloClient must somehow be returning an instance of the old AC2 version of ApolloClient.

Very tentative guess: check the client you’re passing into <ApolloProvider client={client}>? Where does the ApolloClient constructor for that client object get imported from?

If that isn’t it, can you try searching for apollo-client in your application code, or maybe (if you’re feeling bold) npm rm apollo-client and see what breaks? If you find you have a bunch of imports that need to be updated, we have a codemod script that can help with that (though I still recommend reviewing the changes). More details in the migration guide.

Yeah it definitely looks like the underlying client is the issue here! It looks like https://github.com/Shopify/quilt/tree/main/packages/graphql-testing is the culprit here, as its importing apollo-client. Guess I’ll look into getting that updated to support the latest versions of apollo!

meeoh on Dec 2, 2021

I got the same issue after I upgrade apollo-client to @apollo/client@^3.5.10. And I narrow down the code to find it is related to the skip in my case. If skip = true I will see this error.

yujiangshui on Mar 25, 2022

@meeoh Sorry to hear you’re experiencing this. Does the error have a stack trace? Also can you provide more information about the versions of apollo/graphql packages?

Sorry for the late response @brainkim, heres my stack trace:

 Invariant Violation: client.watchQuery cannot be called with fetchPolicy set to "standby"
      at new InvariantError (node_modules/ts-invariant/lib/invariant.esm.js:12:28)
      at invariant (node_modules/ts-invariant/lib/invariant.esm.js:24:15)
      at QueryManager.watchQuery (node_modules/apollo-client/bundle.umd.js:1692:143)
      at TestingApolloClient.ApolloClient.watchQuery (node_modules/apollo-client/bundle.umd.js:2572:32)
      at node_modules/@apollo/client/react/hooks/useQuery.js:21:31
      at mountState (node_modules/react-dom/cjs/react-dom.development.js:15626:20)
      at Object.useState (node_modules/react-dom/cjs/react-dom.development.js:16248:16)
      at Object.useState (node_modules/react/cjs/react.development.js:1508:21)
      at useQuery (node_modules/@apollo/client/react/hooks/useQuery.js:14:14)
      at BugForm (web/features/BugForm/BugForm.tsx:60:48)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
      at node_modules/react-dom/cjs/react-dom.development.js:26021:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
      at node_modules/@shopify/react-testing/build/cjs/root.js:167:16
      at node_modules/@shopify/react-testing/build/cjs/root.js:94:16
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at Object.act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at CustomRoot.act (node_modules/@shopify/react-testing/build/cjs/root.js:93:31)
      at CustomRoot.mount (node_modules/@shopify/react-testing/build/cjs/root.js:166:10)
      at new Root (node_modules/@shopify/react-testing/build/cjs/root.js:72:10)
      at new CustomRoot (node_modules/@shopify/react-testing/build/cjs/mount.js:13:5)
      at mount (node_modules/@shopify/react-testing/build/cjs/mount.js:25:21)
      at Object.<anonymous> (web/features/MyComponent/tests/MyComponent.test.tsx:222:29)

I am using https://github.com/Shopify/quilt/tree/main/packages/react-testing which seems like it would be the source of the issue, but since other people are experiencing it im curious if theres some overlap somewhere

meeoh on Dec 1, 2021