將 fetchPolicy 設置為“standby”時無法調用 client.watchQuery——從 useLazyQuery 加載頁面時拋出錯誤

Question

我有一個用 tsx 編寫的頁面，它在加載時不斷崩潰，並出現錯誤client.watchQuery cannot be called with fetchPolicy set to "standby" ，即使有問題的查詢是 useLazyQuery （所以它還沒有運行），並且有選項fetchPolicy: 'no-cache' 。 它對我來說崩潰了，但對我的隊友來說卻沒有，這讓我認為它可能與我本地 typescript 的 package 版本有關，但我已經以我能想到的各種方式設置和重新設置它而沒有任何改進。 相關代碼和package.json如下。 任何洞察力都會很棒。

// 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"
  },

Answer 1

我遇到了類似的問題。 追溯到問題useQuery 在 3.5 中似乎沒有使用@apollo/client中的 defaultOptions （ @apollo/react-hooks的依賴項）。

我的解決方案是通過在package.json中設置"@apollo/client": "~3.4.0"降級並運行npm install 。 檢查您的package-lock.json以確保您已更換3.5.x版本。

Answer 2

由於@apollo/react-hooks 依賴於@apollo-client。 如果你已經從@apollo/react-hooks 導入了useQuery，那么你需要從@apollo-client 導入useQuery/useLazyQuery 而不是@apollo/react-hooks 以及低於3.5 的版本

Answer 3

我在互聯網上搜索了一個使用nwb的現有反應應用程序構建的這個錯誤，然后終於偶然發現了這個。 就我而言， apollo client版本是 3.0.2。 更新我的 package.json "@apollo/client": "~3.4.0"並重新運行npm i終於成功了。 謝謝@GratefulGuest！