Сброс хранилища Apollo и аутентифицированных запросов при выходе - PullRequest
Новая
       26

Сброс хранилища Apollo и аутентифицированных запросов при выходе

0 голосов
/ 23 апреля 2020

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

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

export default function App() {
  const { client, data, loading } = useQuery(CURRENT_USER, {
    onCompleted({ currentUser }) {
      client.writeData({ data: { currentUser } });
    }
  });

  if (loading) return null;

  return (
    <BrowserRouter>
      {data.currentUser ? <Authenticated /> : <Unauthenticated />}
    </BrowserRouter>
  );
};

Существует несколько ресурсов, которые аутентифицированный пользователь может просматривать / трогать при входе в систему, каждый со своими собственными запросами. 

export default function Zones() {
  const { data, loading } = useQuery(ZONES);

  if (loading) return null;

  return (
    <div className='Zones'>
      ...
    </div>
  );
}

Проблема в том, что я не могу полностью очистить магазин, когда пользователи выходят из системы. В моей функции signOut я звоню client.resetStore(), которая, как я понимаю, будет перехватывать активные запросы и, таким образом, заставит мой сервер отвечать неавторизованными запросами. 

const signOut = () => {
  localStorage.setItem('token', null);
  client.resetStore();
};

Моя путаница в том, что даже если я настрою my signOut, чтобы очистить текущего пользователя в хранилище и отправить меня в контейнер Unauthorized, когда вызывается resetStore(), он также выбирает все устаревшие запросы.

Я пытался использовать clearStore(), мои компоненты не рендерится, а существующие запросы сохраняются, поэтому я получаю ошибки о невозможности прочитать свойства из currentUser, когда ни один из них компоненты должны присутствовать больше.

Я также попытался client.writeQuery и изменил запрос CURRENT_USER, чтобы он ничего не возвращал, но остальные данные все еще присутствуют и не будут работать, если это отдельный запрос ресурса (например, идентификатор, принадлежащий первому пользователю).

1 Ответ

0 голосов
/ 25 апреля 2020

Я все еще открыт для других подходов к решению этой проблемы, но сейчас это работает для меня.

Это очищает хранилище всех прошлых данных и затем повторно выполняет исходный запрос. По какой-то причине я могу не получить запрос App для обновления, если я вызову writeData или writeQuery в компоненте с кнопкой выхода. 

export default function App() {
  const { client, data, loading, refetch } = useQuery(CURRENT_USER, {
    onCompleted({ currentUser }) {
      client.writeData({ data: { currentUser } });
    }
  });

  if (loading) return null;

  return (
    <BrowserRouter>
      <CurrentUserContext.Provider value={refetch}>
        {data.currentUser ? <Authenticated /> : <Unauthenticated />}
      </CurrentUserContext.Provider>
    </BrowserRouter>
  );
};

  const client = useApolloClient();
  const refetchCurrentUser = useContext(CurrentUserContext);

  const signOut = () => {
    localStorage.setItem('token', null);
    client.clearStore().then(refetchCurrentUser);
  };
...