TanStack Query — польза инструмента на практике

Более 2 лет назад мы стартанули с нуля разработку нашего платформенного проекта, много времени уделив анализу и подбору подходящих и актуальных библиотек и инструментов.

Для взаимодействия с серверными данными был выбран TanStack Query (ранее известный как react-query). Вот несколько практических примеров в реальных задачах 👇

1️⃣ Гибкая система инвалидации кэша

Есть у нас UI который рисует граф (дерево) сущностей. При обновлении одной точки или связей надо перерисовать точку и дочерние ветки. При правильном указании queryKey и запуске в нужный момент invalidateQueries ваш UI автоматически перерисуется в нужных местах.

// получаем данные
useQuery({
    queryKey: [‘schema’, itemKey]
})

// инвалидируем после обновления
onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: [‘schema’, itemKey] });
},

💡 Еще лучше — когда ключи генерируются в одном месте (утилитой/фабрикой), чтобы со временем ключи не разъехались.

2️⃣ Не простой refetchInterval

refetchInterval может принимать функцию. Вот когда она может пригодиться: отображаем карточку сущности, которая имеет статусную модель. В определенном статусе надо совершать пуллинг (получать актуальный статус с сервера). Делаем это так:

useQuery({
    queryFn: // получение данных
    refetchInterval: (query) => {
        if (query.state.data?.statusCode === STATUS_CODE.WAITING) {
            return REFETCH_WAITING_INTERVAL;
        }

        return false;
    },
})

Таким образом пуллинг будет выполняться только когда сущность в нужном вам статусе.

3️⃣ Всевозможные статусные состояния и refetch

useQuery и useMutation возвращает различные флаги: isLoading, isFetching, isError и т.д. Все это позволяет с точностью отображать загрузки/ошибки в нужном вам дизайне. В нашем случае таблица сперва загружается со скелетоном, а следующих апдейтах скелетон отображается только в строках таблицы. При ошибках загрузки остается только навешать refetch в нужную кнопку на UI.

👨‍💻 После реализации множества наших микрофронтов я бы сказал, что являюсь фанатом этой библиотеки :)

А ведь у TanStack есть еще router, store и прочие инструменты. А вы используете что-нибудь от TanStack?