Tanstack Query, AKA React Query, er et populært bibliotek for å hente data i React-applikasjoner. React Query forenkler prosessen med å hente, bufre og oppdatere data i nettapplikasjoner. Denne artikkelen vil diskutere bruk av React Query til å håndtere datahenting i en React-applikasjon.

Installere og sette opp React Query

Du kan installere React Query ved å bruke npm eller garn. For å installere den ved hjelp av npm, kjør følgende kommando i terminalen din:

npm i @tanstack/react-query

For å installere den ved hjelp av garn, kjør følgende kommando i terminalen din:

garn legg til @tanstack/react-query

Etter å ha installert React Query-biblioteket, pakker du inn hele applikasjonen i QueryClientProvider komponent. De QueryClientProvider komponent omslutter hele programmet og gir en forekomst av QueryClient til alle dens underordnede komponenter.

De QueryClient er den sentrale delen av React Query. De

QueryClient administrerer all datahenting og cachinglogikk. De QueryClientProvider komponent tar QueryClient som en rekvisitt og gjør den tilgjengelig for resten av søknaden din.

For å gjøre bruk av QueryClientProvider og QueryClient i søknaden din må du importere dem fra @tanstack/react-query bibliotek:

import Reagere fra'reagere';
import ReactDOM fra'reager-dom/klient';
import App fra'./App';
import { QueryClientProvider, QueryClient } fra'@tanstack/react-query';
konst queryClient = ny QueryClient();
ReactDOM.createRoot(dokument.getEementd('rot')).render(



 </QueryClientProvider>
 </React.StrictMode>
)

Forstå bruken av Query Hook

De useQuery hook er en funksjon levert av React Query-biblioteket, som henter data fra en server eller API. Den godtar et objekt med følgende egenskaper: queryKey (nøkkelen til spørringen) og queryFn (en funksjon som returnerer et løfte som løses til dataene du vil hente).

De queryKey identifiserer spørringen; den må være unik for hvert søk i søknaden din. Nøkkelen kan være en hvilken som helst verdi, for eksempel en streng, et objekt eller en matrise.

For å hente data ved å bruke useQuery krok, må du importere den fra @tanstack/react-query bibliotek, bestå en queryKey og bruk queryFn for å hente dataene fra en API.

For eksempel:

import Reagere fra'reagere';
import aksioer fra'aksios';
import { useQuery } fra'@tanstack/react-query';
funksjonHjem() {
konst postQuery = useQuery({
 queryKey: ['innlegg'],
 queryFn: asynkron () => {
konst svar = avvente axios.get(' https://jsonplaceholder.typicode.com/posts');
konst data = avvente response.data;
komme tilbake data;
 }
 })
hvis( postQuery.isLoading ) komme tilbake ( <h1>Laster inn...h1>)
hvis( postQuery.isError ) komme tilbake (<h1>Feil ved lasting av data!!!h1>)

komme tilbake (



Hjem</h1>
 { postQuery.data.map( (punkt) => ( <snøkkel={item.id}>{item.title}s>)) }
 </div>
 )
}
eksportmisligholde Hjem;

De useQuery hook returnerer et objekt som inneholder informasjon om spørringen. De postQuery objektet inneholder er Laster, erFeil, og er suksess stater. De er Laster, erFeil, og er suksess stater administrerer livssyklusen til datainnhentingsprosessen. De postQuery.data egenskapen inneholder dataene hentet fra API-en.

De er Laster state er en boolsk verdi som indikerer om spørringen laster inn data. Når er Laster tilstanden er sann, spørringen pågår, og de forespurte dataene er utilgjengelige.

De erFeil tilstand er også en boolsk verdi som indikerer om det oppstod en feil under datahenting. Når erFeil er sant, har spørringen ikke klart å hente data.

De er suksess state er en boolsk verdi som indikerer om spørringen har hentet data. Når er suksess er sant, kan du vise dataene som er hentet i applikasjonen din.

Merk at du har tilgang til queryKey bruker queryFn. De queryFn tar et enkelt argument. Dette argumentet er et objekt som inneholder parameterne som kreves for API-forespørselen. En av disse parameterne er queryKey.

For eksempel:

useQuery({
 queryKey: ['innlegg'],
 queryFn: asynkron (obj) => {
konsoll.log( obj.queryKey );
 }
 })

Håndtering av foreldede data

React-spørring gir mange måter å håndtere foreldede data på. React Query-biblioteket sørger for automatisk å lage en ny henteforespørsel til API-en din når de hentede dataene blir foreldet. Dette garanterer at du kontinuerlig gjengir de mest oppdaterte dataene.

