Tanstack Query, AKA React Query, je priljubljena knjižnica za pridobivanje podatkov v aplikacijah React. React Query poenostavi postopek pridobivanja, predpomnjenja in posodabljanja podatkov v spletnih aplikacijah. Ta članek bo razpravljal o uporabi React Query za obdelavo pridobivanja podatkov v aplikaciji React.

Namestitev in nastavitev React Query

React Query lahko namestite z uporabo npm ali yarn. Če ga želite namestiti z uporabo npm, zaženite naslednji ukaz v vašem terminalu:

npm i @tanstack/react-query

Če ga želite namestiti s prejo, zaženite naslednji ukaz v terminalu:

yarn dodaj @tanstack/react-query

Po namestitvi knjižnice React Query celotno aplikacijo zavijete v QueryClientProvider komponento. The QueryClientProvider komponenta ovije vašo celotno aplikacijo in zagotovi primerek QueryClient na vse njegove podrejene komponente.

The QueryClient je osrednji del poizvedbe React. The QueryClient

upravlja vso logiko pridobivanja podatkov in predpomnjenja. The QueryClientProvider komponenta prevzame QueryClient kot rekvizit in ga da na voljo preostalim delom vaše aplikacije.

Da bi izkoristili QueryClientProvider in QueryClient v svoji aplikaciji jih morate uvoziti iz @tanstack/react-query knjižnica:

uvoz Reagiraj od'reagirati';
uvoz ReactDOM od'react-dom/client';
uvoz aplikacija od'./Aplikacija';
uvoz { QueryClientProvider, QueryClient } od'@tanstack/react-query';
konst queryClient = novo QueryClient();
ReactDOM.createRoot(dokument.getEementd('root')).render(



 </QueryClientProvider>
 </React.StrictMode>
)

Razumevanje kljuke useQuery

The useQuery hook je funkcija, ki jo ponuja knjižnica React Query, ki pridobiva podatke iz strežnika ali API-ja. Sprejme objekt z naslednjimi lastnostmi: queryKey (ključ poizvedbe) in poizvedbaFn (funkcija, ki vrne obljubo, ki se razreši na podatke, ki jih želite pridobiti).

The queryKey identificira poizvedbo; biti mora edinstven za vsako poizvedbo v vaši aplikaciji. Ključ je lahko katera koli vrednost, na primer niz, predmet ali matrika.

Za pridobivanje podatkov z uporabo useQuery hook, ga morate uvoziti iz @tanstack/react-query knjižnica, prehod a queryKey in uporabite poizvedbaFn za pridobivanje podatkov iz API-ja.

Na primer:

uvoz Reagiraj od'reagirati';
uvoz axios od'axios';
uvoz {useQuery} od'@tanstack/react-query';
funkcijodomov() {
konst postQuery = useQuery({
 queryKey: ['objave'],
 queryFn: asinh () => {
konst odgovor = čakati axios.get(' https://jsonplaceholder.typicode.com/posts');
konst podatki = čakati odziv.podatki;
vrnitev podatki;
 }
 })
če( postQuery.isLoading ) vrnitev ( <h1>Nalaganje...h1>)
če(postQuery.isError) vrnitev (<h1>Napaka pri nalaganju podatkov!!!h1>)

vrnitev (



Domov</h1>
 { postQuery.data.map( (postavka) => ( <strključ={item.id}>{item.title}str>)) }
 </div>
 )
}
izvozprivzeto Domov;

The useQuery hook vrne objekt, ki vsebuje informacije o poizvedbi. The postQuery predmet vsebuje isLoading, isError, in isSuccess države. The isLoading, isError, in isSuccess države upravljajo življenjski cikel procesa pridobivanja podatkov. The postQuery.data vsebuje podatke, pridobljene iz API-ja.

The isLoading stanje je logična vrednost, ki označuje, ali poizvedba trenutno nalaga podatke. Ko isLoading stanje je res, poizvedba je v teku in zahtevani podatki niso na voljo.

The isError stanje je tudi logična vrednost, ki označuje, ali je prišlo do napake med pridobivanjem podatkov. Kdaj isError je res, poizvedba ni uspela pridobiti podatkov.

The isSuccess stanje je logična vrednost, ki označuje, ali je poizvedba uspešno pridobila podatke. Kdaj isSuccess je res, lahko prikažete podatke, pridobljene v vaši aplikaciji.

Upoštevajte, da lahko dostopate do queryKey uporabljati poizvedbaFn. The poizvedbaFn sprejme en sam argument. Ta argument je objekt, ki vsebuje parametre, potrebne za zahtevo API. Eden od teh parametrov je queryKey.

Na primer:

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

Ukvarjanje z zastarelimi podatki

Poizvedba React ponuja veliko načinov za obravnavo zastarelih podatkov. Knjižnica React Query zagotavlja samodejno izdelavo nove zahteve za pridobivanje v vašem API-ju, ko pridobljeni podatki postanejo zastareli. To zagotavlja, da nenehno upodabljate najsodobnejše podatke.

