在另一个组件中访问缓存时如何从 useQuery 中提取单个项目？

Question

React-query 的新手，除了 rickandmorty api，我找不到任何使用示例。我遇到的问题是 rickandmorty 在端点地址中包含 episode/character id，因此您可以传递该 id，从查询缓存中获取数据并将其显示在另一个页面中。我的 api endpoint doesn't have an id contained. It looks like this: https://api.jsonbin.io/b/6231abada703bb67492d2b8f.

    const { data, isLoading, isError } = useQuery(
        'directories',
        fetchDirectories,
    );

抓取后，数据显示在列表视图中。单击每个列表项应将您带到每个项目的详细信息页面。我不明白在详细信息页面中调用 useQuery 时如何引用特定项目。如何在该缓存中查找特定项目？

单击会将您导航到 url，该 url 的商家 ID 是 url 的一部分。如何在详情页访问该商家？

onClick={() => navigate(`business/${object.id}`)}

Answer 1

这里的主要问题是您的后端缺少详细视图。所以你必须在你的详细信息页面上使用列表查询，我建议在现实世界中不要这样做。在您的详细视图组件上，您可以使用相同的 id 使用挂钩，它应该从缓存中获取它（它会触发重新获取，除非您将 staleTime 配置为不同于 0 的值）

假设你这样做了：

// ListComponent.jsx
    const { data, isLoading, isError } = useQuery(
        'directories',
        fetchDirectories,
        {staleTime: 5000}
    );

你应该可以做到

    // DetailedView.jsx
    const { id } = useParams();
    const { data, isLoading, isError } = useQuery(
        'directories',
        fetchDirectories,
        staleTime: 5000
    );

   const myItem = data.find(item => item.id === id);

或者你可以像你提到的那样直接从缓存中获取它，但是如果缓存是空的并且react-query不知道获取函数你将不会从缓存中得到任何东西

 const data = queryClient.getQueryData('directories')

在理想情况下，您想要做的是获取列表视图，并可能使用 setQueryData 将数据获取到 useQuery('directory', 1) 等单个查询，以便它们在点击 详细端点据我所知，您的后端不存在。您可以通过使用 setQueryData 和 getQueryData 来完成您想要的工作，因为您缺乏详细的端点，但通常情况下您会希望使用 useQuery 而不是处理像这样缓存。

在另一个组件中访问缓存时如何从 useQuery 中提取单个项目？

How to extract single items from useQuery when accessing cache in another component?

reactjs

react-query