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

Question

我是 React 查询的新手，到目前为止我很喜欢它。我知道它主要是一个 UI 库。所以它非常适合 handling/displaying 错误，加载状态。但我经常发现自己想以异步方式等待一些特定的动作。所以，我希望能够在触发动作 e 之前等待对 return 的承诺。 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>
  )
}

Answer 1

useMutation返回的mutate函数将选项作为第二个参数，你可以使用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();

将等到 payload 有一个值，在本例中为“数据”，然后再发送它的 queryName 请求，您还可以传入一个具有 return 值的函数，该函数将等待 returned值。

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

How to wait for something with React-Query?

react-query