未捕获的不变违规：找不到“客户端”在上下文中或作为选项传递

Question

我正在尝试使用 GraphQL、React 和 TypeScript 练习一些 CRUD 操作。一旦我开始使用客户端，我就会在 devtools 控制台上收到此错误。这应该发生吗？我该如何解决这个问题？我一直在寻找答案，但它们总是与我的问题有所不同。我尝试检查版本（通常与我没有使用的 reac hook 存在冲突）。我不知道我还能做什么。

App.tsx

function App() {
const [title, setTitle] = useState("");
const [content, setContent] = useState("");

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

const [createUser, { loading, error }] = useMutation(CREATE_USER);
const [createPost, { loading: loadingPost, error: errorPost }] =
useMutation(CREATE_POST);

const client = new ApolloClient({
 uri: "http://localhost:3001/graphql",
 cache: new InMemoryCache(),
});

return (
<ApolloProvider client={client}>
  <div className="App">
    <div className="createPost">
      <h1>Create Post</h1>
      <input
        type="text"
        placeholder="Title"
        onChange={(e) => setTitle(e.target.value)}
      />
      <input
        type="text"
        placeholder="Content"
        onChange={(e) => setContent(e.target.value)}
      />
      <button onClick={() => createPost({ variables: { title, content } })}>
        Create Post
      </button>
    </div>
    <div className="users">
      <h1>Users</h1>
      <input
        type="text"
        placeholder="Name"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="text"
        placeholder="Email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="text"
        placeholder="Password"
        onChange={(e) => setPassword(e.target.value)}
      />
      <button
        onClick={() => createUser({ variables: { name, email, password } })}
      >
        Create User
      </button>
    </div>
  </div>
</ApolloProvider>
);
}

export default App;

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.5.9",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "graphql": "^16.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

我得到的日志

Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.
    at new InvariantError (http://localhost:3000/static/js/bundle.js:40409:24)
    at invariant (http://localhost:3000/static/js/bundle.js:40422:11)
    at useApolloClient (http://localhost:3000/static/js/bundle.js:50982:83)
    at useMutation (http://localhost:3000/static/js/bundle.js:51014:84)
    at App (http://localhost:3000/static/js/bundle.js:46:67)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:24007:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:26769:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:27968:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:12957:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:13006:20)
react-dom.development.js:20085 
The above error occurred in the <App> component:

    at App (http://localhost:3000/static/js/bundle.js:38:76)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
bootstrap:27 


Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.
        at new InvariantError (http://localhost:3000/static/js/bundle.js:40409:24)
        at invariant (http://localhost:3000/static/js/bundle.js:40422:11)
        at useApolloClient (http://localhost:3000/static/js/bundle.js:50982:83)
        at useMutation (http://localhost:3000/static/js/bundle.js:51014:84)
        at App (http://localhost:3000/static/js/bundle.js:46:67)
        at renderWithHooks (http://localhost:3000/static/js/bundle.js:24007:22)
        at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:26769:17)
        at beginWork (http://localhost:3000/static/js/bundle.js:27968:20)
        at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:12957:18)
        at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:13006:20)

Answer 1

修复：

index.tsx

const client = new ApolloClient({
  uri: "http://localhost:3001/graphql",
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);