reactjs React-质询:使用userQueries()时QueryOptions不起作用

kuarbcqp  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(170)

在使用useQueries()同时获取多个查询时传递一些“查询选项”时,这些“查询选项”不会应用于任何查询执行(例如:refetchOnWindowFocustrue,我希望它是false)。
示例

const slidesID = ['11111', '22222', '33333'];

const COMMON_QUERY_OPTIONS = {
        retry: false,
        refetchOnWindowFocus: false,
        refetchOnMount: false,
    } as const;

    const slideQueries = useQueries(
        slidesID.map((slideID) => {
            return {
                queryKey: ['slides', 'slide', slideID],
                queryFn: () => getSlide(slideID),
                COMMON_QUERY_OPTIONS,
            };
        }),
    );
z0qdvdin

z0qdvdin1#

问题是您传递“查询选项”的方式是错误的。
执行useQuery有两种相似但不同的方法:
a)普通方式(只有第三个参数是{object})

const result = useQuery(queryKey,queryFn, {
        retry: false,
        refetchOnWindowFocus: false,
        refetchOnMount: false,
    } )

B)对象语法方式(所有参数在全局对象中处于同一级别)

const result = useQuery({queryKey, queryFn, retry: false,
        refetchOnWindowFocus: false,
        refetchOnMount: false,
    })

在您的示例中,您使用了“对象语法方式”,但将“查询选项”作为“公共方式”传递。要解决此问题,只需应用... spread以正确传递选项。
固定示例

const slidesID = ['11111', '22222', '33333'];

const COMMON_QUERY_OPTIONS = {
        retry: false,
        refetchOnWindowFocus: false,
        refetchOnMount: false,
    } as const;

    const slideQueries = useQueries(
        slidesID.map((slideID) => {
            return {
                queryKey: ['slides', 'slide', slideID],
                queryFn: () => getSlide(slideID),
                ...COMMON_QUERY_OPTIONS, //notice the ... here
            };
        }),
    );

相关问题