react-hook-form - 如何使用 `react-hook-form` 突变正确提交 `react-query`？

Question

我将 react-query 与 react-hook-form 结合使用。为了在表单上激活 isSubmitting 属性并在提交时显示加载状态，mutate 函数需要返回一个 Promise 而不是直接使用 mutate。

目前我的解决方法如下:

const { mutate } = useMutation(...);

const update = (data) => {
    return new Promise((resolve, reject) => {
      mutate(data, {
        onSuccess: resolve,
        onError: reject,
      });
    });
};

然后将 update 传递给来自表单的 methods.handleSubmit。

任何人都可以分享一些关于这个主题的经验吗？谢谢!

Answer 1

In order to activate the isSubmitting prop on form and show loading state while submitting, the mutate function needs to return a Promise instead of using mutate directly.

这似乎是 react-hooks-form 的要求？

您可以使用 mutateAsync，它将返回一个 Promise，并将其传递给 react-hook-form

除此之外，useMutation 还为您的突变返回一个 isLoading 状态，因此您可以让 react-query 处理它(我不知道 react-hooks-形式，所以不确定这是否可能)。