Tanstack Query, AKA React Query, popularna je biblioteka za dohvaćanje podataka u React aplikacijama. React Query pojednostavljuje proces dohvaćanja, predmemoriranja i ažuriranja podataka u web aplikacijama. Ovaj članak raspravljat će o korištenju React Queryja za rukovanje dohvaćanjem podataka u React aplikaciji.

Instaliranje i postavljanje React Queryja

Možete instalirati React Query koristeći npm ili yarn. Da biste ga instalirali pomoću npm-a, pokrenite sljedeću naredbu na svom terminalu:

npm i @tanstack/react-query

Da biste ga instalirali koristeći yarn, pokrenite sljedeću naredbu na vašem terminalu:

yarn dodaj @tanstack/react-query

Nakon instaliranja biblioteke React Query, cijelu aplikaciju omotavate u QueryClientProvider komponenta. The QueryClientProvider komponenta obavija cijelu vašu aplikaciju i pruža instancu QueryClient svim svojim podređenim komponentama.

The QueryClient središnji je dio React Queryja. The

QueryClient upravlja cjelokupnom logikom dohvaćanja podataka i predmemoriranja. The QueryClientProvider komponenta preuzima QueryClient kao potporu i čini ga dostupnim ostatku vaše aplikacije.

Da biste iskoristili QueryClientProvider i QueryClient u svojoj aplikaciji, morate ih uvesti iz @tanstack/reagirajte-upit knjižnica:

uvoz Reagirati iz'reagirati';
uvoz ReactDOM iz'react-dom/client';
uvoz aplikacija iz'./Aplikacija';
uvoz {QueryClientProvider, QueryClient} iz'@tanstack/react-query';
konst upitKlijent = novi UpitKlijent();
ReactDOM.createRoot(dokument.getEementd('korijen')).render(



 </QueryClientProvider>
 </React.StrictMode>
)

Razumijevanje useQuery kuke

The useQuery hook je funkcija koju pruža biblioteka React Query, koja dohvaća podatke s poslužitelja ili API-ja. Prihvaća objekt sa sljedećim svojstvima: queryKey (ključ upita) i upitFn (funkcija koja vraća obećanje koje rješava podatke koje želite dohvatiti).

The queryKey identificira upit; mora biti jedinstven za svaki upit u vašoj aplikaciji. Ključ može biti bilo koja vrijednost, poput niza, objekta ili niza.

Za dohvaćanje podataka pomoću useQuery hook, morate ga uvesti iz @tanstack/reagirajte-upit knjižnica, položiti a queryKey i koristite upitFn za dohvaćanje podataka iz API-ja.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz axios iz'axios';
uvoz {useQuery} iz'@tanstack/react-query';
funkcijaDom() {
konst postQuery = useQuery({
 queryKey: ['postovi'],
 queryFn: asinkroni () => {
konst odgovor = čekati axios.get(' https://jsonplaceholder.typicode.com/posts');
konst podaci = čekati odgovor.podaci;
povratak podaci;
 }
 })
ako(postQuery.isLoading) povratak ( <h1>Učitavam...h1>)
ako(postQuery.isError) povratak (<h1>Greška pri učitavanju podataka!!!h1>)

povratak (



Dom</h1>
 { postQuery.data.map( (artikal) => ( <strključ={item.id}>{item.title}str>)) }
 </div>
 )
}
izvozzadano Dom;

The useQuery hook vraća objekt koji sadrži informacije o upitu. The postQuery objekt sadrži isLoading, isError, i jeUspjeh Države. The isLoading, isError, i jeUspjeh države upravljaju životnim ciklusom procesa dohvaćanja podataka. The postQuery.data svojstvo sadrži podatke dohvaćene iz API-ja.

The isLoading stanje je Booleova vrijednost koja pokazuje da li upit trenutno učitava podatke. Kada isLoading stanje je istinito, upit je u tijeku, a traženi podaci nisu dostupni.

The isError stanje je također Booleova vrijednost koja pokazuje je li došlo do pogreške tijekom dohvaćanja podataka. Kada isError je istina, upit nije uspio dohvatiti podatke.

The jeUspjeh stanje je Booleova vrijednost koja pokazuje da li je upit uspješno dohvatio podatke. Kada jeUspjeh istina, možete prikazati podatke dohvaćene u svojoj aplikaciji.

Imajte na umu da možete pristupiti queryKey koristiti upitFn. The upitFn uzima jedan argument. Ovaj argument je objekt koji sadrži parametre potrebne za API zahtjev. Jedan od tih parametara je queryKey.

Na primjer:

useQuery({
 queryKey: ['postovi'],
 queryFn: asinkroni (obj) => {
konzola.log(obj.queryKey);
 }
 })

Rad sa zastarjelim podacima

React query nudi mnogo načina za rješavanje zastarjelih podataka. Biblioteka React Query osigurava automatsko slanje novog zahtjeva za dohvaćanje vašem API-ju kada dohvaćeni podaci postanu zastarjeli. To jamči da neprestano prikazujete najažurnije podatke.

