Tanstack Query, AKA React Query, er et populært bibliotek til at hente data i React-applikationer. React Query forenkler processen med at hente, cache og opdatere data i webapplikationer. Denne artikel vil diskutere brugen af ​​React Query til at håndtere datahentning i en React-applikation.

Installation og opsætning af React Query

Du kan installere React Query ved hjælp af npm eller garn. For at installere det ved hjælp af npm skal du køre følgende kommando i din terminal:

npm i @tanstack/react-query

For at installere det ved hjælp af garn skal du køre følgende kommando i din terminal:

garn tilføje @tanstack/react-query

Efter installation af React Query-biblioteket pakker du hele applikationen ind i QueryClientProvider komponent. Det QueryClientProvider komponent ombryder hele din applikation og giver en forekomst af QueryClient til alle dens underordnede komponenter.

Det QueryClient er den centrale del af React Query. Det

QueryClient styrer al datahentnings- og cachelogik. Det QueryClientProvider komponent tager QueryClient som en rekvisit og gør den tilgængelig for resten af ​​din ansøgning.

At gøre brug af QueryClientProvider og QueryClient i din ansøgning skal du importere dem fra @tanstack/react-query bibliotek:

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



 </QueryClientProvider>
 </React.StrictMode>
)

Forstå brugen af ​​Query Hook

Det useQuery hook er en funktion leveret af React Query-biblioteket, som henter data fra en server eller API. Den accepterer et objekt med følgende egenskaber: queryKey (nøglen til forespørgslen) og queryFn (en funktion, der returnerer et løfte, der løser de data, du vil hente).

Det queryKey identificerer forespørgslen; den skal være unik for hver forespørgsel i din ansøgning. Nøglen kan være en hvilken som helst værdi, såsom en streng, et objekt eller en matrix.

For at hente data ved hjælp af useQuery krog, skal du importere den fra @tanstack/react-query bibliotek, bestå en queryKey og bruge queryFn at hente data fra en API.

For eksempel:

importere Reagere fra'reagere';
importere axios fra'aksios';
importere { useQuery } fra'@tanstack/react-query';
fungereHjem() {
konst postQuery = useQuery({
 queryKey: ['indlæg'],
 queryFn: asynkron () => {
konst svar = vente axios.get(' https://jsonplaceholder.typicode.com/posts');
konst data = vente response.data;
Vend tilbage data;
 }
 })
hvis(postQuery.isLoading) Vend tilbage ( <h1>Indlæser...h1>)
hvis(postQuery.isError) Vend tilbage (<h1>Fejl ved indlæsning af data!!!h1>)

Vend tilbage (



Hjem</h1>
 { postQuery.data.map( (vare) => ( <snøgle={item.id}>{item.title}s>)) }
 </div>
 )
}
eksportStandard Hjem;

Det useQuery hook returnerer et objekt, der indeholder oplysninger om forespørgslen. Det postQuery objektet indeholder er Indlæser, erFejl, og er succes stater. Det er Indlæser, erFejl, og er succes stater styrer livscyklussen for datahentningsprocessen. Det postQuery.data egenskaben indeholder de data, der er hentet fra API'en.

Det er Indlæser tilstand er en boolesk værdi, der angiver, om forespørgslen i øjeblikket indlæser data. Når er Indlæser tilstanden er sand, forespørgslen er i gang, og de anmodede data er ikke tilgængelige.

Det erFejl tilstand er også en boolesk værdi, der angiver, om der opstod en fejl under datahentning. Hvornår erFejl er sandt, kunne forespørgslen ikke hente data.

Det er succes tilstand er en boolesk værdi, der angiver, om forespørgslen har hentet data. Hvornår er succes er sandt, kan du vise de hentede data i din applikation.

Bemærk, at du kan få adgang til queryKey bruger queryFn. Det queryFn tager et enkelt argument. Dette argument er et objekt, der indeholder de parametre, der kræves til API-anmodningen. En af disse parametre er queryKey.

For eksempel:

useQuery({
 queryKey: ['indlæg'],
 queryFn: asynkron (obj) => {
konsol.log( obj.queryKey );
 }
 })

Håndtering af uaktuelle data

React-forespørgsel giver mange måder at håndtere forældede data på. React Query-biblioteket sørger for automatisk at lave en ny hentningsanmodning til din API, når de hentede data bliver forældede. Dette garanterer, at du løbende gengiver de mest opdaterede data.

