I. Введение в TanStack Query

TanStack Query (или как его раньше называли React Query) часто называют отсутствующей библиотекой выборки данных для React из-за ее способности упростить выборку, кэширование, синхронизацию и обновление состояния сервера в приложениях React. На базовом уровне React Query помогает управлять состоянием приложений React на стороне сервера — фактором, с которым обычно сложно справиться из коробки.

В то время как обычные библиотеки управления состоянием, как правило, хорошо оснащены для обработки состояния клиента, они дают сбои, когда дело доходит до асинхронного состояния или состояния сервера. В основном это связано с принципиально иной природой состояния сервера. Чтобы проиллюстрировать, состояние сервера:

  1. Существует в удаленном, неконтролируемом месте
  2. Нужны асинхронные API для получения или обновления
  3. Могут быть изменены другими без нашего ведома, что может привести к устареванию
  4. Может потенциально устареть в ваших приложениях, если не обращаться с должной осмотрительностью.

Работа с состоянием сервера требует преодоления нескольких проблем, таких как эффективное кэширование, предотвращение дублирования запросов одних и тех же данных, обновление «устаревших» данных в фоновом режиме, определение того, когда данные «устарели», оперативное отражение обновлений данных, оптимизация производительности. такие как разбиение на страницы и отложенная загрузка данных, управление памятью и сборкой мусора состояния сервера, а также запоминание результатов запроса с разделением структур.

II. Установка запроса TanStack

Интегрировать React Query в проект React несложно, а доступные для установки параметры предоставляют разработчикам гибкость для включения его таким образом, который наилучшим образом соответствует их текущему рабочему процессу и структуре проекта.

1. Установка NPM или пряжи

React Query можно установить с помощью NPM или Yarn, двух наиболее часто используемых менеджеров пакетов JavaScript. NPM, включенный в Node.js, и Yarn, представленный Facebook, обеспечивают простое управление модулями в проектах JavaScript. Чтобы установить React Query с помощью этих инструментов, вы можете запустить соответствующие команды в своем…