Установка и настройка React Query в проекте

Установка React Query

Первое, что нам нужно сделать — установить библиотеки React Query. С одной стороны, React Query имеет минимальные зависимости, а с другой — она предоставляет огромный функционал для работы с серверными данными.

Для начала убедитесь, что вы находитесь в корневой директории вашего React TypeScript проекта. Затем выполните следующую команду:

npm install @tanstack/react-query

Если вы используете Yarn:

yarn add @tanstack/react-query

React Query установлен! Поздравляю, это первый шаг к более счастливому взаимодействию с вашими API.

Настройка QueryClient

Теперь мы настроим QueryClient. Это центральная часть React Query, управляющая кэшированием, синхронизацией и выполнением запросов. Если сравнить с реальным миром, QueryClient — это ваш менеджер задач, который знает, какие запросы выполнились, какие нужно выполнить, и что уже можно вытащить из кэша.

Создайте объект QueryClient в вашем приложении. Вот пример:

// src/queryClient.ts
import { QueryClient } from "@tanstack/react-query";

// Инициализация QueryClient
const queryClient = new QueryClient();

export default queryClient;

Здесь вы видите самую базовую версию QueryClient. Позже мы добавим конфигурации, чтобы настроить поведение кэша. Вы также можете передать параметры (такие как defaultOptions), чтобы кастомизировать поведение по умолчанию.

Подключение QueryClientProvider

React Query использует контекст для предоставления доступа к функциональности по всему приложению. Вам нужно обернуть ваше приложение в компонент QueryClientProvider, который предоставляет ваш QueryClient всем дочерним компонентам.

Измените файл src/index.tsx (или src/main.tsx, если вы используете Vite):

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { QueryClientProvider } from "@tanstack/react-query"; // Импорт Provider
import queryClient from "./queryClient"; // Импорт настроенного QueryClient

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

Вот и всё — приложение готово пользоваться React Query. Каждый компонент, использующий хуки React Query, теперь знает, как взаимодействовать с QueryClient.

Добавление Devtools для React Query (опционально)

Для удобной отладки запросов мы можем подключить React Query Devtools. Это инструмент, который показывает, какие запросы были выполнены, их состояние, кэшированные данные и ошибки.

Установите Devtools командой:

npm install @tanstack/react-query-devtools

И добавьте ReactQueryDevtools в ваше приложение. Вот обновлённый пример:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { QueryClientProvider } from "@tanstack/react-query";
import queryClient from "./queryClient";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; // Импорт Devtools

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} /> {/* Добавление Devtools */}
    </QueryClientProvider>
  </React.StrictMode>
);

Не забудьте, что Devtools не обязателен для продакшна, и его стоит использовать только в процессе разработки.

Конфигурация QueryClient: кэш и поведение данных

Мы можем настроить QueryClient, чтобы изменить поведение кэширования, стратегии обновлений и многое другое. Вот пример конфигурации:

import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // Данные "свежие" в течение 5 минут
      cacheTime: 1000 * 60 * 10, // Данные остаются в кэше 10 минут после неиспользования
      retry: 2, // Повторить запрос дважды в случае ошибки
      refetchOnWindowFocus: false, // Не обновлять данные при возврате в окно
    },
  },
});

export default queryClient;

Эти параметры позволяют гибко управлять поведением запросов. Например:

• staleTime: указывает, как долго данные считаются "свежими". Если вы делаете повторный запрос в этот период, то React Query будет использовать кэш вместо обращения к серверу.
• cacheTime: указывает, как долго данные остаются в памяти после того, как они "устарели".
• retry: количество попыток повторного запроса в случае ошибки.
• refetchOnWindowFocus: поведение обновления данных при фокусировке на окне браузера.

Проверка установки на практике

Давайте убедимся, что React Query настроен правильно, создав простой запрос к какому-нибудь публичному API. Откройте файл App.tsx и добавьте следующий код:

import React from "react";
import { useQuery } from "@tanstack/react-query";

const fetchPlanets = async () => {
  const response = await fetch("https://swapi.dev/api/planets/");
  if (!response.ok) {
    throw new Error("Ошибка загрузки данных");
  }
  return response.json();
};

const App: React.FC = () => {
  const { data, error, isLoading } = useQuery({
    queryKey: ['planets'],
    queryFn: fetchPlanets,
  });


  if (isLoading) return <p>Загрузка...</p>;
  if (error instanceof Error) return <p>Ошибка: {error.message}</p>;

  return (
    <div>
      <h1>Список планет</h1>
      <ul>
        {data.results.map((planet: any) => (
          <li key={planet.name}>{planet.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Вот что мы сделали:

1. Создали асинхронную функцию fetchPlanets для получения списка планет с публичного API.
2. Использовали хук useQuery, чтобы выполнить запрос.
3. Обработали различные состояния: isLoading (загрузка), error (ошибка) и data (успешный ответ).

Открывайте приложение! Если вы всё сделали правильно, перед вами появится список планет из вселенной Star Wars.

1

Задача

Модуль 3: React, 8 уровень, 1 лекция

Недоступна

Установка React Query

Установка React Query

Открыть

1

Задача

Модуль 3: React, 8 уровень, 1 лекция

Недоступна

Создание QueryClient

Создание QueryClient

Открыть