Du kan kontrollere, hvor hurtigt dine data bliver forældede, og tidsintervallet mellem hver automatisk hentningsanmodning ved at bruge forældet Tid og genhentInterval muligheder. Det forældet Tid option er en egenskab, der angiver antallet af millisekunder, de cachelagrede data er gyldige, før de bliver forældede.

Det genhentInterval option er en egenskab, der angiver antallet af millisekunder mellem hver automatisk hentningsanmodning i React Query-biblioteket.

For eksempel:

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

I dette eksempel er forældet Tid er 1000 millisekunder (1 sekund). De hentede data bliver forældede efter 1 sekund, og derefter vil React Query-biblioteket lave endnu en hentningsanmodning til API'en.

Her bruger du genhentInterval mulighed for at kontrollere tidsintervallet mellem hver automatisk hentningsanmodning:

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

Det genhentInterval er 6000 millisekunder (6 sekunder). React Query vil automatisk udløse en ny hentningsanmodning for at opdatere de cachelagrede data efter 6 sekunder.

Forstå brugen af ​​Mutation Hook

Det brug Mutation hook er et kraftfuldt værktøj i React Query-biblioteket. Det udfører asynkron drift mutationer, såsom oprettelse eller opdatering af data på en server. Bruger brug Mutation hook, kan du nemt opdatere din applikationstilstand og brugergrænseflade baseret på mutationens respons.

Nedenfor har vi lavet en Tilføj Post komponent, der gør en formular med et indtastningsfelt og en send-knap. Denne formularkomponent vil bruge useMutation-hook til at opdatere tilstanden:

importere Reagere fra'reagere'
fungereTilføj Post() {
konst[post, setPost] = React.useState({
 titel: ""
 })
fungerehåndtag Skift(begivenhed) {
 sætPost( (prevState) => ({
 ...prevState,
 [event.target.name]: event.target.value
 }) )
 }
Vend tilbage (



 type="tekst"
 pladsholder='Tilføj titel'
 navn='titel'
 onChange={handleChange} 
 værdi={post.title}
 />
Tilføj indlæg</button>
 </form>
 )
}
eksportStandard TilføjPost;

Inde i Tilføj Post komponent er en tilstand stolpe som tjener som et objekt med én egenskab, titel.

Det håndtag Skift funktion opdaterer tilstanden stolpe hver gang brugere skriver i inputfelterne. Efter at have oprettet Tilføj Post komponent, importerer vi brug Mutation hook og brug den til at opdatere API'en.

For eksempel:

importere { useMutation } fra'@tanstack/react-query'
importere axios fra'aksios';
konst newPostMutation = useMutation({
 mutationFn: asynkron () => {
konst svar = vente axios.post('', {
 title: post.title,
 });
konst data = respons.data;
Vend tilbage data;
 }
 })

Det brug Mutation hook håndterer HTTP-anmodningen om at oprette et nyt indlæg. Det newPostMutation konstant repræsenterer mutationsfunktionen og dens konfigurationsmuligheder.

Det mutationFn er en asynkron funktion, der sender en POST-anmodning til API-endepunktet. Anmodningen omfatter et objekt, der indeholder titel værdi fra stolpe objekt.

At køre mutationFn, skal du ringe til newPostMutation.mutate() metode:

konst handleSubmit = asynkron (begivenhed) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
Vend tilbage (


 type="tekst"
 pladsholder='Tilføj titel'
 navn='titel'
 onChange={handleChange} 
 værdi={post.title}
 />
Tilføj indlæg</button>
 </form>
 )
}

Indsendelse af formularen vil køre handleSend fungere. Det handleSend funktion er en asynkron funktion, der udløser mutationsfunktionen newPostMutation.mutate().

Effektiv datahentning med Tanstack-forespørgsel

Denne artikel undersøger, hvordan man håndterer datahentning i en React-applikation ved hjælp af tanstack/react-query-biblioteket.

Tanstack/react-query-biblioteket giver et kraftfuldt og fleksibelt værktøj til at hente og cache data i React-applikationer. Den er nem at bruge, og dens cachefunktioner gør den effektiv og lydhør.

Uanset om du bygger et lille personligt projekt eller en omfattende virksomhedsapplikation, kan tanstack/react-query-biblioteket hjælpe dig med at administrere og vise data effektivt og effektivt. Sammen med React tilbyder Next.js også flere indbyggede processer og tredjepartsbiblioteker til at håndtere datahentning.