Error: Invalid hook call in Apollo useLazyQuery , useMutation, useQuery

Question

只要删除 App.js 中带有 useLazyQuery 的行（下面的代码），它就会显示简单的“HELLO”消息（运行良好），否则，我会收到以下错误消息

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

App.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { syncUser as syncRecord } from "./components/util";
import { useLazyQuery } from "@apollo/client";

export default function App(props) {
  console.log("React.version1", React.version);
  console.log("ReactDOM.version1", ReactDOM.version);
  const [syncUser] = useLazyQuery(syncRecord, {}); //CULPRIT LINE
  const [hasToken, setHasToken] = React.useState(false);
  return <div className="App">HELLO</div>;
}

我检查了一些东西

React 版本和 React DOM 版本在 index.js 和 App.js 中相同，即 16.13.1
我认为我没有违反 Hooks 规则 -- useState 在相同的示例代码中运行良好 App.js
npm ls react returns 具有多个反应的长树（但除了在根树处反应之外——其余部分（库的一部分）使用相同的反应@16.3.1 deduped

Apollo 客户端版本

    "@apollo/client": "^3.3.15",
    "@apollo/react-hooks": "^4.0.0",

基础项目是 node js 服务器端代码，我在其中创建了一个 client 目录 - 其中还包含一个 React 应用程序。

客户端package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@auth0/auth0-react": "^1.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.20.0",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:4567/",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

服务器端package.json

{
  "name": "cmis",
  "version": "0.3.0",
  "description": "NodeJS",
  "engines": {
    "node": "16.x"
  },
  "type": "module",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
    "test": "node test.js",
    "generate": "plop",
    "client": "cd client && yarn start",
    "server": "nodemon -e js,graphql server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },
  "dependencies": {
    "@apollo/client": "^3.3.15",
    "@apollo/react-hooks": "^4.0.0",
    "@aws-sdk/client-codebuild": "^3.20.0",
    "@aws-sdk/client-s3": "^3.20.0",
    "@david.kucsai/react-pdf-table": "^0.3.0",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@react-pdf/renderer": "^1.6.12",
    "@sendgrid/mail": "^7.4.0",
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link-http": "^1.5.17",
    "aws-sdk": "^2.804.0",
    "bull": "^3.19.1",
    "constant-case": "^3.0.4",
    "dataloader": "^2.0.0",
    "dayjs": "^1.9.3",
    "dotenv": "^8.2.0",
    "ejs": "^2.5.6",
    "express": "^4.17.1",
    "express-graphql": "^0.11.0",
    "express-jwt": "^6.0.0",
    "express-jwt-authz": "^2.4.1",
    "file-saver": "^2.0.5",
    "filepond": "^4.23.1",
    "filepond-plugin-file-validate-size": "^2.2.2",
    "filepond-plugin-image-exif-orientation": "^1.0.9",
    "filepond-plugin-image-preview": "^4.6.4",
    "graphql": "^15.3.0",
    "graphql-tools": "^6.2.1",
    "jwks-rsa": "^1.11.0",
    "knex": "^0.21.5",
    "pg": "^8.3.3",
    "pluralize": "^8.0.0",
    "react": "16.13.1",
    "react-apollo": "^3.1.5",
    "react-filepond": "^7.1.0",
    "react-lottie": "^1.2.3",
    "react-redux": "^7.2.1",
    "react-swipeable-views": "^0.13.9",
    "react-typist": "^2.0.5",
    "redis": "^3.0.2",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "swiper": "^6.5.3",
    "throng": "^5.0.0",
    "uuid": "^8.3.0",
    "yarn": "^1.22.10"
  },
  "devDependencies": {
    "@faker-js/faker": "^6.0.0-alpha.3",
    "concurrently": "^4.0.1",
    "got": "^11.3.0",
    "plop": "^3.0.5",
    "tape": "^4.7.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/heroku/node-js-getting-started"
  },
  "keywords": [
    "node",
    "heroku",
    "express"
  ],
  "license": "MIT"
}

Answer 1

删除您的 node_modules 文件夹（也从回收站）

和运行npm install

它对我有用，因为我在项目目录中有两个 node_modules 文件夹

Error: Invalid hook call in Apollo useLazyQuery , useMutation, useQuery

Error: Invalid hook call in Apollo useLazyQuery , useMutation, useQuery

javascript

reactjs

apollo-client

react-hooks