在 onClick 之后没有调用 useLazyQuery

Question

我正在尝试使用来自用户的 GraphQL API 数据的查询来检查我的用户是否已登录，如果它已登录，则应返回未定义或某些错误。

问题是我有一个 func 调用removeSession，当用户单击注销按钮时，它会从我的 localStorage 中删除令牌。问题现在开始，我意识到我的令牌已从 localStorage 中清除，但之后没有触发 userLAzyQuery。所以为了检查我开始手动删除 de token 并且在 onClick 之后我调用了sendQuery()

为了强制我的检查，我在查询后创建onCompleted和onError回调，你猜怎么着？也没有被调用。

头文件.js

import { Fragment, useEffect } from 'react';
import Link from 'next/link';
import { isAuthenticatedQuery } from '../queries';
import { useQuery, useLazyQuery } from '@apollo/react-hooks';
import Router from 'next/router';

function isActive(pathname) {
  return typeof document !== 'undefined' && document.location.pathname === pathname;
}

const Header = () => {
  const { loading, data: dataAuth, error } = useQuery(isAuthenticatedQuery);

  const [sendQuery, { data: dataAuthLazy, error: errorsLazy }] = useLazyQuery(isAuthenticatedQuery, {
    onCompleted(data) {
      console.log('invoked onCompleted', data);
    },
    onError(err) {
      console.log('onerror', err);
    },
  });

  function removeSession() {
    localStorage.removeItem('token');
    sendQuery();
    console.log('inside removeSession');
    Router.push('/');
  }

  return (
    <nav>
      <div className="left">
        <Link href="/">
          <a data-active={isActive('/')}>Blog</a>
        </Link>
        <Link href="/drafts">
          <a data-active={isActive('/drafts')}>Drafts</a>
        </Link>
      </div>
      <div className="right">
        {!!dataAuth || !!dataAuthLazy ? (
          <Fragment>
            <Link href="/create">
              <a data-active={isActive('/create')}>+ Create draft</a>
            </Link>
            <Link href="/login" >
              <a onClick={() => sendQuery()}>Logout</a>
            </Link>
          </Fragment>
        ) : (
          <Fragment>
            <Link href="/signup">
              <a data-active={isActive('/signup')}>Signup</a>
            </Link>
            <Link href="/login">
              <a data-active={isActive('/login')}>Login</a>
            </Link>
          </Fragment>
        )}
      </div>
      <style jsx>{`
        nav {
          display: flex;
          padding: 2rem;
          align-items: center;
        }

        .bold {
          font-weight: bold;
        }

        a {
          text-decoration: none;
          color: gray;
          font-weight: regular;
          display: inline-block;
        }

        .left a[data-active='true'] {
          color: #000;
          font-weight: bold;
        }

        a + a {
          margin-left: 1rem;
        }

        .right {
          margin-left: auto;
        }

        .right a {
          padding: 0.5rem 1rem;
          border-radius: 5px;
          background: hsla(0, 89%, 63%, 0.79);
          color: white;
          font-weight: 500;
        }

        .right a:hover {
          background: hsl(0, 72%, 54%);
        }
      `}</style>
    </nav>
  );
};

export default Header;

查询/index.ts

export const isAuthenticatedQuery = gql`
  query isAuthenticatedQuery {
    me {
      id
      name
      email
    }
  }
`;

我正在使用 next.js、apollo 3、react16.12 仅供参考

在我的网络标签中没有一些 XHR 活动的信号

更新 1：我添加fetchPolicy了我的 lazyQuery，我的请求出现在 chromedev 工具中，但状态被取消

  const [sendQuery, { data: dataAuthLazy, error: errorsLazy }] = useLazyQuery(isAuthenticatedQuery, {
    fetchPolicy: 'no-cache',
    onCompleted(data) {
      console.log('invoked onCompleted', data);
      Router.push('/');
    },
    onError(err) {
      console.log('onerror', err);
    },
  });

Answer 1

当组件在此处安装时，您已经在运行相同的查询：

const { loading, data: dataAuth, error } = useQuery(isAuthenticatedQuery)

这意味着，默认情况下，相同查询的后续提取将从缓存中完成。这就是您在“网络”选项卡中看不到任何内容的原因。

为了强制服务器完成请求，我们需要将获取策略更改为network-only：

const [sendQuery, { data: dataAuthLazy, error: errorsLazy }] = useLazyQuery(isAuthenticatedQuery, {
  fetchPolicy: 'network-only',
})

onCompleted无论查询是如何完成的，我都希望被执行，但我无法确定这是预期的行为还是错误。