ReactQuery 使用旧数据重新获取

Question

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

所以在里面UseEffect我看到主体已更改（使用新数据） - >调用重新获取 - > useQuery 调用（）=> fetchCommissionsData（主体），但使用旧主体（不是新数据）

我正在使用：“react”：“^18.1.0”，“react-query”：“^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如果有什么变化，我必须打电话，所以我需要为此产生效果。”

然而，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值重新获取。此外，它还会缓存每个主体，因此，如果您从一个过滤器返回到另一个过滤器，您仍然会拥有缓存的数据。