Tanstack Query, AKA React Query, je populárna knižnica na načítanie údajov v aplikáciách React. React Query zjednodušuje proces načítavania, ukladania do vyrovnávacej pamäte a aktualizácie údajov vo webových aplikáciách. Tento článok bude diskutovať o používaní React Query na spracovanie načítania údajov v aplikácii React.

Inštalácia a nastavenie React Query

React Query môžete nainštalovať pomocou npm alebo yarn. Ak ho chcete nainštalovať pomocou npm, spustite v termináli nasledujúci príkaz:

npm a @tanstack/react-query

Ak ho chcete nainštalovať pomocou priadze, spustite v termináli nasledujúci príkaz:

yarn add @tanstack/react-query

Po nainštalovaní knižnice React Query zabalíte celú aplikáciu do QueryClientProvider komponent. The QueryClientProvider komponent obalí celú vašu aplikáciu a poskytne inštanciu QueryClient na všetky jeho podradené zložky.

The QueryClient je ústredným prvkom React Query. The

QueryClient spravuje všetku logiku načítania údajov a ukladania do vyrovnávacej pamäte. The QueryClientProvider komponent preberá QueryClient ako rekvizitu a sprístupní ju zvyšku vašej aplikácie.

Na využitie QueryClientProvider a QueryClient vo svojej aplikácii, musíte ich importovať z @tanstack/react-query knižnica:

importovať Reagovať od'reagovať';
importovať ReactDOM od'react-dom/client';
importovať App od'./App';
importovať { QueryClientProvider, QueryClient } od'@tanstack/react-query';
konšt queryClient = Nový QueryClient();
ReactDOM.createRoot(dokument.getEementd('root')).vykresliť(



 </QueryClientProvider>
 </React.StrictMode>
)

Pochopenie funkcie useQuery Hook

The useQuery hook je funkcia poskytovaná knižnicou React Query, ktorá načítava údaje zo servera alebo API. Prijíma objekt s nasledujúcimi vlastnosťami: queryKey (kľúč dotazu) a queryFn (funkcia, ktorá vracia prísľub, ktorý rieši údaje, ktoré chcete načítať).

The queryKey identifikuje dopyt; musí byť jedinečný pre každý dotaz vo vašej aplikácii. Kľúčom môže byť ľubovoľná hodnota, napríklad reťazec, objekt alebo pole.

Na načítanie údajov pomocou useQuery háčik, musíte ho importovať z @tanstack/react-query knižnica, prejsť a queryKey a použiť queryFn na načítanie údajov z API.

Napríklad:

importovať Reagovať od'reagovať';
importovať axios od"axios";
importovať { useQuery } od'@tanstack/react-query';
funkciuDomov() {
konšt postQuery = useQuery({
 queryKey: ['príspevky'],
 queryFn: async () => {
konšt odpoveď = čakať axios.get(' https://jsonplaceholder.typicode.com/posts');
konšt údaje = čakať odozva.údaje;
vrátiť údaje;
 }
 })
ak( postQuery.isLoading ) vrátiť ( <h1>Načítava...h1>)
ak( postQuery.isError ) vrátiť (<h1>Chyba pri načítavaní údajov!!!h1>)

vrátiť (



Domov</h1>
 { postQuery.data.map( (položka) => ( <pkľúč={item.id}>{item.title}p>)) }
 </div>
 )
}
exportpredvolená Domov;

The useQuery hook vráti objekt, ktorý obsahuje informácie o dotaze. The postQuery objekt obsahuje isLoading, isError, a isSuccess štátov. The isLoading, isError, a isSuccess štáty riadia životný cyklus procesu získavania údajov. The postQuery.data obsahuje údaje získané z API.

The isLoading state je boolovská hodnota, ktorá označuje, či dotaz práve načítava údaje. Keď isLoading stav je pravdivý, dopyt práve prebieha a požadované údaje nie sú k dispozícii.

The isError state je tiež boolovská hodnota označujúca, či sa počas získavania údajov vyskytla chyba. Kedy isError je pravda, dotazu sa nepodarilo získať údaje.

The isSuccess state je boolovská hodnota, ktorá označuje, či dotaz úspešne získal údaje. Kedy isSuccess je pravda, môžete zobraziť údaje získané vo vašej aplikácii.

Všimnite si, že máte prístup k queryKey pomocou queryFn. The queryFn berie jediný argument. Tento argument je objekt obsahujúci parametre požadované pre požiadavku API. Jedným z týchto parametrov je queryKey.

Napríklad:

useQuery({
 queryKey: ['príspevky'],
 queryFn: async (obj) => {
konzoly.log( obj.queryKey);
 }
 })

Zaobchádzanie so zastaralými údajmi

Dotaz React poskytuje mnoho spôsobov, ako sa vysporiadať so zastaranými údajmi. Knižnica React Query zaisťuje automatické vytvorenie novej požiadavky na načítanie do vášho API, keď sa načítané údaje stanú neaktuálnymi. To zaručuje, že neustále poskytujete najaktuálnejšie údaje.

