Я хотел бы поделиться своим опытом использования React Query для Fetch, кэширования и обновления данных в вашем приложении React. В одном из моих проектов требовалось, как избежать ненужных вызовов API, если данные устарели. Это исследование привело к React Query.
Мои наблюдения:
- До свидания с 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/
Приятного чтения!