Možete kontrolirati koliko brzo vaši podaci postaju ustajali i vremenski interval između svakog zahtjeva za automatsko dohvaćanje korištenjem ustajalo vrijeme i refetchInterval opcije. The ustajalo vrijeme opcija je svojstvo koje navodi broj milisekundi koliko su podaci u predmemoriji važeći prije nego što postanu zastarjeli.

The refetchInterval opcija je svojstvo koje navodi broj milisekundi između svakog zahtjeva za automatsko dohvaćanje biblioteke React Query.

Na primjer:

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

U ovom primjeru, ustajalo vrijeme je 1000 milisekundi (1 sekunda). Dohvaćeni podaci postat će zastarjeli nakon 1 sekunde, a tada će biblioteka React Query uputiti još jedan zahtjev za dohvaćanje API-ju.

Ovdje koristite refetchInterval opcija za kontrolu vremenskog intervala između svakog zahtjeva za automatsko dohvaćanje:

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

The refetchInterval je 6000 milisekundi (6 sekundi). React Query automatski će pokrenuti novi zahtjev za dohvaćanje za ažuriranje predmemoriranih podataka nakon 6 sekundi.

Razumijevanje useMutation Hooka

The useMutation hook je moćan alat u biblioteci React Query. To izvodi asinkroni rad mutacije, poput stvaranja ili ažuriranja podataka na poslužitelju. Koristiti useMutation kuka, možete jednostavno ažurirati stanje vaše aplikacije i korisničko sučelje na temelju odgovora mutacije.

U nastavku smo izradili AddPost komponenta koja prikazuje a obrazac s poljem za unos i gumbom za slanje. Ova komponenta obrasca će koristiti kuku useMutation za ažuriranje stanja:

uvoz Reagirati iz'reagirati'
funkcijaAddPost() {
konst[post, setPost] = React.useState({
 titula: ""
 })
funkcijahandleChange(događaj) {
 setPost( (prevState) => ({
 ...prethodno stanje,
 [event.target.name]: event.target.value
 }) )
 }
povratak (



 vrsta="tekst"
 rezervirano mjesto='Dodaj Naslov'
 ime='titula'
 onChange={handleChange} 
 vrijednost={post.title}
 />
Dodaj post</button>
 </form>
 )
}
izvozzadano AddPost;

Unutar AddPost komponenta je stanje objaviti koji služi kao objekt s jednim svojstvom, titula.

The handleChange funkcija ažurira stanje objaviti kad god korisnici upisuju u polja za unos. Nakon stvaranja AddPost komponentu, uvozimo useMutation zakačite i upotrijebite ga za ažuriranje API-ja.

Na primjer:

uvoz {useMutation} iz'@tanstack/react-query'
uvoz axios iz'axios';
konst newPostMutation = useMutation({
 mutacijaFn: asinkroni () => {
konst odgovor = čekati axios.post('', {
 naslov: post.naslov,
 });
konst podaci = odgovor.podaci;
povratak podaci;
 }
 })

The useMutation hook obrađuje HTTP zahtjev za stvaranje novog posta. The novaPostMutacija konstanta predstavlja funkciju mutacije i njezine konfiguracijske opcije.

The mutacijaFn je asinkrona funkcija koja šalje POST zahtjev API krajnjoj točki. Zahtjev uključuje objekt koji sadrži titula vrijednost iz objaviti objekt.

Za pokretanje mutacijaFn, morat ćete nazvati newPostMutation.mutate() metoda:

konst handleSubmit = asinkroni (događaj) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
povratak (


 vrsta="tekst"
 rezervirano mjesto='Dodaj Naslov'
 ime='titula'
 onChange={handleChange} 
 vrijednost={post.title}
 />
Dodaj post</button>
 </form>
 )
}

Slanjem obrasca pokrenut će se rukovanjePošalji funkcija. The rukovanjePošalji funkcija je asinkrona funkcija koja pokreće funkciju mutacije newPostMutation.mutate().

Učinkovito dohvaćanje podataka s Tanstack upitom

Ovaj članak istražuje kako rukovati dohvaćanjem podataka u React aplikaciji pomoću biblioteke tanstack/react-query.

Knjižnica tanstack/react-query pruža moćan i fleksibilan alat za dohvaćanje i predmemoriranje podataka u React aplikacijama. Jednostavan je za korištenje, a njegove mogućnosti predmemoriranja čine ga učinkovitim i brzim.

Bez obzira gradite li mali osobni projekt ili opsežnu poslovnu aplikaciju, biblioteka tanstack/react-query može vam pomoći da učinkovito i učinkovito upravljate i prikazujete podatke. Uz React, Next.js također nudi nekoliko ugrađenih procesa i biblioteka trećih strana za rukovanje dohvaćanjem podataka.