将 fetchPolicy 设置为“standby”时无法调用 client.watchQuery - 从 useLazyQuery 加载页面时引发错误

Posted 2023-02-21

【中文标题】将 fetchPolicy 设置为“standby”时无法调用 client.watchQuery - 从 useLazyQuery 加载页面时引发错误

【英文标题】：client.watchQuery cannot be called with fetchPolicy set to "standby" -- Error thrown on page load from useLazyQuery

【发布时间】：2022-01-02 10:32:37

【问题描述】：

我有一个用 tsx 编写的页面，它在加载时不断崩溃，错误为 client.watchQuery cannot be called with fetchPolicy set to "standby"，即使有问题的查询是 useLazyQuery（所以它还没有运行），并且有选项 fetchPolicy: 'no-cache'。它对我来说崩溃了，但对我的队友没有，这让我认为它可能与我本地打字稿的包版本有关，但我已经以我能想到的各种方式设置和重新设置它，但没有任何改进。相关代码和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"
  ,

【参考方案1】：

我遇到了类似的问题。追溯到@apollo/client 中的问题useQuery doesn't seem to use defaultOptions in 3.5（@apollo/react-hooks 的依赖项）。

我的解决方案是通过在package.json 中设置"@apollo/client": "~3.4.0" 并运行npm install 来降级。检查您的 package-lock.json 以确保您已替换您的 3.5.x 版本。

【参考方案2】：

@apollo/react-hooks 具有 @apollo-client 的依赖关系。

如果你已经从@apollo/react-hooks导入useQuery，那么你需要从@apollo-client导入useLazyQuery而不是@apollo/react-hooks，并且版本低于3.5。

【参考方案3】：

我在互联网上搜索了一个使用nwb 的现有 React 应用程序构建的这个错误，然后终于偶然发现了这个。在我的例子中，apollo client 版本是 3.0.2。更新我的 package.json "@apollo/client": "~3.4.0" 并重新运行 npm i 终于成功了。谢谢@GratefulGuest！