如何使用 React-Query 等待某些事情？

Question

我是新来的反应查询并且到目前为止很喜欢它。我知道它主要是一个 UI 库。所以它非常适合处理/显示错误、加载状态。但我经常发现自己想要以异步方式等待某些特定操作。因此，我希望能够在触发操作（例如重定向）之前等待承诺返回。

这是一个例子：

const NewPostForm = props => {
  const history = useHistory();
  const mutatePostInfo = useUpdatePost(); // useMutate hook
  const [value, setValue] = useState("")
  
  const handleSubmit = () => {
    mutatePostInfo.mutate(value);
    // I WANT TO: wait for the action to complete before redirecting
    history.push("/new-route/")
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </form>
  )
}

Answer 1

mutate返回的函数将选项useMutation作为第二个参数，onSuccess当突变成功时，您可以使用该选项执行某些操作：

mutatePostInfo.mutate(
    value,
    {
        onSuccess: () => history.push("/new-route/")
    }
);

还有onError（用于错误）和onSettled回调（如果您想在成功或错误时重定向）。