如何使用 React Query 的 useQuery 从 Formik 表单的 onSubmit 函数中获取带有查询参数的数据

Question

我是 React-Query 的新手，所以我遇到了这个问题。这是场景。我有一个带有 Formik 表单的组件。它有一个 table，其中包含从初始 GET 请求获得的数据列表，以及一个包含在允许用户过滤数据的 formik 表单中的搜索表单。填写搜索表单后，用户必须单击过滤器以执行另一个 GET 请求，该请求随后将替换 table.

中的数据

我尝试过的一种方法是通过从 formik 表单传入参数来使用 refetch 函数，但它不起作用：

这是我的钩子：

useTransactions.tsx

import { useQuery, useQueryClient } from 'react-query';
import { API } from "api";


interface ITransactionsData { 
  mobile?: string,  
}

export const payload: ITransactionsData = {
  mobile: '',  
}

const getTransactions = (payload: ITransactionsData) => {
  return API.get()('transactions', payload);
}

export const useTransactionListData = (payload: ITransactionListData) => {
  return useQuery(
    'transactions', 
    () => getTransactions(payload),
    {      
      keepPreviousData: true,         
    }
  )
}

请注意，对于上面的挂钩文件，我有一个带有移动设备的负载 it.This 负载被导出到表单组件，我不希望将其作为变量绑定到 useQuery，因为我只想当用户单击搜索按钮时要重新获取的 useQuery。另外，我不想用 useState 保存这个值并将其用作 useQuery 中的变量，因为我已经将它保存在 Formik 的 initialValues 中。

这是我的组件：（有效负载是从 hooks 文件中导出的）

const Form = () => {
    const { isLoading, isFetching, data: queryResult, isError, error, refetch} = useTransactionListData(payload);

    const handleSearch = (values: any, { setSubmitting }: any) => { 
    //refetch();
    refetch(values) <- I'm trying to pass in the values from formik to do a refetch with the new query params but it doesn't work...

  }

   return (
      <Formik
        initialValues={{        
          mobile: payload.mobile,              
        }}      
        onSubmit={handleSearch}
        ... (Formik Antd form here which holds a mobile number field). 
       setFieldValue will change the values.mobile
      </Formik>
    )
}

是否有解决方案，或者我应该考虑改用 useMutation？不确定这是否是正确的做事方式，似乎我必须将 useTransactionsListData 函数复制到一个类似的版本，但改用 useMutation。

Answer 1

我会尝试使用相应的查询键使查询无效，如下所示：https://react-query.tanstack.com/guides/query-invalidation

这将切换刷新。

Answer 2

您必须使 payload 成为查询键的一部分，因为 payload 是您的 queryFn 的“依赖项”。 react-query 键改变时总是会自动重新获取：

export const useTransactionListData = (payload: ITransactionListData) => {
  return useQuery(
    ['transactions', payload], 
    () => getTransactions(payload),
    {      
      keepPreviousData: true,         
    }
  )
}

记录在案：

keepPreviousData: true 将确保当密钥更改为新密钥时您将看到来自前一个密钥的数据 - 它对 'transactions'.[=20 等静态查询密钥不执行任何操作=]

payload 的一个好的“存储”是 url。您可以在用户单击按钮时写入 url，然后通过 useParams 订阅您的查询（如果您使用的是 React 路由器）。因此，您将免费获得可共享的 url。

如何使用 React Query 的 useQuery 从 Formik 表单的 onSubmit 函数中获取带有查询参数的数据

How to use React Query's useQuery to fetch data with query params from an onSubmit function in a Formik form

formik

react-query