Apollo / React: управление состоянием для компонентов асинхронной страницы, которые отключаются при выходе из системы?

На рисунке ниже показана конечная точка / library приложения Apollo / React с такой структурой:

   <App/>
     <Home/>
     <Library/> // Only renders if a user is logged in

Если пользователь вошел в систему, компонент приложения получает из моей серверной базы данных (внутри запроса «я») идентификаторы игр в библиотеке пользователя, и, когда пользователь переходит в библиотеку, эти идентификаторы используются для получения игр. детали из стороннего API.

Эта выборка в настоящее время выполняется с помощью Apollo useQuery () в <Library/>, но это вызывает обычное предупреждение Can't perform a React state update on an unmounted component, когда пользователь выходит из системы и <Library/> размонтируется.

Что было бы лучшим местом и методом для работы с асинхронным состоянием этого компонента? (без Redux). Поднять состояние до компонента приложения? Какой-то useEffect в компоненте библиотеки с useLazyQuery вместо useQuery?

Ура =)

Обновлено: по запросу, вот упрощенная версия компонента библиотеки (он извлекает идентификаторы игр непосредственно из серверной части, не требуя идентификаторов игр из запроса me)

const Library = () => {
  const { data: libraryResponse, loading: libraryLoading } = useQuery(
    GET_LIBRARY
  );

  if (libraryLoading) return <FullPageSpinner />;

  const games = libraryResponse?.getLibrary;

  if (!games) {
    return (
      <div>
        <div>Your library is empty.</div>
        <Link to = {'/home'}>Click here to find games!</Link>
      </div>
    );
  }

  return <GameList games = {games} />;
};

edit2: Я могу подтвердить, что использование useLazyQuery + useEffect вместо useQuery избавляется от предупреждения, я не уверен, идеально ли это или предназначено: