Tanstack Query, AKA React Query, este o bibliotecă populară pentru preluarea datelor în aplicațiile React. React Query simplifică procesul de preluare, stocare în cache și actualizare a datelor în aplicațiile web. Acest articol va discuta despre utilizarea React Query pentru a gestiona preluarea datelor într-o aplicație React.

Instalarea și configurarea React Query

Puteți instala React Query folosind npm sau yarn. Pentru a-l instala folosind npm, rulați următoarea comandă în terminal:

npm i @tanstack/react-query

Pentru a-l instala folosind yarn, rulați următoarea comandă în terminalul dvs.:

yarn adauga @tanstack/react-query

După instalarea bibliotecii React Query, includeți întreaga aplicație în QueryClientProvider componentă. The QueryClientProvider componenta împachetează întreaga aplicație și oferă o instanță a QueryClient la toate componentele sale fii.

The QueryClient este piesa centrală a React Query. The

QueryClient gestionează toată logica de preluare și stocare în cache a datelor. The QueryClientProvider componenta ia QueryClient ca o recuzită și îl pune la dispoziție pentru restul aplicației dvs.

Pentru a face uz de QueryClientProvider si QueryClient în aplicația dvs., trebuie să le importați din @tanstack/react-query bibliotecă:

import Reacţiona din'reacţiona';
import ReactDOM din„react-dom/client”;
import App din„./App”;
import { QueryClientProvider, QueryClient } din„@tanstack/react-query”;
const queryClient = nou QueryClient();
ReactDOM.createRoot(document.getEementd('rădăcină')).face(



 </QueryClientProvider>
 </React.StrictMode>
)

Înțelegerea useQuery Hook

The useQuery hook este o funcție furnizată de biblioteca React Query, care preia date de la un server sau API. Acceptă un obiect cu următoarele proprietăți: queryKey (cheia interogării) și interogareFn (o funcție care returnează o promisiune care se rezolvă la datele pe care doriți să le preluați).

The queryKey identifică interogarea; trebuie să fie unic pentru fiecare interogare din aplicația dvs. Cheia poate fi orice valoare, cum ar fi un șir, un obiect sau o matrice.

Pentru a prelua date folosind useQuery cârlig, trebuie să-l importați din @tanstack/react-query bibliotecă, trece a queryKey și folosiți interogareFn pentru a prelua datele dintr-un API.

De exemplu:

import Reacţiona din'reacţiona';
import axios din"axios";
import { useQuery } din„@tanstack/react-query”;
funcţieAcasă() {
const postQuery = useQuery({
 queryKey: [„postări”],
 queryFn: asincron () => {
const răspuns = așteaptă axios.get(' https://jsonplaceholder.typicode.com/posts');
const date = așteaptă răspuns.date;
întoarcere date;
 }
 })
dacă( postQuery.isLoading ) întoarcere ( <h1>Se încarcă...h1>)
dacă( postQuery.isError ) întoarcere (<h1>Eroare la încărcarea datelor!!!h1>)

întoarcere (



Acasă</h1>
 { postQuery.data.map( (articol) => ( <pcheie={ID-ul itemului}>{item.title}p>)) }
 </div>
 )
}
exportMod implicit Acasă;

The useQuery hook returnează un obiect care conține informații despre interogare. The postQuery obiectul conține se incarca, isError, și este Succesul state. The se incarca, isError, și este Succesul statele gestionează ciclul de viață al procesului de regăsire a datelor. The postQuery.data proprietatea conține datele preluate din API.

The se incarca stare este o valoare booleană care indică dacă interogarea încarcă date în prezent. Cand se incarca starea este adevărată, interogarea este în desfășurare și datele solicitate nu sunt disponibile.

The isError starea este, de asemenea, o valoare booleană care indică dacă a apărut o eroare în timpul recuperării datelor. Când isError este adevărat, interogarea nu a reușit să recupereze datele.

The este Succesul stare este o valoare booleană care indică dacă interogarea a preluat cu succes date. Când este Succesul este adevărat, puteți afișa datele preluate în aplicația dvs.

Rețineți că puteți accesa queryKey folosind interogareFn. The interogareFn ia un singur argument. Acest argument este un obiect care conține parametrii necesari pentru cererea API. Unul dintre acești parametri este queryKey.

De exemplu:

useQuery({
 queryKey: [„postări”],
 queryFn: asincron (obj) => {
consolă.log( obj.queryKey );
 }
 })

Gestionarea datelor învechite

Interogarea React oferă multe modalități de a trata datele învechite. Biblioteca React Query asigură efectuarea automată a unei noi solicitări de preluare către API-ul dvs. atunci când datele preluate devin obținute. Acest lucru garantează că redați în mod continuu cele mai actualizate date.

Puteți controla cât de repede datele dvs. devin învechite și intervalul de timp dintre fiecare solicitare de preluare automată utilizând staleTime și refetchInterval Opțiuni. The staleTime opțiunea este o proprietate care specifică numărul de milisecunde în care datele din cache sunt valide înainte de a deveni obținute.

The refetchInterval opțiunea este o proprietate care specifică numărul de milisecunde dintre fiecare cerere de preluare automată a bibliotecii React Query.

De exemplu:

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

În acest exemplu, staleTime este de 1000 de milisecunde (1 secundă). Datele preluate vor deveni obținute după 1 secundă, iar apoi biblioteca React Query va face o altă solicitare de preluare către API.

Aici folosești refetchInterval opțiunea de a controla intervalul de timp dintre fiecare cerere de preluare automată:

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

The refetchInterval este de 6000 milisecunde (6 secunde). Interogarea React va declanșa automat o nouă solicitare de preluare pentru a actualiza datele din cache după 6 secunde.

Înțelegerea utilizării Mutation Hook

The useMutation hook este un instrument puternic în biblioteca React Query. Aceasta efectuează o operație asincronă mutații, cum ar fi crearea sau actualizarea datelor pe un server. Folosind useMutation hook, vă puteți actualiza cu ușurință starea aplicației și interfața cu utilizatorul pe baza răspunsului mutației.

Mai jos, am creat un AdaugăPost componentă care redă a formular cu un câmp de introducere și un buton de trimitere. Această componentă de formular va folosi cârligul useMutation pentru a actualiza starea:

import Reacţiona din'reacţiona'
funcţieAdaugăPost() {
const[post, setPost] = React.useState({
 titlu: ""
 })
funcţiehandleChange(eveniment) {
 setPost( (prevState) => ({
 ...prevState,
 [nume.țintă.eveniment]: valoare.țintă.eveniment
 }) )
 }
întoarcere (



 tip="text"
 substituent='Adauga titlu'
 nume='titlu'
 onChange={handleChange} 
 valoare={post.title}
 />
Adaugă postare</button>
 </form>
 )
}
exportMod implicit AddPost;

În interiorul AdaugăPost componenta este o stare post care servește ca obiect cu o singură proprietate, titlu.

The handleChange funcția actualizează starea post ori de câte ori utilizatorii introduc câmpurile de introducere. După crearea AdaugăPost componentă, importăm useMutation conectați și utilizați-l pentru a actualiza API-ul.

De exemplu:

import { useMutation } din„@tanstack/react-query”
import axios din"axios";
const newPostMutation = useMutation({
 mutațieFn: asincron () => {
const răspuns = așteaptă axios.post('', {
 titlu: post.title,
 });
const date = răspuns.date;
întoarcere date;
 }
 })

The useMutation hook gestionează cererea HTTP pentru a crea o nouă postare. The newPostMutation constantă reprezintă funcția de mutație și opțiunile de configurare ale acesteia.

The mutațieFn este o funcție asincronă care trimite o solicitare POST către punctul final API. Solicitarea include un obiect care conține titlu valoare din post obiect.

Pentru a rula mutațieFn, va trebui să suni la newPostMutation.mutate() metodă:

const handleSubmit = asincron (eveniment) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
întoarcere (


 tip="text"
 substituent='Adauga titlu'
 nume='titlu'
 onChange={handleChange} 
 valoare={post.title}
 />
Adaugă postare</button>
 </form>
 )
}

Trimiterea formularului va rula handleSubmit funcţie. The handleSubmit funcția este o funcție asincronă care declanșează funcția de mutație newPostMutation.mutate().

Preluare eficientă a datelor cu Tanstack Query

Acest articol explorează cum să gestionați preluarea datelor într-o aplicație React folosind biblioteca tanstack/react-query.

Biblioteca tanstack/react-query oferă un instrument puternic și flexibil pentru preluarea și stocarea în cache a datelor în aplicațiile React. Este ușor de utilizat, iar capacitățile sale de stocare în cache îl fac eficient și receptiv.

Indiferent dacă construiți un proiect personal mic sau o aplicație extinsă de întreprindere, biblioteca tanstack/react-query vă poate ajuta să gestionați și să afișați datele în mod eficient și eficient. Alături de React, Next.js oferă, de asemenea, mai multe procese încorporate și biblioteci terță parte pentru a gestiona preluarea datelor.