Du kan kontrollere hvor raskt dataene dine blir foreldede og tidsintervallet mellom hver automatisk hentingsforespørsel ved å bruke foreldet tid og gjenhentintervall alternativer. De foreldet tid option er en egenskap som spesifiserer antall millisekunder de hurtigbufrede dataene er gyldige før de blir foreldede.

De gjenhentintervall option er en egenskap som spesifiserer antall millisekunder mellom hver automatisk hentingsforespørsel fra React Query-biblioteket.

For eksempel:

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

I dette eksemplet er foreldet tid er 1000 millisekunder (1 sekund). Dataene som hentes vil bli foreldet etter 1 sekund, og deretter vil React Query-biblioteket sende en ny henteforespørsel til API-en.

Her bruker du gjenhentintervall alternativ for å kontrollere tidsintervallet mellom hver automatisk hentingsforespørsel:

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

De gjenhentintervall er 6000 millisekunder (6 sekunder). React Query vil automatisk utløse en ny henteforespørsel for å oppdatere de hurtigbufrede dataene etter 6 sekunder.

Forstå bruken av Mutation Hook

De brukMutasjon hook er et kraftig verktøy i React Query-biblioteket. Den utfører asynkron drift mutasjoner, for eksempel å opprette eller oppdatere data på en server. Bruker brukMutasjon krok, kan du enkelt oppdatere applikasjonsstatus og brukergrensesnitt basert på responsen til mutasjonen.

Nedenfor har vi laget en Legg til Post komponent som gjengir en skjema med et inntastingsfelt og en send-knapp. Denne skjemakomponenten vil bruke useMutation-kroken for å oppdatere tilstanden:

import Reagere fra'reagere'
funksjonLegg til Post() {
konst[post, setPost] = React.useState({
 tittel: ""
 })
funksjonhandleEndre(begivenhet) {
 setPost( (prevState) => ({
 ...prevState,
 [event.target.name]: event.target.value
 }) )
 }
komme tilbake (



 type="tekst"
 plassholder='Legg til tittel'
 navn='tittel'
 onChange={handleChange} 
 verdi={post.title}
 />
Legg til innlegg</button>
 </form>
 )
}
eksportmisligholde AddPost;

Inne i Legg til Post komponenten er en tilstand post som fungerer som et objekt med én egenskap, tittel.

De handleEndre funksjonen oppdaterer tilstanden post hver gang brukere skriver inn inndatafeltene. Etter å ha opprettet Legg til Post komponent, importerer vi brukMutasjon hekte og bruk den til å oppdatere API.

For eksempel:

import { useMutation } fra'@tanstack/react-query'
import aksioer fra'aksios';
konst newPostMutation = useMutation({
 mutationFn: asynkron () => {
konst svar = avvente axios.post('', {
 tittel: post.title,
 });
konst data = respons.data;
komme tilbake data;
 }
 })

De brukMutasjon hook håndterer HTTP-forespørselen om å opprette et nytt innlegg. De newPostMutation konstant representerer mutasjonsfunksjonen og dens konfigurasjonsalternativer.

De mutasjonFn er en asynkron funksjon som sender en POST-forespørsel til API-endepunktet. Forespørselen inkluderer et objekt som inneholder tittel verdi fra post gjenstand.

Å kjøre mutasjonFn, må du ringe newPostMutation.mutate() metode:

konst handleSubmit = asynkron (hendelse) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
komme tilbake (


 type="tekst"
 plassholder='Legg til tittel'
 navn='tittel'
 onChange={handleChange} 
 verdi={post.title}
 />
Legg til innlegg</button>
 </form>
 )
}

Sending av skjemaet vil kjøre handleSend inn funksjon. De handleSend inn funksjon er en asynkron funksjon som utløser mutasjonsfunksjonen newPostMutation.mutate().

Effektiv datahenting med Tanstack-spørring

Denne artikkelen utforsker hvordan du håndterer datahenting i en React-applikasjon ved å bruke tanstack/react-query-biblioteket.

Tanstack/react-query-biblioteket gir et kraftig og fleksibelt verktøy for å hente og bufre data i React-applikasjoner. Den er enkel å bruke, og bufringsmulighetene gjør den effektiv og responsiv.

Enten du bygger et lite personlig prosjekt eller en omfattende bedriftsapplikasjon, kan tanstack/react-query-biblioteket hjelpe deg med å administrere og vise data effektivt og effektivt. Sammen med React tilbyr Next.js også flere innebygde prosesser og tredjepartsbiblioteker for å håndtere datahenting.