未捕获的不变冲突：无法在上下文中找到"client"或作为选项传入

Question

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

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;

软件包.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")
);