Tanstack Query, также известный как React Query, — это популярная библиотека для выборки данных в приложениях React. React Query упрощает процесс выборки, кэширования и обновления данных в веб-приложениях. В этой статье мы обсудим использование React Query для обработки выборки данных в приложении React.

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

Вы можете установить React Query с помощью npm или yarn. Чтобы установить его с помощью npm, выполните в терминале следующую команду:

npm я @tanstack/реагировать-запрос

Чтобы установить его с помощью пряжи, выполните следующую команду в своем терминале:

пряжа добавить @tanstack/реагировать-запрос

После установки библиотеки React Query вы оборачиваете все приложение в QueryClientProvider компонент. QueryClientProvider Компонент обертывает все ваше приложение и предоставляет экземпляр QueryClient ко всем его дочерним компонентам.

QueryClient является центральной частью React Query.

QueryClient управляет всей логикой выборки данных и кэширования. QueryClientProvider компонент занимает QueryClient в качестве реквизита и делает его доступным для остальной части вашего приложения.

Чтобы использовать QueryClientProvider и QueryClient в ваше приложение, вы должны импортировать их из @tanstack/реагировать-запрос библиотека:

Импортировать Реагировать от«реагировать»;
Импортировать РеактДОМ от'реакция-дом/клиент';
Импортировать Приложение от'./Приложение';
Импортировать { QueryClientProvider, QueryClient } от'@tanstack/реагировать-запрос';
константа запросКлиент = новый ЗапросКлиент();
ReactDOM.createRoot(документ.getEementd('корень')).оказывать(



 </QueryClientProvider>
 </React.StrictMode>
)

Понимание хука useQuery

использовать запрос ловушка — это функция, предоставляемая библиотекой React Query, которая извлекает данные с сервера или API. Он принимает объект со следующими свойствами: ключ запроса (ключ запроса) и запросFn (функция, которая возвращает обещание, которое преобразуется в данные, которые вы хотите получить).

ключ запроса идентифицирует запрос; он должен быть уникальным для каждого запроса в вашем приложении. Ключ может быть любым значением, например строкой, объектом или массивом.

Для получения данных с помощью использовать запрос хук, вам нужно импортировать его из @tanstack/реагировать-запрос библиотека, пройти ключ запроса и использовать запросFn для получения данных из API.

Например:

Импортировать Реагировать от«реагировать»;
Импортировать аксиомы отаксиос;
Импортировать { использовать запрос } от'@tanstack/реагировать-запрос';
функцияДом() {
константа постзапрос = использоватьзапрос({
 ключ запроса: ['сообщения'],
 запросFn: асинхронный () => {
константа ответ = Ждите аксиос.получить(' https://jsonplaceholder.typicode.com/posts');
константа данные = Ждите ответ.данные;
возвращаться данные;
 }
 })
если( postQuery.isLoading ) возвращаться ( <h1>Загрузка...h1>)
если( postQuery.isError ) возвращаться (<h1>Ошибка загрузки данных!!!h1>)

возвращаться (



Главная</h1>
 { postQuery.data.map( (элемент) => ( <пключ={item.id}>{элемент.название}п>)) }
 </div>
 )
}
экспортпо умолчанию Дом;

использовать запрос hook возвращает объект, содержащий информацию о запросе. постзапрос объект содержит isLoading, isError, и успех состояния. isLoading, isError, и успех состояния управляют жизненным циклом процесса поиска данных. postQuery.данные Свойство содержит данные, полученные из API.

isLoading state — это логическое значение, указывающее, загружает ли запрос данные в данный момент. Когда isLoading состояние истинно, запрос выполняется, а запрошенные данные недоступны.

isError state также является логическим значением, указывающим, произошла ли ошибка во время извлечения данных. Когда isError верно, запрос не смог получить данные.

успех state — это логическое значение, указывающее, успешно ли запрос извлек данные. Когда успех верно, вы можете отображать полученные данные в своем приложении.

Обратите внимание, что вы можете получить доступ к ключ запроса используя запросFn. запросFn принимает один аргумент. Этот аргумент представляет собой объект, содержащий параметры, необходимые для запроса API. Одним из таких параметров является ключ запроса.

Например:

использовать запрос ({
 ключ запроса: ['сообщения'],
 запросFn: асинхронный (объект) => {
консоль.log(obj.queryKey);
 }
 })

Работа с устаревшими данными

