如何使用自定义挂钩在 React Query 中传递参数？

Question

我正在使用带有自定义挂钩的 React 查询。我不确定实施是否正确。我想要一些建议。

这是我的自定义挂钩。

export const useMutationQuery = (
    { url, params = {} },
    options,
) => {
    return useMutation(() => createMutation({ url, params }), options);
};

我正在使用这样的自定义挂钩

  const { mutate } = useMutationQuery({
    url: 'url',
    params: data,
  });

一切正常，但是当我调用 mutate 函数时，我无法传递任何参数。例如：mutate(data) 而不是在 useMutationQuery 中提供参数。

问题是很多时候我根据数据变化触发 mutate 函数，我觉得这很糟糕。

有人可以建议我如何通过我的自定义挂钩使用像这样的 mutate(data) 的 mutate 函数吗？

Answer 1

mutate函数本身也可以带参数。我只会将静态内容传递给 useMutation，以及您事先不知道的动态内容，例如用户通过 mutate:

输入的数据

export const useMutationQuery = (
    { url },
    options,
) => {
    return useMutation((params) => createMutation({ url, params }), options);
};

在组件中：

function Component() {
  const { mutate } = useMutationQuery({
    url: 'url',
  });

  return (
    <MyForm onSubmit={data => mutate(data)} />
  )
}

如何使用自定义挂钩在 React Query 中传递参数？

How to pass params in React Query with custom hook?

reactjs

react-hooks

react-query