问题描述
我正在使用来自 apollo/react-hooks 的 useQuery。单击注销按钮时,我正在执行 client.resetStore()。但是正文或用户和注销按钮没有被删除。我不得不对 client.resetStore() 使用 try-catch,因为没有它我会收到 GraphQL 错误。
如果 ME_ 查询返回数据,我想显示用户名和注销按钮,否则我想在单击注销按钮时显示“未登录”。我怎样才能实现它?
这是我的组件代码如下:-
import React from "react";
import { Link } from "react-router-dom";
import { useQuery,useMutation } from "@apollo/react-hooks";
import { setAccesstoken } from "./accesstoken";
import { ME_ } from "./Queries";
import { logoUT_ } from "./Queries";
const Header = () => {
const { client,loading,error,data } = useQuery(ME_,{
fetchPolicy: "network-only",});
const [logout] = useMutation(logoUT_);
if (error) {
console.log("me error",error);
}
console.log("me data",data);
let body = null;
if (loading) {
body = <div>loading...</div>;
} else if (data && data.me) {
body = <div>you are logged in as: {data.me.email}</div>;
} else {
body = <div>not logged in</div>;
}
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<span className="navbar-brand">Navbar</span>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/">Home</Link>
</li>
<li className="nav-item">
<Link to="/register">Register</Link>
</li>
<li className="nav-item">
<Link to="/login">Login</Link>
</li>
<li className="nav-item">
<Link to="/protect">Protected</Link>
</li>
</ul>
</div>
{body}
{!loading && data && data.me ? (
<button
onClick={async () => {
try {
await logout();
setAccesstoken("");
await client.resetStore();
body = "ssssssssssssssss";
} catch (e) {
console.log("logout err");
body = "ssssssssssssssss";
}
}}
>
logout
</button>
) : null}
</div>
</nav>
);
};
export default Header;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)