Môžete ovládať, ako rýchlo sa vaše údaje zastarajú, a časový interval medzi jednotlivými požiadavkami na automatické načítanie pomocou staleTime a refetchInterval možnosti. The staleTime option je vlastnosť, ktorá určuje počet milisekúnd, počas ktorých sú údaje uložené vo vyrovnávacej pamäti platné, kým sa nestanú zastaranými.

The refetchInterval option je vlastnosť, ktorá určuje počet milisekúnd medzi každou požiadavkou automatického načítania knižnice React Query.

Napríklad:

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

V tomto príklade staleTime je 1 000 milisekúnd (1 sekunda). Načítané údaje sa po 1 sekunde zastarajú a potom knižnica React Query odošle do API ďalšiu požiadavku na načítanie.

Tu použijete refetchInterval možnosť ovládať časový interval medzi každou žiadosťou o automatické načítanie:

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

The refetchInterval je 6000 milisekúnd (6 sekúnd). Dotaz React automaticky spustí novú požiadavku na načítanie na aktualizáciu údajov uložených vo vyrovnávacej pamäti po 6 sekundách.

Pochopenie použitia Mutation Hook

The useMutation hook je výkonný nástroj v knižnici React Query. to vykonáva asynchrónnu prevádzku mutácie, ako je vytváranie alebo aktualizácia údajov na serveri. Pomocou useMutation háčik, môžete jednoducho aktualizovať stav vašej aplikácie a používateľské rozhranie na základe odozvy mutácie.

Nižšie sme vytvorili AddPost komponent, ktorý vykresľuje a formulár so vstupným poľom a tlačidlom odoslať. Tento komponent formulára použije hák useMutation na aktualizáciu stavu:

importovať Reagovať od'reagovať'
funkciuAddPost() {
konšt[post, setPost] = React.useState({
 názov: ""
 })
funkciurukoväťZmeniť(udalosť) {
 setPost( (prevState) => ({
 ...prevState,
 [event.target.name]: event.target.value
 }) )
 }
vrátiť (



 typ="text"
 zástupný symbol ='Pridať názov'
 meno='názov'
 onChange={handleChange} 
 value={post.title}
 />
Pridať príspevok</button>
 </form>
 )
}
exportpredvolená AddPost;

Vnútri AddPost zložka je stav príspevok ktorý slúži ako objekt s jednou vlastnosťou, titul.

The rukoväťZmeniť funkcia aktualizuje stav príspevok vždy, keď používatelia zadajú do vstupných polí. Po vytvorení AddPost komponent, dovážame useMutation háčik a použite ho na aktualizáciu API.

Napríklad:

importovať { useMutation } od'@tanstack/react-query'
importovať axios od"axios";
konšt newPostMutation = useMutation({
 mutáciaFn: async () => {
konšt odpoveď = čakať axios.post('', {
 title: post.title,
 });
konšt údaje = odozva.údaje;
vrátiť údaje;
 }
 })

The useMutation hook spracuje požiadavku HTTP na vytvorenie nového príspevku. The newPostMutation konštanta predstavuje mutačnú funkciu a jej možnosti konfigurácie.

The mutáciaFn je asynchrónna funkcia, ktorá odosiela požiadavku POST do koncového bodu API. Požiadavka obsahuje objekt obsahujúci titul hodnota z príspevok objekt.

Ak chcete spustiť mutáciaFn, budete musieť zavolať na newPostMutation.mutate() metóda:

konšt handleSubmit = async (udalosť) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
vrátiť (


 typ="text"
 zástupný symbol ='Pridať názov'
 meno='názov'
 onChange={handleChange} 
 value={post.title}
 />
Pridať príspevok</button>
 </form>
 )
}

Odoslaním formulára sa spustí rukoväťOdoslať funkciu. The rukoväťOdoslať funkcia je asynchrónna funkcia, ktorá spúšťa funkciu mutácie newPostMutation.mutate().

Efektívne načítanie dát pomocou Tanstack Query

Tento článok skúma, ako zvládnuť načítanie údajov v aplikácii React pomocou knižnice tanstack/react-query.

Knižnica tanstack/react-query poskytuje výkonný a flexibilný nástroj na načítanie a ukladanie údajov do vyrovnávacej pamäte v aplikáciách React. Ľahko sa používa a vďaka možnosti ukladania do vyrovnávacej pamäte je efektívny a pohotový.

Či už vytvárate malý osobný projekt alebo rozsiahlu podnikovú aplikáciu, knižnica tanstack/react-query vám môže pomôcť efektívne a efektívne spravovať a zobrazovať dáta. Spolu s React, Next.js tiež poskytuje niekoľko vstavaných procesov a knižníc tretích strán na spracovanie dát.