Updating 3.4.17 -> 3.5.5 causing weird behaviour with tests

[meeoh]

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.

[brainkim]

@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?

[dovalist]

I just encountered the same issue while using useLazyQuery and awaiting an approach to solve this issue.

Tried setting defaultOptions in the client, but no effect was found. defaultOptions: { watchQuery: { fetchPolicy: "cache-and-network", errorPolicy: "none", }, },

[dovalist]

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 }

[meezyart]

Same for me

[benjamn]

@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.

[meeoh]

@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

[benjamn]

@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.

[meeoh]

@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!

[LuisValgoi]

@meeoh could you solve this?

I'm facing exactly the same problem and I have no idea how to solve this.

Btw, my project is using the AC3 (@apollo/client) and there is no instance of the AC2 in the code...

[meeoh]

@LuisValgoi no I haven't been able to investigate deeper yet, im currently just sticking on 3.4.17 for now

[tractorcow]

I've noticed the same issue as @dovalist, using AC2, however this issue only occurred some time in the last month, leading me to believe there might be some other peer dependency at work here. Am upgrading to AC3.4 to see if that resolves the issue. :)

update: 3.4.17 solves the issue upgrading from 2.0 too. :)

[meeoh]

Just going to mention here that a new PR was merged that deals with defaultOptions here: https://github.com/apollographql/apollo-client/issues/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 😕

[MathieuMathurin]

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

[WagdySamih]

I having the same issue

   import { useLazyQuery } from "@apollo/client";

   const [ getSomthing, { loading, data, error }] = useLazyQuery(
    GET_SOMETHING,
    {
      fetchPolicy: "network-only",
      onCompleted: () => {
      // do something
      },
    }
  );

But I am having this error

 [Invariant Violation: client.watchQuery cannot be called with fetchPolicy set to "standby"]

in this Link they suggested upgrading to 3.4.0 and I did but still having the same issue

@appolo/client version is 3.4.0

any help please :(

[yujiangshui]

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.