useLazyQuery не вызывается после onClick - PullRequest
Новая
       12

useLazyQuery не вызывается после onClick

1 голос
/ 07 апреля 2020

Я пытаюсь проверить, является ли мой пользователь isLoggedIn с помощью запроса от данных API GraphQL от пользователя, если он вошел в систему, если нет, он должен вернуть undefined или какую-то ошибку.

Вопрос в том, что у меня есть забавный c под названием removeSession, который удаляет из моего localStorage токен, когда пользователи нажимают кнопку выхода из системы. Проблема начинается сейчас, я понял, что мой токен очищался от localStorage, но после этого userLAzyQuery не запускался. Поэтому для проверки я начал удалять де-токен вручную, и после onClick я вызвал sendQuery()

. Для принудительной проверки я создал обратный вызов onCompleted и onError после запроса, и угадайте, что? также не вызывается.

header. 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;

query / index.ts 

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

Я использую следующее. js, apollo 3, реагировать 16.12. К сведению

В моих сетевых вкладках нет сигналов о какой-либо активности XHR

Обновление 1 : I добавлено 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);
    },
  });

1 Ответ

1 голос
/ 08 апреля 2020

Вы уже выполняете тот же запрос, когда компонент монтируется здесь: 

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

Это означает, что по умолчанию последующие выборки того же запроса будут выполняться из кэша. Вот почему вы ничего не видите на вкладке Сеть.

Чтобы сервер выполнял запрос, нам нужно изменить политику извлечения на что-то вроде network-only: 

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

Я ожидал бы, что onCompleted будет выполнен независимо от того, как был выполнен запрос, но я не могу сказать, является ли это предполагаемым поведением или ошибкой.

...