Блог

Я новичок в использовании ApolloClient, поэтому прошу прощения, если это плохой вопрос, но мне действительно не помешала бы помощь. Я привык использовать компоненты на основе Redux и классов, использование Apollo с функциональными компонентами и крючками для меня очень ново, я не знаю, как делать даже самые простые вещи.

Прямо сейчас я пытаюсь внедрить систему аутентификации. У меня есть запросы, которые отправляют учетные данные пользователя и получают токен аутентификации. У меня есть заголовок, который является отдельным компонентом от формы регистрации/входа в систему, в которой отображается кнопка входа или выхода. Он использует запрос, который отправляет токен аутентификации на защищенный маршрут и получает обратно информацию о пользователе (например, имя пользователя).

Моя задача очень проста — как только нажата кнопка «выход», я хочу, чтобы запрос, который извлекает информацию о пользователе, был повторно отправлен, а компонент заголовка был повторно отправлен, чтобы вместо кнопки «выход» отображалась кнопка «вход».

Я делаю это вот так:

 export default function Header() {
  const { data, refetch } = useQuery(USER_INFO)
  function logout() {
    cookieCutter.set("Authorization", "", { expires: new Date(0) })
    refetch()
  }
  return (
    <header>
      [...]
      // If there's user info inside of data, render logout button, otherwise render login button.
      <a onClick={logout}>
        Logout
      </a>
      [...]
    </header>
  )
}
 

Поэтому я пытаюсь удалить файл cookie аутентификации, а затем повторно выполнить запрос. Я ожидаю, что запуск refetch() функции приведет к повторной выборке запроса, который вернет пустой data объект (потому что больше нет маркера аутентификации), и перенаправит компонент, чтобы теперь отобразить кнопку «войти».

Но когда я просто нажимаю кнопку «выход», компонент не повторяется. Если я обновлю страницу вручную, она увидит, что маркера нет, и отобразит кнопку «выход», как и ожидалось.

Я чувствую, что должен быть простой и стандартный подход, чтобы сделать что-то подобное, но я не знаю, что это такое. Вы можете мне помочь?

(Я знаю о refetchQueries параметре, который вы можете передать мутациям, но здесь он неприменим).

Если вы используете Apollo, вам не нужен Redux.

Для проверки подлинности взгляните на это