client.watchQuery cannot be called with fetchPolicy set to "standby" -- Error thrown on page load from useLazyQuery

Question

I have a page written in tsx that keeps crashing on load with the error client.watchQuery cannot be called with fetchPolicy set to "standby", even though the query in question is useLazyQuery (so it hasn't run yet), and has the option fetchPolicy: 'no-cache'. It crashes for me, but not for my teammates, which makes me think it might have something to do with package versions of maybe my local typescript, but I've set and re-set it every way I can think of with no improvement. The relevant code and package.json are below. Any insight at all would be wonderful.

// myfile.tsx
const [getRoles] = useLazyQuery(GET_ALL_ACCOUNT_ROLES, {
    fetchPolicy: 'no-cache',
    onError: (e) => {
      console.error(e.message);
      showPrompt({ type: 'error', message: 400 });
    },
    onCompleted: async (data) => {
      const {
        getAllAccountRoles: { data: res }
      } = data;
      setAllRoles(res);
    }
  });

package.json
"dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "@aws-amplify/api": "^4.0.13",
    "@aws-amplify/auth": "^4.1.3",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@loadable/component": "^5.15.0",
    "@mui/icons-material": "^5.1.0",
    "@mui/material": "^5.1.0",
    "@mui/system": "^5.1.0",
    "@reach/router": "^1.3.4",
    "@rinxun/custom-questions": "^1.1.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-link-http": "^1.5.17",
    "aws-appsync-auth-link": "^3.0.6",
    "check-equal": "^1.0.7",
    "clsx": "^1.1.1",
    "dotenv": "^10.0.0",
    "env-cmd": "^10.1.0",
    "mockjs": "^1.1.0",
    "qrcode.react": "^1.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.3.4",
    "react-scripts": "4.0.3",
    "store": "^2.0.12",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.3.2",
    "@storybook/addon-essentials": "^6.3.2",
    "@storybook/addon-links": "^6.3.2",
    "@storybook/node-logger": "^6.3.2",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.3.2",
    "@types/aws4": "^1.5.2",
    "@types/jest": "^26.0.24",
    "@types/loadable__component": "^5.13.4",
    "@types/qrcode.react": "^1.0.2",
    "@types/react": "^17.0.15",
    "@types/react-dom": "^17.0.9",
    "@types/uuid": "^8.3.1",
    "@typescript-eslint/eslint-plugin": "^4.29.1",
    "@typescript-eslint/parser": "^4.29.1",
    "aws4": "^1.11.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "8.1.0",
    "eslint": "^7.32.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.9.0",
    "eslint-plugin-import": "^2.24.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "graphql": "^15.5.1",
    "lint-staged": "^11.1.1",
    "prettier": "2.3.2",
    "typescript": "^4.3.5",
    "web-vitals": "^1.0.1"
  },

Centipoise

any success on this issue? – Koffler

Answer 1

I was having a similar problem. Traced it back to the issue useQuery doesn't seem to use defaultOptions in 3.5 in @apollo/client (a dependency of @apollo/react-hooks).

Solution for me was to downgrade by setting "@apollo/client": "~3.4.0" in the package.json and run npm install. Check your package-lock.json to ensure you've replaced your 3.5.x version.

---

EDIT: Noting that this issue is apparently fixed at v3.5.7 from Jan 11 2022 (see https://github.com/apollographql/apollo-client/tree/v3.5.7). So, rather than downgrade, one could test using this version or above.

Scopula

Answer 2

@apollo/react-hooks has a dependency of @apollo-client.

If you have imported useQuery from @apollo/react-hooks, then you need to import useQuery/useLazyQuery from @apollo-client instead of @apollo/react-hooks, along with the version lower than 3.5.

Kana

Answer 3

I scoured the internet for this error on a build with an existing react app that was using nwb before finally stumbling upon this. In my case, the apollo client version was 3.0.2. Updating my package.json "@apollo/client": "~3.4.0" and re running npm i finally did the trick. Thank you @GratefulGuest!

Remonstrate