Блог

Главная - Вопросы по программированию - Как чего-то ждать с помощью React-Query?

Как чего-то ждать с помощью React-Query?

#react-query

#react-query

Вопрос:

Я новичок в react query и до сих пор люблю его. Я понимаю, что это в основном библиотека пользовательского интерфейса. Так что это отлично подходит для обработки / отображения ошибок, состояний загрузки. Но часто я ловлю себя на том, что хочу дождаться какого-то конкретного действия асинхронным способом. Итак, я хотел бы иметь возможность дождаться возврата обещания, прежде чем запускать действие, например, перенаправление.

Вот пример:

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

Ответ №1:

mutate Функция, возвращаемая с помощью useMutation , принимает опции в качестве второго аргумента, и вы можете использовать onSuccess опцию для выполнения чего-либо, когда мутация завершается успешно:

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

Существует также onError (для ошибок) и onSettled обратный вызов (если вы хотите перенаправить в случае успеха или ошибки).

Комментарии:

1. Я пришел сюда в поисках чего-то другого, но я не применяю это и к своему коду, лол

2. Дополнение: если вы хотите await для разрешения mutate , вы можете обернуть весь вызов в обещание и разрешить его в onSuccess (или onSuccess / onSettle ) следующим образом: await new Promise((resolve) => { mutatePostInfo.mutate(value, { onSuccess: () => resolve() }) });

Ответ №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 amp;amp; ["queryKey", { payload }],
    queryName
  );

someFunc();

будет ждать, пока полезная нагрузка не получит значение, в данном случае «данные», прежде чем отправлять запрос queryName, вы также можете передать функцию с возвращаемым значением, которая будет ждать этого возвращаемого значения.

Ответ №3:

Вы можете использовать зависимые запросы. Например:

 // Get the user
const { data: user } = useQuery(['user', email], getUserByEmail)
     
const userId = user?.id
     
const { isIdle, data: projects } = useQuery(
    ['projects', userId],
    getProjectsByUser,
    {
        // The query will not execute until the userId exists
        enabled: !!userId,
    }
  )
     
// isIdle will be `true` until `enabled` is true and the query begins to fetch.
// It will then go to the `isLoading` stage and hopefully the `isSuccess` stage :)