reactjs - React Query 使用旧数据进行重新获取

Question

我在我的应用程序中使用 ReactQuery。我用状态创建了一个自定义 Hook 。我导出了在我的应用程序中更改此状态的函数。我希望在更改状态后我会重新获取一个新状态。但它不会发生。我在更改状态时添加 UseEffect 并在我的状态更改后执行 refetch()，但它会在我更新状态之前获取以前的数据和主体。

所以在 UseEffect 里面，我看到 body 发生了变化(使用新数据)-> 调用 refetch -> useQuery call ()=>fetchCommissionsData(body)，但是使用旧的 bo​​dy(不是新数据)

我正在使用:“ react ”:“^18.1.0”，“ react 查询”:“^3.39.1”

import React, { useState, useEffect } from 'react'
import { getCommissionsData, getSummary } from "../utils/apis";
import { queryKeys } from "../utils/constants";
import { useMutation, useQueryClient, useQuery } from "react-query";

//REST API
const fetchCommissionsData = async (request) => {
    const response = await getCommissionsData(request)
    return response
}

export function useCommissionsData() {
const [body, setBody] = useState(null)
const queryClient = useQueryClient()
const searchValues = queryClient.getQueryData(queryKeys.searchValues)
    
//get data from client,add some extra parameters  and update state with request body
const getCommissionsData = (data) => {
    const body = {
        ...data,
        movementType: searchValues.movementType,
        viewType: searchValues.viewType,
        summaryType: searchValues.summaryType
    }
    setBody(body)
}

//Effect: refetch query to get new commissions data on every change with request body
useEffect(() => {
    refetch()
}, [body])

//default data is empty array
const fallback = [];
const { data = fallback, refetch } = useQuery([queryKeys.commissionsData], () => fetchCommissionsData(body), {
    refetchOnWindowFocus: false,
    enabled: false // turned off by default, manual refetch is needed
});

return { data, getCommissionsData }

Answer 1

这里的误解是您在以命令式的方式思考:“如果有什么变化，我必须调用 refetch，所以我需要一个 effect。”

然而，react-query 是声明式的，因此您不需要任何这些。 refetch 用于使用相同的参数重新获取。这就是为什么它也不接受任何变量作为输入。

从您的代码来看，您希望在 body 设置后获取。最好通过以下方式完成:

• 将 body 添加到 queryKey
• 仅当 body 为 null 时禁用查询:

const [body, setBody] = useState(null)
const { data = fallback } = useQuery(
  [queryKeys.commissionsData, body],
  () => fetchCommissionsData(body),
  {
    enabled: body === null
  }
);

然后，您需要做的就是使用新值调用 setBody，react-query 将自动触发使用新的 body 值重新获取。此外，它会缓存每个主体，因此如果您从一个过滤器返回到另一个过滤器，您仍然会有缓存数据。