如何使用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

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

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

还有onError (表示错误)和onSettled回调(如果您想在成功或错误的情况下重定向)。

Answer 2

为了等待没有onSuccess函数的其他值或函数完成，您可以使用依赖查询暂停查询，直到该值存在/符合您的条件。

https://egghead.io/lessons/react-use-dependent-queries-to-delay-react-query-s-usequery-from-firing-on-render

const [payload, setPayload] = useState();
const someFunc = () => setPayload("data");

const { data } = useQuery(payload && ["queryKey", { payload }],
    queryName
  );

someFunc();

在发送它的queryName请求之前，您也可以传入一个带有返回值的函数，该函数将等待该返回值。