如何使用 React-Query 等待某些东西？答案

【问题标题】：How to wait for something with React-Query?如何使用 React-Query 等待某些东西？
【发布时间】：2020-12-31 11:51:28
【问题描述】：

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

这是一个例子：

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>
  )
}

【问题讨论】：

标签： react-query

【解决方案1】：

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

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

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

【讨论】：

我来这里是为了寻找其他东西，但我并没有将它应用到我的代码中，哈哈

【解决方案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 请求之前，您还可以传入一个具有返回值的函数，该函数将等待该返回值。

【讨论】：