如何使用React Query的使用QueryQuery用onsubmit函数以Formik formik formik表单获取数据

Question

我真的是反应问题的新手，所以我面对这个问题。这是场景。 我的组件中有一个formik表单。它的表具有带有数据列表的表格，该表可从初始获取请求获得，并以Formik表单包裹的搜索表格，该表格允许用户过滤数据。填写搜索表格后，用户必须单击过滤器，以执行另一个获取请求，然后替换表中的数据。

我尝试使用的一种方法是通过从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,         
    }
  )
}

请注意，对于上面的挂钩文件，我在其中有有效负载。此有效负载将导出到表单组件中，我不希望将其绑定到usequery作为变量，因为我只希望在用户单击搜索按钮上时将使用Querquery拆除。另外，我不想在Usestate中保存此值，并将其用作USEQUERY中的变量，因为我已经将其保存在Formik的初始价值中。

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

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>
    )
}

是否有解决方案，还是我应该考虑使用USEMUNT？不确定这是否是做事的正确方法，似乎我必须复制Usetransactionslistdata功能相似的版本，而是使用USEMONT。

Answer 1

您必须制作有效负载查询密钥的一部分，因为有效载荷是您查询的“依赖关系”。当键更改时，React-Query将始终自动恢复：

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

<

• a href =“ https://reaect-query.tanstack.com/guides/query-keys-keys#if-your-query-query-query-function-deperts-on -a-variable-include-in-in-in-your-Query-key“ rel =”文档中的nofollow noreferrer“>
• 在我的博客

中当键更改为新密钥时，来自上一个键的数据 - 它没有静态查询键，例如'Transactions'。

有效载荷的好“存储”将是url。当用户单击按钮时，您可以写入URL，然后通过useparams订阅查询（如果使用React Router）。结果，您将免费获得可共享的URL。