Tanstack Query, AKA React Query, on populaarne teek andmete toomiseks Reacti rakendustes. React Query lihtsustab veebirakendustes andmete toomise, vahemällu salvestamise ja värskendamise protsessi. Selles artiklis käsitletakse React Query kasutamist andmete toomise käsitlemiseks Reacti rakenduses.

React Query installimine ja seadistamine

Saate installida React Query, kasutades npm-i või lõnga. Selle installimiseks npm-i abil käivitage terminalis järgmine käsk:

npm i @tanstack/react-query

Selle installimiseks lõnga abil käivitage terminalis järgmine käsk:

lõng lisa @tanstack/react-query

Pärast React Query teegi installimist mähite kogu rakenduse sellesse QueryClientProvider komponent. The QueryClientProvider komponent ümbritseb kogu teie rakenduse ja pakub selle eksemplari QueryClient kõigile selle alamkomponentidele.

The QueryClient on React Query keskne osa. The QueryClient haldab kogu andmete toomise ja vahemällu salvestamise loogikat. The

QueryClientProvider komponent võtab QueryClient rekvisiidina ja teeb selle kättesaadavaks teie ülejäänud rakenduse jaoks.

Et kasutada ära QueryClientProvider ja QueryClient oma rakenduses peate need importima rakendusest @tanstack/react-query raamatukogu:

importida Reageerige alates'reageeri';
importida ReactDOM alates'reageerimis-/klient';
importida Rakendus alates'./Rakendus';
importida { QueryClientProvider, QueryClient } alates'@tanstack/react-query';
konst queryClient = uus QueryClient();
ReactDOM.createRoot(dokument.getEementd("juur")).renderda(



 </QueryClientProvider>
 </React.StrictMode>
)

Kasutamise Query Hook mõistmine

The useQuery konks on React Query teegi pakutav funktsioon, mis hangib andmeid serverist või API-st. See aktsepteerib objekti, millel on järgmised omadused: queryKey (päringu võti) ja queryFn (funktsioon, mis tagastab lubaduse, mis lahendab andmed, mida soovite tuua).

The queryKey tuvastab päringu; see peab olema teie rakenduse iga päringu jaoks kordumatu. Võtmeks võib olla mis tahes väärtus, näiteks string, objekt või massiiv.

Andmete toomiseks kasutades useQuery konks, peate selle importima @tanstack/react-query raamatukogu, pass a queryKey ja kasutage queryFn andmete toomiseks API-st.

Näiteks:

importida Reageerige alates'reageeri';
importida aksiosid alates"axios";
importida { useQuery } alates'@tanstack/react-query';
funktsiooniKodu() {
konst postQuery = useQuery({
 queryKey: ['postitused'],
 queryFn: asünkr () => {
konst vastus = ootama axios.get(' https://jsonplaceholder.typicode.com/posts');
konst andmed = ootama vastus.andmed;
tagasi andmed;
 }
 })
kui( postQuery.isLoading ) tagasi ( <h1>Laadimine...h1>)
kui( postQuery.isError ) tagasi (<h1>Viga andmete laadimisel!!!h1>)

tagasi (



Kodu</h1>
 { postQuery.data.map( (üksus) => ( <lkvõti={item.id}>{item.title}lk>)) }
 </div>
 )
}
eksportidavaikimisi Kodu;

The useQuery hook tagastab objekti, mis sisaldab päringu kohta teavet. The postQuery objekt sisaldab on laadimine, isErrorja on Edu osariigid. The on laadimine, isErrorja on Edu osariigid haldavad andmeotsinguprotsessi elutsüklit. The postQuery.data atribuut sisaldab API-st hangitud andmeid.

The on laadimine olek on tõeväärtus, mis näitab, kas päring laadib praegu andmeid. Kui on laadimine olek on tõene, päring on pooleli ja nõutud andmed pole saadaval.

The isError olek on ka tõeväärtus, mis näitab, kas andmete toomisel ilmnes viga. Millal isError on tõsi, päringuga ei õnnestunud andmeid tuua.

The on Edu olek on tõeväärtus, mis näitab, kas päring on edukalt andmeid toonud. Millal on Edu on tõsi, saate kuvada oma rakendusest hangitud andmeid.

Pange tähele, et pääsete juurde queryKey kasutades queryFn. The queryFn võtab vaid ühe argumendi. See argument on objekt, mis sisaldab API päringu jaoks vajalikke parameetreid. Üks neist parameetritest on queryKey.

Näiteks:

useQuery({
 queryKey: ['postitused'],
 queryFn: asünkr (obj) => {
konsool.log( obj.queryKey );
 }
 })

Vananenud andmetega tegelemine

Reaktsioonipäring pakub palju võimalusi aegunud andmetega tegelemiseks. React Query teek tagab teie API-le automaatse uue toomistaotluse esitamise, kui toodud andmed aeguvad. See tagab, et renderdate pidevalt kõige värskemaid andmeid.

