React Query中useQuery设enabled为false时如何传参至函数？

我需要创建一个复制模板的查询，该查询依赖一个ID，但初始状态下没有这个ID。想知道怎么在点击事件调用查询函数时，把ID作为参数传递进去。

现有代码 #

复制模板的API函数

duplicate: ({ queryKey: [_key, id] }) => axios.get(`${base_url}templates/${id}/duplicate?auth_token=${auth_token}`),

React Query的查询代码

const { data: duplicateTemplate, refetch: duplicateTemplateFunc } = useQuery(
  [`template], // 存在语法错误：缺少闭合引号
  api.duplicate,
  {
    enabled: false,
    onSuccess: () => {
      message.success('Template successfully duplicated.')
    },
  }
)

Ant Design表格的点击渲染方法

render: (_value, record) => (
  <div onClick={() => duplicateTemplateFunc(record.id)> {/* 存在语法错误：缺少闭合括号 */}
      Duplicate
  </div>
),

解决方法 #

要实现点击时传递ID，需要调整useQuery的queryKey结构，并正确调用refetch方法：

1. 修正useQuery的queryKey
   把初始queryKey设置为包含动态ID的数组，初始值设为undefined，同时修复语法错误：

   const { data: duplicateTemplate, refetch: duplicateTemplateFunc } = useQuery(
     ['template', undefined], // 初始ID为undefined
     api.duplicate,
     {
       enabled: false,
       onSuccess: () => {
         message.success('模板复制成功。')
       },
     }
   )
   

2. 正确调用refetch传递ID
   在点击事件中，通过refetch的选项参数指定新的queryKey，让API函数能获取到ID：

   render: (_value, record) => (
     <div onClick={() => duplicateTemplateFunc({ queryKey: ['template', record.id] })}>
       复制
     </div>
   ),
   

这样点击"复制"按钮时，refetch会使用新的queryKey（包含当前行的record.id）调用API函数，完成模板复制操作。

内容的提问来源于stack exchange，提问作者Talha Jutt