Я хотел бы поделиться своим опытом использования React Query для Fetch, кэширования и обновления данных в вашем приложении React. В одном из моих проектов требовалось, как избежать ненужных вызовов API, если данные устарели. Это исследование привело к React Query.

Мои наблюдения:

  1. До свидания с setState: с помощью React Query мы можем избавиться от нескольких setState. Например, если мы получаем данные из API, нам нужен блок try catch, setState для сохранения данных, загрузчик, обработчик ошибок и хуки useEffect.
//Component did mount
useEffect(()=>{
try{
  //Handle the loader
  //Handle the async API Call
}catch(error){
  //Handle the error scenario
}
},[]);

приведенный выше код можно переписать в React Query как:

const { isLoading, isError, data } = useQuery('uniqueKey', () =>fetch('API URL').then(res =>res.json()));

React Query предоставит константы, такие как isLoading, isError, данные, которые можно использовать в пользовательском интерфейсе. Ознакомьтесь с другими константами для useQuery здесь: https://react-query.tanstack.com/reference/useQuery

2. Он также предоставляет множество других функций, таких как:

★ staleTime: время после обновления API. По умолчанию ноль и. Если мы упомянем еще 500 раз, это означает, что данные будут устаревшими в течение 500 мс.

★ refetchOnWindowFocus: повторная загрузка API, когда окно снова находится в фокусе.

★ onSuccess, onError, onSettled: для обработки успешных, ошибочных и установленных сценариев.

Ознакомьтесь с другими важными значениями по умолчанию здесь: https://react-query.tanstack.com/guides/important-defaults

3. Изменение данных. В отличие от запросов, изменения обычно используются для создания/обновления/удаления данных. Для этого React Query экспортирует хук useMutation.

Вышеуказанные пункты — это всего лишь беглый взгляд, и его стоит проверить здесь: https://react-query.tanstack.com/

Приятного чтения!