Tanstack Query, AKA React Query, е популярна библиотека за извличане на данни в React приложения. React Query опростява процеса на извличане, кеширане и актуализиране на данни в уеб приложенията. Тази статия ще обсъди използването на React Query за обработка на извличането на данни в React приложение.

Инсталиране и настройка на React Query

Можете да инсталирате React Query с помощта на npm или yarn. За да го инсталирате с помощта на npm, изпълнете следната команда във вашия терминал:

npm аз @tanstack/react-query

За да го инсталирате с помощта на yarn, изпълнете следната команда във вашия терминал:

yarn добави @tanstack/react-query

След като инсталирате библиотеката на React Query, обгръщате цялото приложение в QueryClientProvider компонент. The QueryClientProvider компонентът обвива цялото ви приложение и предоставя екземпляр на QueryClient към всички негови дъщерни компоненти.

The QueryClient е централната част от React Query. The

QueryClient управлява цялата логика за извличане и кеширане на данни. The QueryClientProvider компонентът взема QueryClient като опора и го прави достъпен за останалата част от вашето приложение.

За да се възползвате от QueryClientProvider и на QueryClient във вашето приложение трябва да ги импортирате от @tanstack/react-query библиотека:

импортиране Реагирайте от"реагира";
импортиране ReactDOM от'react-dom/клиент';
импортиране Приложение от„./Приложение“;
импортиране { QueryClientProvider, QueryClient } от„@tanstack/react-query“;
конст queryClient = нов QueryClient();
ReactDOM.createRoot(документ.getEementd("корен")).render(



 </QueryClientProvider>
 </React.StrictMode>
)

Разбиране на useQuery Hook

The useQuery hook е функция, предоставена от библиотеката React Query, която извлича данни от сървър или API. Той приема обект със следните свойства: queryKey (ключът на заявката) и queryFn (функция, която връща обещание, което разрешава данните, които искате да извлечете).

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

За да извлечете данни с помощта на useQuery hook, трябва да го импортирате от @tanstack/react-query библиотека, пас a queryKey и използвайте queryFn за извличане на данните от API.

Например:

импортиране Реагирайте от"реагира";
импортиране аксиос от"аксиос";
импортиране { useQuery } от„@tanstack/react-query“;
функцияУ дома() {
конст postQuery = useQuery({
 queryKey: ["постове"],
 queryFn: асинхронен () => {
конст отговор = изчакайте axios.get(' https://jsonplaceholder.typicode.com/posts');
конст данни = изчакайте response.data;
връщане данни;
 }
 })
ако( postQuery.isLoading ) връщане ( <h1>Зареждане...h1>)
ако(postQuery.isError) връщане (<h1>Грешка при зареждане на данни!!!h1>)

връщане (



Начало</h1>
 { postQuery.data.map( (вещ) => ( <стрключ={item.id}>{item.title}стр>)) }
 </div>
 )
}
износпо подразбиране У дома;

The useQuery hook връща обект, който съдържа информация за заявката. The postQuery обектът съдържа се зарежда, isError, и е Успех държави. The се зарежда, isError, и е Успех държавите управляват жизнения цикъл на процеса за извличане на данни. The postQuery.data свойството съдържа данните, извлечени от API.

The се зарежда state е булева стойност, която показва дали заявката в момента зарежда данни. Когато се зарежда състояние е вярно, заявката е в ход и исканите данни не са налични.

The isError състояние също е булева стойност, показваща дали е възникнала грешка по време на извличане на данни. Кога isError е вярно, заявката не успя да извлече данни.

The е Успех state е булева стойност, която показва дали заявката е извлякла успешно данни. Кога е Успех е вярно, можете да покажете данните, извлечени във вашето приложение.

Имайте предвид, че имате достъп до queryKey използвайки queryFn. The queryFn приема един аргумент. Този аргумент е обект, съдържащ параметрите, необходими за API заявката. Един от тези параметри е queryKey.

Например:

useQuery({
 queryKey: ["постове"],
 queryFn: асинхронен (obj) => {
конзола.log(obj.queryKey);
 }
 })

Работа с остарели данни

React query предоставя много начини за справяне със застояли данни. Библиотеката React Query гарантира автоматично отправяне на нова заявка за извличане към вашия API, когато извлечените данни станат остарели. Това гарантира, че непрекъснато изобразявате най-актуалните данни.

Можете да контролирате колко бързо вашите данни стават остарели и времевия интервал между всяка заявка за автоматично извличане, като използвате staleTime и refetchInterval настроики. The staleTime опцията е свойство, което указва броя милисекунди, през които кешираните данни са валидни, преди да станат остарели.

The refetchInterval опция е свойство, което указва броя на милисекунди между всяка заявка за автоматично извличане на библиотеката React Query.

Например:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 остаряло време: 1000;
})

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

Тук използвате refetchInterval опция за контролиране на интервала от време между всяка заявка за автоматично извличане:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 refetchInterval: 6000;
})

The refetchInterval е 6000 милисекунди (6 секунди). React Query автоматично ще задейства нова заявка за извличане за актуализиране на кешираните данни след 6 секунди.

Разбиране на useMutation Hook

The useMutation hook е мощен инструмент в библиотеката на React Query. То извършва асинхронна операция мутации, като създаване или актуализиране на данни на сървър. Използвайки useMutation hook, можете лесно да актуализирате състоянието на вашето приложение и потребителския интерфейс въз основа на реакцията на мутацията.

По-долу сме създали AddPost компонент, който изобразява a форма с поле за въвеждане и бутон за изпращане. Този компонент на формуляр ще използва куката useMutation, за да актуализира състоянието:

импортиране Реагирайте от"реагира"
функцияAddPost() {
конст[пост, setPost] = React.useState({
 заглавие: ""
 })
функцияhandleChange(събитие) {
 setPost( (предишно състояние) => ({
 ...предишно състояние,
 [event.target.name]: event.target.value
 }) )
 }
връщане (



 тип="текст"
 заместител ='Добави заглавие'
 име='заглавие'
 onChange={handleChange} 
 стойност={post.title}
 />
Добавяне на публикация</button>
 </form>
 )
}
износпо подразбиране AddPost;

Вътре в AddPost компонент е състояние пост който служи като обект с едно свойство, заглавие.

The handleChange функция актуализира състоянието пост всеки път, когато потребителите въвеждат в полетата за въвеждане. След създаването на AddPost компонент, ние импортираме useMutation кука и го използвайте за актуализиране на API.

Например:

импортиране {useMutation} от„@tanstack/react-query“
импортиране аксиос от"аксиос";
конст newPostMutation = useMutation({
 мутацияFn: асинхронен () => {
конст отговор = изчакайте axios.post('', {
 заглавие: post.title,
 });
конст данни = response.data;
връщане данни;
 }
 })

The useMutation hook обработва HTTP заявката за създаване на нова публикация. The newPostMutation константата представлява функцията за мутация и нейните опции за конфигуриране.

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

За да стартирате мутацияFn, ще трябва да се обадите на newPostMutation.mutate() метод:

конст handleSubmit = асинхронен (събитие) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
връщане (


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

Изпращането на формуляра ще стартира handleSubmit функция. The handleSubmit е асинхронна функция, която задейства функцията за мутация newPostMutation.mutate().

Ефективно извличане на данни с Tanstack Query

Тази статия изследва как да се справите с извличането на данни в приложение на React с помощта на библиотеката tanstack/react-query.

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

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