访问已在其他组件中使用反应查询获取的数据

Question

我是 React Query 的新手，我有一个问题，我一直在查看文档，但我找不到如何访问已经从另一个组件使用 useQuery() 获取的数据.

我正在从 HomeComponent 获取 const query = useQuery('todos', fetchFunction)，我想访问已经在 TodosComponent 中获取的数据。是否可以使用 const query = useQuery('todos', fetchFunction) 再次获取数据，或者是否有像 redux 之类的东西，数据在 Store 之类的东西中，所以我可以从任何地方访问它？

;)

Answer 1

绝对最好再次调用 useQuery，因为它是唯一创建订阅的东西，因此如果有新数据进入，您的组件将正确重新呈现。您可以使用 queryClient.getQueryData('todos')，但它不会创建订阅。

请注意，useQuery 并不总是会触发数据提取。您可以自定义 staleTime 来告诉 react-query 资源被认为是新鲜的时间，只要它是新鲜的，数据将仅来自内部缓存。如果您设置 staleTime: Infinity，将只有一次提取，所有其他调用将只从缓存中读取（手动失效和垃圾收集除外）。

最好提取对自定义挂钩的 useQuery 调用：

const useTodos = () => useQuery('todos', fetchFunction)

HomeComponent:

const { data } = useTodos()

TodosComponent:

const { data } = useTodos()

Answer 2

您可以使用 useQueryClient

创建自定义挂钩

import { useQueryClient } from "react-query";

export const useGetFetchQuery = (name) => {
    const queryClient = useQueryClient();

    return queryClient.getQueryData(name);
};

在组件中这样写

const data = useGetFetchQuery("todos");

访问已在其他组件中使用反应查询获取的数据

Access data already fetched with react query in other component

reactjs

axios

react-query