Saate juhtida, kui kiiresti teie andmed vananevad, ja ajavahemikku iga automaatse toomise päringu vahel, kasutades aegunud aeg ja refetchInterval valikuid. The aegunud aeg valik on atribuut, mis määrab millisekundite arvu vahemällu salvestatud andmed kehtivad enne aegumist.

The refetchInterval suvand on atribuut, mis määrab millisekundite arvu iga React Query teegi automaatse toomise päringu vahel.

Näiteks:

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

Selles näites on aegunud aeg on 1000 millisekundit (1 sekund). Tootud andmed aeguvad 1 sekundi pärast ja seejärel esitab React Query teek API-le uue toomistaotluse.

Siin kasutate refetchInterval võimalus kontrollida iga automaatse toomise päringu vahelist ajavahemikku:

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

The refetchInterval on 6000 millisekundit (6 sekundit). React Query käivitab 6 sekundi pärast automaatselt uue toomispäringu, et värskendada vahemällu salvestatud andmeid.

Mutatsioonikonksu kasutamise mõistmine

The useMutation hook on võimas tööriist React Query teegis. See teostab asünkroonset operatsiooni mutatsioonid, näiteks andmete loomine või värskendamine serveris. Kasutades useMutation konks, saate hõlpsalt värskendada oma rakenduse olekut ja kasutajaliidest, lähtudes mutatsiooni vastusest.

Allpool oleme loonud an Lisa postitus komponent, mis muudab a vormi sisestusvälja ja esitamisnupuga. See vormikomponent kasutab oleku värskendamiseks konksu useMutation:

importida Reageerige alates'reageeri'
funktsiooniLisa postitus() {
konst[post, setPost] = React.useState({
 pealkiri: ""
 })
funktsioonikäepideMuuda(sündmus) {
 setPost( (prevState) => ({
 ...prevState,
 [sündmuse sihtmärgi nimi]: sündmuse sihtmärgi väärtus
 }) )
 }
tagasi (



 tüüp="tekst"
 kohatäide="Lisa pealkiri"
 nimi ="tiitel"
 onChange={handleChange} 
 väärtus={post.title}
 />
Lisa postitus</button>
 </form>
 )
}
eksportidavaikimisi AddPost;

Sees Lisa postitus komponent on olek postitus mis toimib ühe omadusega objektina, pealkiri.

The käepideMuuda funktsioon värskendab olekut postitus alati, kui kasutajad sisestavad sisestusväljadele. Pärast loomist Lisa postitus komponendi, impordime useMutation konks ja kasutage seda API värskendamiseks.

Näiteks:

importida { useMutation } alates'@tanstack/react-query'
importida aksiosid alates"axios";
konst newPostMutation = useMutation({
 mutatsioonFn: asünkr () => {
konst vastus = ootama axios.post('', {
 pealkiri: postitus.pealkiri,
 });
konst andmed = vastus.andmed;
tagasi andmed;
 }
 })

The useMutation hook käsitleb HTTP-päringut uue postituse loomiseks. The uusPostMutatsioon konstant tähistab mutatsioonifunktsiooni ja selle konfiguratsioonivalikuid.

The mutatsioonFn on asünkroonne funktsioon, mis saadab API lõpp-punktile POST-päringu. Taotlus sisaldab objekti, mis sisaldab pealkiri väärtus alates postitus objektiks.

Et käivitada mutatsioonFn, peate helistama newPostMutation.mutate() meetod:

konst käepideEsita = asünkr (sündmus) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
tagasi (


 tüüp="tekst"
 kohatäide="Lisa pealkiri"
 nimi ="tiitel"
 onChange={handleChange} 
 väärtus={post.title}
 />
Lisa postitus</button>
 </form>
 )
}

Vormi esitamisel käivitatakse käepide Esita funktsiooni. The käepide Esita funktsioon on asünkroonne funktsioon, mis käivitab mutatsioonifunktsiooni newPostMutation.mutate().

Tõhus andmete toomine Tanstacki päringuga

Selles artiklis uuritakse, kuidas käsitleda andmete toomist Reacti rakenduses, kasutades tanstack/react-query teeki.

Tanstack/react-query teek pakub võimsat ja paindlikku tööriista Reacti rakendustes andmete toomiseks ja vahemällu salvestamiseks. Seda on lihtne kasutada ja selle vahemällu salvestamise võimalused muudavad selle tõhusaks ja tundlikuks.

Olenemata sellest, kas ehitate väikest isiklikku projekti või ulatuslikku ettevõtterakendust, võib tanstack/react-query teek aidata teil andmeid tõhusalt hallata ja kuvada. Lisaks Reactile pakub Next.js andmete toomiseks ka mitmeid sisseehitatud protsesse ja kolmandate osapoolte teeke.