Nadzirate lahko, kako hitro postanejo vaši podatki zastareli, in časovni interval med posameznimi zahtevami za samodejno pridobivanje z uporabo staleTime in refetchInterval opcije. The staleTime možnost je lastnost, ki določa število milisekund, ko so predpomnjeni podatki veljavni, preden postanejo zastareli.

The refetchInterval možnost je lastnost, ki določa število milisekund med vsako samodejno zahtevo za pridobivanje knjižnice React Query.

Na primer:

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

V tem primeru je staleTime je 1000 milisekund (1 sekunda). Pridobljeni podatki bodo postali zastareli po 1 sekundi, nato pa bo knjižnica React Query poslala še eno zahtevo za pridobivanje API-ju.

Tukaj uporabite refetchInterval možnost nadzora časovnega intervala med vsako samodejno zahtevo za pridobivanje:

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

The refetchInterval je 6000 milisekund (6 sekund). Poizvedba React bo po 6 sekundah samodejno sprožila novo zahtevo za pridobitev za posodobitev predpomnjenih podatkov.

Razumevanje useMutation Hook

The useMutation hook je močno orodje v knjižnici React Query. To izvaja asinhrono delovanje mutacije, kot je ustvarjanje ali posodabljanje podatkov na strežniku. Uporabljati useMutation hook, lahko preprosto posodobite stanje svoje aplikacije in uporabniški vmesnik glede na odziv mutacije.

Spodaj smo ustvarili Dodaj objavo komponenta, ki upodablja a obrazec z vnosnim poljem in gumbom za oddajo. Ta komponenta obrazca bo uporabila kljuko useMutation za posodobitev stanja:

uvoz Reagiraj od'reagirati'
funkcijoDodaj objavo() {
konst[objava, setPost] = React.useState({
 naslov: ""
 })
funkcijohandleChange(dogodek) {
 setPost( (prevState) => ({
 ...prejšnje stanje,
 [event.target.name]: event.target.value
 }) )
 }
vrnitev (



 vrsta="besedilo"
 placeholder='Dodaj naslov'
 ime='naslov'
 onChange={handleChange} 
 vrednost={post.title}
 />
Dodaj objavo</button>
 </form>
 )
}
izvozprivzeto AddPost;

Znotraj Dodaj objavo komponenta je stanje post ki služi kot predmet z eno lastnostjo, naslov.

The handleChange funkcija posodobi stanje post kadar koli uporabniki vnašajo v vnosna polja. Po ustvarjanju Dodaj objavo komponento, uvažamo useMutation hook in ga uporabite za posodobitev API-ja.

Na primer:

uvoz {useMutation} od'@tanstack/react-query'
uvoz axios od'axios';
konst newPostMutation = useMutation({
 mutacijaFn: asinh () => {
konst odgovor = čakati axios.post('', {
 naslov: post.title,
 });
konst podatki = odziv.podatki;
vrnitev podatki;
 }
 })

The useMutation hook obravnava zahtevo HTTP za ustvarjanje nove objave. The newPostMutation konstanta predstavlja funkcijo mutacije in njene konfiguracijske možnosti.

The mutacijaFn je asinhrona funkcija, ki končni točki API pošlje zahtevo POST. Zahteva vključuje predmet, ki vsebuje naslov vrednost od post predmet.

Za zagon mutacijaFn, boste morali poklicati newPostMutation.mutate() metoda:

konst handleSubmit = asinh (dogodek) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
vrnitev (


 vrsta="besedilo"
 placeholder='Dodaj naslov'
 ime='naslov'
 onChange={handleChange} 
 vrednost={post.title}
 />
Dodaj objavo</button>
 </form>
 )
}

Po oddaji obrazca se bo zagnal handleSubmit funkcijo. The handleSubmit funkcija je asinhrona funkcija, ki sproži funkcijo mutacije newPostMutation.mutate().

Učinkovito pridobivanje podatkov s poizvedbo Tanstack

Ta članek raziskuje, kako obravnavati pridobivanje podatkov v aplikaciji React z uporabo knjižnice tanstack/react-query.

Knjižnica tanstack/react-query ponuja zmogljivo in prilagodljivo orodje za pridobivanje in predpomnjenje podatkov v aplikacijah React. Je enostaven za uporabo, njegove zmogljivosti predpomnjenja pa ga naredijo učinkovitega in odzivnega.

Ne glede na to, ali gradite majhen osebni projekt ali obsežno poslovno aplikacijo, vam lahko knjižnica tanstack/react-query pomaga učinkovito in učinkovito upravljati in prikazati podatke. Poleg Reacta Next.js ponuja tudi več vgrajenih procesov in knjižnic tretjih oseb za obdelavo pridobivanja podatkov.