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

wz8daaqr  于 2023-10-18  发布在  iOS
关注(0)|答案(3)|浏览(90)

我是React Query的新手,我有一个问题,我一直在看文档,但我找不到如何访问已经使用useQuery()从另一个组件获取的数据。
我正在从HomeComponent获取const query = useQuery('todos', fetchFunction),我想访问已经在TodosComponent中获取的数据。是否可以再次使用const query = useQuery('todos', fetchFunction)获取数据,或者是否有类似redux的东西,数据在类似Store的东西中,以便我可以从任何地方访问它?
;)

gtlvzcf8

gtlvzcf81#

最好再次调用useQuery,因为它是创建订阅的唯一方法,所以如果有新数据进来,组件将正确地重新呈现。您可以使用queryClient.getQueryData('todos')强制执行此操作,但它不会创建订阅。
请注意,useQuery并不总是触发数据的获取。你可以自定义staleTime来告诉react-query一个资源多长时间被认为是新鲜的,只要它是新鲜的,数据将只来自内部缓存。如果您设置了staleTime: Infinity,那么将只有一个fetch,并且所有其他调用将只从该高速缓存读取(除了手动无效和垃圾收集)。
最好将useQuery调用提取到自定义钩子中:

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

const { data } = useTodos()
TodosComponent:

const { data } = useTodos()
slmsl1lt

slmsl1lt2#

您可以使用useQueryClient创建自定义钩子

import { useQueryClient } from "react-query";

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

    return queryClient.getQueryData(name);
};

在组件中就像这样写

const data = useGetFetchQuery("todos");
4szc88ey

4szc88ey3#

您可以使用选项{ refetchOnMount:false }在许多其他组件中使用它,它将只呈现一次并只进行一次API调用。

相关问题