如何显示来自 React-Query 的单个缓存数据？

Question

我的应用程序有一个用户输入 query，然后获取 response data，也是 cached。

对于每个 cache data，我想为每个 previous query 显示一个按钮，用户可以单击该按钮以在屏幕上再次加载该数据。

假设我首先输入了 id 1，然后 data 是 cached 并呈现。当我用 Object.values(cacheData.queriesMap) 记录我的 cached data 时，我收到 {["rickandmorty",0]: Query, ["rickandmorty","1"]: Query}。我现在想遍历我的缓存数据并显示每个单独的查询。

// <Home />
const cachedCharacters = Object.values(cacheData.queriesMap).map(character => (
    <button>{character.state.data.name}</button>
))

return (
    <div>
      {cachedCharacters}
    </div>
)

但是，我收到了 TypeError: Cannot read property 'name' of undefined。我怀疑这个错误的原因是因为第一个查询是 ["rickandmorty",0]，一个应用程序在安装时获取的不存在的项目。

然后我将我的应用程序设置为在组件安装时禁用抓取。

// <Home/>
const { isLoading, error, data } = useQuery(
    ["rickandmorty", idQuery],
    handleRickAndMortyFetch,
    {
      enabled: false || idQuery !== 0,
  );

然而，应用程序仍然在安装时进行初始提取。如果我首先输入 id 1，我会再次收到 {["rickandmorty",0]: Query, ["rickandmorty","1"]: Query}.

如果 initial fetch 是阻止每个人 cache data 被渲染的原因，我如何 disable 如果 enabled: false 不工作，initial fetch？如果阻止呈现每个单独的缓存数据是另一个问题，请提出解决方案。 https://codesandbox.io/s/rick-and-morty-render-cache-data-8dv6y

Answer 1

您的代码是正确的。您在开发工具中看到的初始查询并不一定意味着它正在获取。如果您查看 idQuery 0 的状态，则没有它的 data/error 被更新的计数。它只是处于空闲状态。

我建议您在映射之前先尝试过滤 cacheData.queriesMap 以确保您的角色有数据。您可以检查 state.data 或确保查询具有 state.status === 'success'。或者最简单的方法可能是只显示哪些查询已经有数据。

  const cachedCharacters = Object.values(
    cacheData.queriesMap
  ).map((character, index) => (
    <>
      {character.state.data ? (
        <button key={`${character.state.data.name}${index}`}>
          {character.state.data.name}
        </button>
      ) : null}
    </>
  ));

如何显示来自 React-Query 的单个缓存数据？

How to display individual cache data from React-Query?

reactjs

react-hooks

react-hook-form

react-query