如何在React Query的refetch()中传递日期变量？

1. 先修复原useQuery的关键问题 #

原代码中查询函数没有返回Promise，会导致useQuery无法正常获取数据，这是必须先修正的bug：

const { isLoading: isBskLoading, refetch: refetchBskData } = useQuery(
    "bskFixturesData",
    // 补充return，确保返回请求Promise
    () => instance.get(`/basketball/matches/${date}`).then((res) => res.data),
    {
        onSuccess: (jsonData) => {
            setBskData(jsonData);
            setHasBskData(true);
        },
        refetchOnWindowFocus: false,
        enabled: false,
    }
);

2. 推荐方案：通过查询键传递日期（兼顾缓存正确性） #

将日期加入查询键，让react-query为不同日期维护独立缓存，同时让查询函数能读取refetch时传入的新日期：

修改useQuery代码

const { isLoading: isBskLoading, refetch: refetchBskData } = useQuery(
    // 查询键改为数组，包含查询名称和日期，确保不同日期的缓存不冲突
    ["bskFixturesData", date],
    // 从queryKey中提取目标日期
    async ({ queryKey }) => {
        const [_, targetDate] = queryKey;
        const res = await instance.get(`/basketball/matches/${targetDate}`);
        return res.data;
    },
    {
        onSuccess: (jsonData) => {
            setBskData(jsonData);
            setHasBskData(true);
        },
        refetchOnWindowFocus: false,
        enabled: false,
    }
);

调用refetch时传入新日期

useEffect(() => {
    const date = new Date(location.state.date);
    const formattedDate = date.toLocaleDateString("en-GB");
    // 传递新的查询键参数，覆盖原日期
    refetchBskData({ queryKey: ["bskFixturesData", formattedDate] });
}, [refetchBskData, location]);

3. 可选方案：直接传递变量给查询函数 #

如果不需要区分不同日期的缓存，也可以直接在refetch时传递变量：

修改useQuery代码

const { isLoading: isBskLoading, refetch: refetchBskData } = useQuery(
    "bskFixturesData",
    // 接收refetch传递的变量
    async (variables) => {
        // 优先使用refetch传入的日期，无则用默认值
        const targetDate = variables?.date || date;
        const res = await instance.get(`/basketball/matches/${targetDate}`);
        return res.data;
    },
    {
        onSuccess: (jsonData) => {
            setBskData(jsonData);
            setHasBskData(true);
        },
        refetchOnWindowFocus: false,
        enabled: false,
    }
);

调用refetch时传递变量

useEffect(() => {
    const date = new Date(location.state.date);
    const formattedDate = date.toLocaleDateString("en-GB");
    // 传递日期变量给refetch
    refetchBskData({ date: formattedDate });
}, [refetchBskData, location]);

内容的提问来源于stack exchange，提问作者Rayyan Alam