reactjs - 如果 ME_ 查询返回数据，我需要显示用户名和注销按钮，否则我想显示“未登录”。我怎样才能实现它？

Question

我正在使用来自 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;

标签： reactjsgraphqlapolloapollo-clientreact-apollo-hooks