How to pass parameters to function in React Query's useQuery function when enabled is set to false?

Question

I am creating a query that allows me to copy a template. The query to copy the template requires an id, but initially there isn't any. How can I pass the id as parameter to the query function when I call it in the onClick function.

Function to copy template:

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

My query:

const { data: duplicateTemplate, refetch: duplicateTemplateFunc } = useQuery(
    [`template],
      api.duplicate,
    {
      enabled: false,
      onSuccess: () => {
        message.success('Template copied successfully.')
      },
    }
  )

The

onClick method is used in the render method of the antd table, and gives me the id through record.id.

render: (_value, record) => (
    <div onClick={() => duplicateTemplateFunc(record.id)>
        copy
    </div>
 ),

Answer 1

当使用react-query库中的useQuery hook并将enabled设置为false时，您仍然可以将参数传递给正在执行的函数。您只需要将参数作为对象传递给useQuery hook的第二个参数。
const { data, isLoading, error } = useQuery(
["fetchData", { id: 123, name: "John" }],
(_key, params) => {
return fetch(`https://your-api.com/data/${params.id}?name=${params.name}`)
  .then(res => res.json());
},
{ enabled: false }
);