如何显示来自 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 呈现的原因，如果enabled: false 不起作用，我该如何disable initial fetch？如果阻止呈现每个单独的缓存数据是一个不同的问题，请提出解决方案。 https://codesandbox.io/s/rick-and-morty-render-cache-data-8dv6y

Answer 1

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

我建议您在映射之前先尝试过滤您的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}
    </>
  ));