Запрос React предоставляет множество способов работы с устаревшими данными. Библиотека React Query обеспечивает автоматический отправку нового запроса на выборку в ваш API, когда полученные данные устаревают. Это гарантирует, что вы постоянно отображаете самые актуальные данные.

Вы можете контролировать скорость устаревания ваших данных и временной интервал между каждым автоматическим запросом на получение, используя staleTime и refetchInterval параметры. staleTime option — это свойство, указывающее количество миллисекунд, в течение которых кэшированные данные действительны, прежде чем устареют.

refetchInterval option — это свойство, которое указывает количество миллисекунд между каждым автоматическим запросом на выборку библиотеки React Query.

Например:

использовать запрос ({
 ключ запроса: ['...'],
 запросFn: () => {...},
 staleTime: 1000;
})

В этом примере staleTime составляет 1000 миллисекунд (1 секунду). Извлеченные данные устареют через 1 секунду, а затем библиотека React Query сделает еще один запрос на выборку в API.

Здесь вы используете refetchInterval возможность контролировать временной интервал между каждым автоматическим запросом на выборку:

использовать запрос ({
 ключ запроса: ['...'],
 запросFn: () => {...},
 интервал обновления: 6000;
})

refetchInterval составляет 6000 миллисекунд (6 секунд). Запрос React автоматически инициирует новый запрос на выборку для обновления кэшированных данных через 6 секунд.

Понимание использования мутационного хука

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

Ниже мы создали Добавить сообщение компонент, отображающий форма с полем ввода и кнопкой отправки. Этот компонент формы будет использовать хук useMutation для обновления состояния:

Импортировать Реагировать от«реагировать»
функцияДобавить сообщение() {
константа[сообщение, setPost] = React.useState({
 заголовок: ""
 })
функцияручка изменения(событие) {
 установитьПост( (предыдущее состояние) => ({
... предыдущее состояние,
 [событие.цель.имя]: событие.цель.значение
 }) )
 }
возвращаться (



 тип="текст"
 заполнитель ='Добавить заголовок'
 имя='заголовок'
 onChange={handleChange} 
 значение = {post.title}
 />
Добавить сообщение</button>
 </form>
 )
}
экспортпо умолчанию ДобавитьПост;

Внутри Добавить сообщение компонент - это состояние почта который служит объектом с одним свойством, заголовок.

ручка изменения функция обновляет состояние почта всякий раз, когда пользователи вводят в поля ввода. После создания Добавить сообщение компонент, мы импортируем использованиеМутация ловите и используйте его для обновления API.

Например:

Импортировать {использовать мутацию} от'@tanstack/реагировать-запрос'
Импортировать аксиомы отаксиос;
константа newPostMutation = useMutation({
 мутацияFn: асинхронный () => {
константа ответ = Ждите аксиос.пост('', {
 заголовок: post.title,
 });
константа данные = ответ.данные;
возвращаться данные;
 }
 })

использованиеМутация hook обрабатывает HTTP-запрос на создание нового сообщения. новаяПостмутация константа представляет функцию мутации и параметры ее конфигурации.

мутацияFn — это асинхронная функция, которая отправляет запрос POST в конечную точку API. Запрос включает объект, содержащий заголовок значение из почта объект.

Чтобы запустить мутацияFn, вам нужно будет позвонить в newPostMutation.mutate() метод:

константа обработатьОтправить = асинхронный (событие) => { 
 событие.preventDefault();
 newPostMutation.mutate();
}
возвращаться (


 тип="текст"
 заполнитель ='Добавить заголовок'
 имя='заголовок'
 onChange={handleChange} 
 значение = {post.title}
 />
Добавить сообщение</button>
 </form>
 )
}

Отправка формы запустит ручкаОтправить функция. ручкаОтправить function — это асинхронная функция, которая запускает функцию мутации newPostMutation.mutate().

Эффективная выборка данных с помощью запроса Tanstack

В этой статье рассматривается, как обрабатывать выборку данных в приложении React с помощью библиотеки tanstack/react-query.

Библиотека tanstack/react-query предоставляет мощный и гибкий инструмент для извлечения и кэширования данных в приложениях React. Он прост в использовании, а его возможности кэширования делают его эффективным и отзывчивым.

Независимо от того, создаете ли вы небольшой личный проект или масштабное корпоративное приложение, библиотека tanstack/react-query поможет вам эффективно и действенно управлять данными и отображать их. Наряду с React Next.js также предоставляет несколько встроенных процессов и сторонних библиотек для обработки выборки данных.