Tanstack Query, neboli React Query, je oblíbená knihovna pro načítání dat v aplikacích React. React Query zjednodušuje proces načítání, ukládání do mezipaměti a aktualizace dat ve webových aplikacích. Tento článek pojednává o použití React Query ke zpracování dat v aplikaci React.

Instalace a nastavení React Query

React Query můžete nainstalovat pomocí npm nebo yarn. Chcete-li jej nainstalovat pomocí npm, spusťte ve svém terminálu následující příkaz:

npm i @tanstack/react-query

Chcete-li jej nainstalovat pomocí příze, spusťte ve svém terminálu následující příkaz:

yarn add @tanstack/react-query

Po instalaci knihovny React Query zabalíte celou aplikaci do QueryClientProvider komponent. The QueryClientProvider komponenta obalí celou vaši aplikaci a poskytne instanci QueryClient na všechny jeho podřízené součásti.

The QueryClient je ústřední částí React Query. The QueryClient spravuje veškerou logiku načítání dat a ukládání do mezipaměti. The

QueryClientProvider složka přebírá QueryClient jako rekvizitu a zpřístupní ji zbytku vaší aplikace.

Chcete-li využít QueryClientProvider a QueryClient ve vaší aplikaci je musíte importovat z @tanstack/react-query knihovna:

import Reagovat z'reagovat';
import ReactDOM z'react-dom/client';
import Aplikace z'./Aplikace';
import { QueryClientProvider, QueryClient } z'@tanstack/react-query';
konst dotazKlient = Nový QueryClient();
ReactDOM.createRoot(dokument.getEementd('vykořenit')).poskytnout(



 </QueryClientProvider>
 </React.StrictMode>
)

Pochopení useQuery Hook

The useQuery hook je funkce poskytovaná knihovnou React Query, která stahuje data ze serveru nebo API. Přijímá objekt s následujícími vlastnostmi: dotazKey (klíč dotazu) a dotazFn (funkce, která vrací příslib, který řeší data, která chcete načíst).

The dotazKey identifikuje dotaz; musí být jedinečný pro každý dotaz ve vaší aplikaci. Klíčem může být libovolná hodnota, například řetězec, objekt nebo pole.

Chcete-li načíst data pomocí useQuery háček, musíte jej importovat z @tanstack/react-query knihovna, předat a dotazKey a používat dotazFn k načtení dat z API.

Například:

import Reagovat z'reagovat';
import axios z'axios';
import { useQuery } z'@tanstack/react-query';
funkceDomov() {
konst postQuery = useQuery({
 dotazový klíč: ['příspěvky'],
 dotaz Fn: asynchronní () => {
konst odpověď = čekat axios.get(' https://jsonplaceholder.typicode.com/posts');
konst údaje = čekat odezva.data;
vrátit se data;
 }
 })
-li( postQuery.isLoading ) vrátit se ( <h1>Načítání...h1>)
-li( postQuery.isError ) vrátit se (<h1>Chyba při načítání dat!!!h1>)

vrátit se (



Domů</h1>
 { postQuery.data.map( (položka) => ( <pklíč={item.id}>{item.title}p>)) }
 </div>
 )
}
vývoznívýchozí Domov;

The useQuery hook vrátí objekt, který obsahuje informace o dotazu. The postQuery objekt obsahuje isLoading, isError, a je úspěch státy. The isLoading, isError, a je úspěch stavy řídí životní cyklus procesu získávání dat. The postQuery.data vlastnost obsahuje data načtená z API.

The isLoading state je logická hodnota, která označuje, zda dotaz aktuálně načítá data. Když isLoading stav je true, dotaz probíhá a požadovaná data nejsou k dispozici.

The isError state je také booleovská hodnota udávající, zda během načítání dat došlo k chybě. Když isError je pravda, dotazu se nepodařilo načíst data.

The je úspěch state je logická hodnota, která označuje, zda dotaz úspěšně načetl data. Když je úspěch je pravda, můžete zobrazit data načtená ve vaší aplikaci.

Všimněte si, že máte přístup k dotazKey za použití dotazFn. The dotazFn bere jediný argument. Tento argument je objekt obsahující parametry požadované pro požadavek API. Jedním z těchto parametrů je dotazKey.

Například:

useQuery({
 dotazový klíč: ['příspěvky'],
 dotaz Fn: asynchronní (obj) => {
řídicí panel.log( obj.queryKey);
 }
 })

Zacházení se zastaralými daty

Dotaz React poskytuje mnoho způsobů, jak se vypořádat se zastaralými daty. Knihovna React Query zajišťuje automatické odeslání nového požadavku na načtení do vašeho API, když se načtená data stanou zastaralými. To zaručuje, že neustále vykreslujete nejaktuálnější data.

