Apollo/React：注销时卸载的异步页面组件的状态管理？

如何解决Apollo/React：注销时卸载的异步页面组件的状态管理？

下图显示了具有这种结构的 Apollo / React App 的 /library 端点：

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

如果用户已登录，App 组件将从我后端的数据库（在“我”查询中）接收用户库中游戏的 id，当用户导航到库时，这些 id 用于从第三方 API 获取游戏的详细信息。

此提取目前是通过 <Library/> 中的 Apollo useQuery() 完成的，但是当用户注销并卸载 Can't perform a React state update on an unmounted component 时，这会导致通常的 <Library/> 警告。

处理该组件异步状态的最佳位置和方法是什么？ （没有 Redux）。将状态提升到 App 组件？使用 useLazyQuery 而不是 useQuery 在 Library 组件中使用某种 useEffect？

干杯 =)

---

---

编辑：根据要求，这里有一个简化版本的库组件（这个组件直接从后端获取游戏 ID，而不需要从 me 查询中获取游戏 ID）

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：我可以确认 using useLazyQuery + useEffect instead of useQuery 消除了警告，我不确定这是理想的还是有意的：