Фронтенд

TanStack Query

Бібліотека для роботи з серверними даними: запити, кеш, оновлення у фоні та мутації.

Офіційний сайтРепозиторій

Що це

TanStack Query (раніше React Query) створив Таннер Лінслі у 2019 році. Вона розглядає дані з сервера як окремий вид стану: їх треба завантажити, закешувати, оновлювати й синхронізувати, а не зберігати вручну в глобальному сторі.

Ти описуєш query з ключем і функцією запиту, а бібліотека сама кешує результат, дедуплікує однакові запити, повторює невдалі й оновлює застарілі дані у фоні. Для змін є mutations з інвалідацією кешу й оптимістичними оновленнями.

Адаптери є для React, Vue, Svelte, Solid та Angular. Бібліотека скорочує код і прибирає багато useEffect для завантаження даних.

Коли брати

  • Застосунок багато звертається до REST чи GraphQL API.
  • Потрібні кеш, повторні спроби, пагінація й безкінечний скрол без ручної реалізації.
  • Хочеш прибрати серверні дані з Redux чи Context.

Коли не варто

  • Лише локальний стан UI (відкрита модалка, значення форми).
  • Метафреймворк уже дає власне завантаження даних, і цього досить, наприклад серверні компоненти Next.js для простих випадків.

Ключові поняття

Query key
Масив-ідентифікатор запиту. За ним відбувається кешування й інвалідація.
staleTime and gcTime
Скільки дані вважаються свіжими і як довго лишаються в кеші без підписників.
Mutation
Запит, що змінює дані на сервері; після нього кеш інвалідується.
Background refetch
Оновлення при поверненні на вкладку, відновленні мережі чи за інтервалом.
Optimistic updates
Миттєво показати результат дії й відкотити, якщо сервер відмовив.

Приклад

Хук useUsers з кешем на хвилину.

Питання на співбесіді

  1. 1. Навіщо потрібен queryKey?

    Це унікальний ідентифікатор даних у кеші. За ним бібліотека шукає закешований результат, дедуплікує запити й знає, що інвалідувати після мутації. Змінні запиту (id, фільтри) кладуть у ключ.

  2. 2. У чому різниця між staleTime і gcTime?

    staleTime визначає, скільки дані вважаються свіжими без повторного запиту. gcTime скільки неактивні дані зберігаються в кеші, перш ніж їх видалять.

  3. 3. Як оновити список після створення елемента?

    У onSuccess мутації викликати queryClient.invalidateQueries({ queryKey: ['items'] }), тоді список перезавантажиться. Або оптимістично змінити кеш.

  4. 4. Чим TanStack Query краще за useEffect + useState?

    Він дає кеш, дедуплікацію, повтори, стан завантаження й помилки, фонові оновлення та пагінацію без ручного коду, а також уникає гонок запитів.

Питання з банку співбесід

Схожі технології

Логотипи належать їхнім власникам і використані лише для ідентифікації. Іконки: Simple Icons (CC0), Devicon (MIT).

Розділи платформи