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

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

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

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

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

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

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

‘’’     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?

#tanstack #nodejs #javascript #typescript #js #ts #frontend #webdev