Můžete ovládat, jak rychle se vaše data zastarají, a časový interval mezi každým automatickým požadavkem na načtení pomocí staleTime a refetchInterval možnosti. The staleTime option je vlastnost, která určuje počet milisekund, po které jsou data uložená v mezipaměti platná, než se stanou zastaralými.

The refetchInterval option je vlastnost, která určuje počet milisekund mezi každým automatickým požadavkem na načtení knihovny React Query.

Například:

useQuery({
 dotazový klíč: ['...'],
 dotaz Fn: () => {...},
 staleTime: 1000;
})

V tomto příkladu je staleTime je 1000 milisekund (1 sekunda). Načtená data se po 1 sekundě zastarají a poté knihovna React Query odešle do API další požadavek na načtení.

Zde použijete refetchInterval možnost řídit časový interval mezi každým automatickým požadavkem na načtení:

useQuery({
 dotazový klíč: ['...'],
 dotaz Fn: () => {...},
 refetchInterval: 6000;
})

The refetchInterval je 6000 milisekund (6 sekund). React Query automaticky spustí nový požadavek na načtení pro aktualizaci dat uložených v mezipaměti po 6 sekundách.

Pochopení použití Mutation Hook

The useMutation hook je mocný nástroj v knihovně React Query. To provádí asynchronní provoz mutace, jako je vytváření nebo aktualizace dat na serveru. Za použití useMutation hák, můžete snadno aktualizovat stav vaší aplikace a uživatelské rozhraní na základě odezvy mutace.

Níže jsme vytvořili AddPost komponenta, která vykresluje a formulář se vstupním polem a tlačítkem Odeslat. Tato komponenta formuláře použije háček useMutation k aktualizaci stavu:

import Reagovat z'reagovat'
funkceAddPost() {
konst[post, setPost] = React.useState({
 titul: ""
 })
funkcerukojeťZměnit(událost) {
 setPost( (prevState) => ({
 ...prevState,
 [event.target.name]: event.target.value
 }) )
 }
vrátit se (



 typ="text"
 zástupný symbol='Přidat titulek'
 jméno='titul'
 onChange={handleChange} 
 value={post.title}
 />
Přidat příspěvek</button>
 </form>
 )
}
vývoznívýchozí AddPost;

Uvnitř AddPost komponenta je stav pošta který slouží jako objekt s jednou vlastností, titul.

The rukojeťZměnit funkce aktualizuje stav pošta kdykoli uživatelé zadají do vstupních polí. Po vytvoření AddPost komponentu, importujeme useMutation háček a použijte jej k aktualizaci API.

Například:

import { useMutation } z'@tanstack/react-query'
import axios z'axios';
konst newPostMutation = useMutation({
 mutaceFn: asynchronní () => {
konst odpověď = čekat axios.post('', {
 název: post.title,
 });
konst data = odezva.data;
vrátit se data;
 }
 })

The useMutation hook zpracovává požadavek HTTP na vytvoření nového příspěvku. The nová PostMutace konstanta představuje mutační funkci a její konfigurační možnosti.

The mutaceFn je asynchronní funkce, která odesílá požadavek POST do koncového bodu API. Požadavek obsahuje objekt obsahující titul hodnota z pošta objekt.

Chcete-li spustit mutaceFn, budete muset zavolat na newPostMutation.mutate() metoda:

konst handleSubmit = asynchronní (událost) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
vrátit se (


 typ="text"
 zástupný symbol='Přidat titulek'
 jméno='titul'
 onChange={handleChange} 
 value={post.title}
 />
Přidat příspěvek</button>
 </form>
 )
}

Odesláním formuláře se spustí handleSubmit funkce. The handleSubmit funkce je asynchronní funkce, která spouští mutační funkci newPostMutation.mutate().

Efektivní načítání dat pomocí dotazu Tanstack

Tento článek zkoumá, jak zacházet s načítáním dat v aplikaci React pomocí knihovny tanstack/react-query.

Knihovna tanstack/react-query poskytuje výkonný a flexibilní nástroj pro načítání a ukládání dat do mezipaměti v aplikacích React. Snadno se používá a díky možnosti ukládání do mezipaměti je efektivní a pohotový.

Ať už budujete malý osobní projekt nebo rozsáhlou podnikovou aplikaci, knihovna tanstack/react-query vám může pomoci efektivně a efektivně spravovat a zobrazovat data. Spolu s Reactem Next.js také poskytuje několik vestavěných procesů a knihoven třetích stran pro zpracování dat.