reactjs - GraphQL + React:在上下文中找不到“客户端”或作为选项传入
问题描述
花了很多时间在这上面,尝试了几个包的改变,但仍然没有任何效果。我有以下 App.js 组件:
import React, { Fragment } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { ApolloClient, ApolloProvider, gql, useQuery } from "@apollo/client";
import cache from "./cache";
// Components
import Landing from "./components/layout/Landing";
import Routes from "./components/routing/Routes";
import Dashboard from "./components/dashboard/Dashboard";
export const typeDefs = gql`
extend type Query {
isLoggedIn: Boolean!
}
`;
const client = new ApolloClient({
cache,
uri: "/",
headers: {
authorization: localStorage.getItem("token") || "",
},
typeDefs,
resolvers: {},
dataIdFromObject: (o) => o.id,
});
const IS_LOGGED_IN = gql`
query IsUserLoggedIn {
isLoggedIn @client
}
`;
function IsLoggedIn() {
const { data } = useQuery(IS_LOGGED_IN);
return data.isLoggedIn ? (
<Route exact path="/dashboard" component={Dashboard} />
) : (
<Route exact path="/" component={Landing} />
);
}
function App() {
return (
<ApolloProvider client={client}>
<Router>
<Fragment>
<Switch>
<Landing />
<Route component={Routes} />
</Switch>
</Fragment>
</Router>
</ApolloProvider>
);
}
export default App;
该组件包含一个Landing
组件:
import React from "react";
// Components
import Login from "../auth/Login";
const Landing = () => {
return (
<div>
<Login />
</div>
);
};
export default Landing;
...其中又包含以下Login
组件:
import React, { Fragment, useState } from "react";
import { Redirect } from "react-router-dom";
import { useMutation } from "@apollo/react-hooks";
import LOGIN_USER from "../../mutations/Login";
const Login = () => {
const [formData, setFormData] = useState({
email: "",
password: "",
});
const [login] = useMutation(LOGIN_USER);
const { email, password } = formData;
const onChange = (e) =>
setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = (formData) => {
login({ variables: formData })
.then((res) => {
localStorage.setItem("token", res.data.login.token);
localStorage.setItem("userId", res.data.login.userId);
})
.then(() => <Redirect to="/dashboard" />);
};
return (
<Fragment>
<form onSubmit={onSubmit}>
<div className="form-group">
<input
type="email"
placeholder="Email address"
name="email"
value={email}
onChange={onChange}
/>
</div>
<div className="form-group">
<input
type="password"
placeholder="Password"
name="password"
value={password}
onChange={onChange}
/>
</div>
<input type="submit" className="btn-primary" value="Sign in" />
</form>
</Fragment>
);
};
export default Login;
这是package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/client": "^3.2.9",
"@apollo/react-hooks": "^4.0.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"graphql": "^15.4.0",
"graphql-tag": "^2.11.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
}
运行项目时,我得到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.
即使我配置了客户端,也没有任何效果。看到某些软件包存在问题,但在我看来,我安装了正确的软件包。我在这里想念什么?
解决方案
消除:
"@apollo/react-hooks": "^4.0.0",
使用客户端时,您不需要使用钩子。
这是您的另一个问题:
import { useMutation } from '@apollo/client';
推荐阅读
- kubernetes - 是否可以在 GKE 的区域集群中创建仅限区域的节点池?
- github - 带有生成文件的 GitHub 版本
- r - 如何从“规范”类的对象中提取组件?
- mongodb - 使用 Mongodump shell 时,如何从副本集中指定数据库和集合?
- python-3.x - ValueError:无法在位置 0 (Pandas) 解析字符串“2.90 3.50 2.35”
- lua - Roblox Studio 我的脚本只能运行一次
- google-sheets - 计数值在范围内增加的次数 - Google 表格
- node.js - 任何人都可以引导我朝着正确的方向前进,让这个 Azure 函数在它输出“无法找到模块'@azure/functions'的地方?
- concatenation - Libreoffice calc 连接单元格内容和括号
- javascript - 如何在使用 driver.js 创建的弹出框上使用 MathJax?