Tanstack Query, dar žinomas kaip „React Query“, yra populiari biblioteka, skirta duomenims „React“ programose gauti. „React Query“ supaprastina duomenų gavimo, kaupimo talpykloje ir atnaujinimo procesą žiniatinklio programose. Šiame straipsnyje bus aptariamas „React Query“ naudojimas duomenų gavimui „React“ programoje.

„React Query“ diegimas ir nustatymas

Galite įdiegti „React Query“ naudodami npm arba verpalą. Norėdami jį įdiegti naudodami npm, savo terminale paleiskite šią komandą:

npm i @tanstack/react-query

Norėdami jį įdiegti naudodami siūlą, savo terminale paleiskite šią komandą:

verpalai pridėti @tanstack/react-query

Įdiegę „React Query“ biblioteką, visą programą supakuojate į QueryClientProvider komponentas. The QueryClientProvider komponentas apvynioja visą jūsų programą ir pateikia pavyzdį QueryClient visiems jo antriniams komponentams.

The QueryClient yra pagrindinė „React Query“ dalis. The

QueryClient valdo visą duomenų gavimo ir talpyklos logiką. The QueryClientProvider komponentas paima QueryClient kaip atramą ir padaro ją prieinamą likusiai jūsų programos daliai.

Norėdami pasinaudoti QueryClientProvider ir QueryClient savo programoje turite juos importuoti iš @tanstack/react-query biblioteka:

importuoti Reaguoti iš'reaguoti';
importuoti ReactDOM iš'react-dom/client';
importuoti Programėlė iš„./Programa“;
importuoti { QueryClientProvider, QueryClient } iš„@tanstack/react-query“;
konst queryClient = naujas QueryClient();
ReactDOM.createRoot(dokumentas.getEementd("šaknis")).pateikti(



 </QueryClientProvider>
 </React.StrictMode>
)

Supratimas apie naudojimą Query Hook

The useQuery „hook“ yra funkcija, kurią teikia „React Query“ biblioteka, kuri gauna duomenis iš serverio arba API. Jis priima objektą su šiomis savybėmis: queryKey (užklausos raktas) ir užklausaFn (funkcija, kuri grąžina pažadą, kuris išsprendžia duomenis, kuriuos norite gauti).

The queryKey identifikuoja užklausą; jis turi būti unikalus kiekvienai jūsų programos užklausai. Raktas gali būti bet kokia reikšmė, pvz., eilutė, objektas arba masyvas.

Norėdami gauti duomenis naudodami useQuery kablys, turite jį importuoti iš @tanstack/react-query biblioteka, praeiti a queryKey ir naudokite užklausaFn norėdami gauti duomenis iš API.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti aksios iš"aksios";
importuoti { useQuery } iš„@tanstack/react-query“;
funkcijaNamai() {
konst postQuery = useQuery({
 queryKey: ["įrašai"],
 queryFn: async () => {
konst atsakymas = laukti axios.get(' https://jsonplaceholder.typicode.com/posts');
konst duomenys = laukti atsakymas.duomenys;
grąžinti duomenys;
 }
 })
jeigu( postQuery.isLoading ) grąžinti ( <h1>Įkeliama...h1>)
jeigu( postQuery.isError ) grąžinti (<h1>Įkeliant duomenis įvyko klaida!!!h1>)

grąžinti (



Pradžia</h1>
 { postQuery.data.map( (daiktas) => ( <pRaktas={item.id}>{item.title}p>)) }
 </div>
 )
}
eksportuotinumatytas Namai;

The useQuery kabliukas grąžina objektą, kuriame yra informacijos apie užklausą. The postQuery objekte yra iskraunama, isError, ir yra Sėkmė teigia. The iskraunama, isError, ir yra Sėkmė valstybės valdo duomenų gavimo proceso gyvavimo ciklą. The postQuery.data nuosavybėje yra duomenys, gauti iš API.

The iskraunama būsena yra loginė reikšmė, nurodanti, ar užklausa šiuo metu įkelia duomenis. Kai iskraunama būsena teisinga, užklausa vykdoma, o prašomi duomenys nepasiekiami.

The isError būsena taip pat yra loginė reikšmė, nurodanti, ar duomenų gavimo metu įvyko klaida. Kada isError tiesa, užklausai nepavyko gauti duomenų.

The yra Sėkmė būsena yra loginė reikšmė, nurodanti, ar užklausa sėkmingai gavo duomenis. Kada yra Sėkmė tiesa, galite rodyti programoje gautus duomenis.

Atminkite, kad galite pasiekti queryKey naudojant užklausaFn. The užklausaFn paima vieną argumentą. Šis argumentas yra objektas, kuriame yra API užklausai reikalingi parametrai. Vienas iš šių parametrų yra queryKey.

Pavyzdžiui:

useQuery({
 queryKey: ["įrašai"],
 queryFn: async (obj) => {
konsolė.log( obj.queryKey );
 }
 })

Darbas su pasenusiais duomenimis

„React query“ suteikia daug būdų, kaip elgtis su pasenusiais duomenimis. „React Query“ biblioteka užtikrina, kad jūsų API bus automatiškai pateikta nauja gavimo užklausa, kai gauti duomenys pasensta. Tai garantuoja, kad nuolat pateikiate pačius naujausius duomenis.

Galite valdyti, kaip greitai jūsų duomenys pasensta, ir laiko intervalą tarp kiekvienos automatinio gavimo užklausos, naudodami pasenęs laikas ir pakartotinis intervalas galimybės. The pasenęs laikas parinktis yra ypatybė, nurodanti, kiek milisekundžių talpykloje saugomi duomenys galioja prieš pasendami.

The pakartotinis intervalas parinktis yra ypatybė, nurodanti milisekundžių skaičių tarp kiekvienos automatinės „React Query“ bibliotekos užklausos.

Pavyzdžiui:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 pasenęs laikas: 1000;
})

Šiame pavyzdyje pasenęs laikas yra 1000 milisekundžių (1 sekundė). Gauti duomenys pasens po 1 sekundės, o tada „React Query“ biblioteka pateiks kitą API gavimo užklausą.

Čia jūs naudojate pakartotinis intervalas galimybė valdyti laiko intervalą tarp kiekvienos automatinio gavimo užklausos:

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

The pakartotinis intervalas yra 6000 milisekundžių (6 sekundės). „React Query“ po 6 sekundžių automatiškai suaktyvins naują gavimo užklausą, kad būtų atnaujinti talpyklos duomenys.

Naudojimo Mutation Hook supratimas

The UseMutation „hook“ yra galingas „React Query“ bibliotekos įrankis. Tai atlieka asinchroninę operaciją mutacijos, pvz., duomenų kūrimas arba atnaujinimas serveryje. Naudojant UseMutation kabliuką, galite lengvai atnaujinti programos būseną ir vartotojo sąsają, atsižvelgdami į mutacijos atsaką.

Žemiau mes sukūrėme AddPost komponentas, kuris suteikia a forma su įvesties lauku ir pateikimo mygtuku. Šis formos komponentas būsenai atnaujinti naudos „useMutation“ kabliuką:

importuoti Reaguoti iš'reaguoti'
funkcijaAddPost() {
konst[post, setPost] = React.useState({
 pavadinimas: ""
 })
funkcijarankenaKeisti(įvykis) {
 setPost( (prevState) => ({
 ...prevState,
 [įvykis.target.name]: event.target.value
 }) )
 }
grąžinti (



 tipas ="tekstas"
 vietos rezervuaras='Prideti pavadinima'
 vardas ="pavadinimas"
 onChange={handleChange} 
 value={post.title}
 />
Pridėti įrašą</button>
 </form>
 )
}
eksportuotinumatytas AddPost;

Viduje AddPost komponentas yra būsena paštu kuris tarnauja kaip objektas, turintis vieną savybę, titulą.

The rankenaKeisti funkcija atnaujina būseną paštu kai vartotojai įveda įvesties laukus. Sukūrę AddPost komponentas, mes importuojame UseMutation kabliuką ir naudokite jį atnaujindami API.

Pavyzdžiui:

importuoti { useMutation } iš„@tanstack/react-query“
importuoti aksios iš"aksios";
konst newPostMutation = useMutation({
 mutacijaFn: async () => {
konst atsakymas = laukti axios.post('', {
 pavadinimas: post.title,
 });
konst duomenys = atsakymas.duomenys;
grąžinti duomenys;
 }
 })

The UseMutation hook apdoroja HTTP užklausą, kad sukurtų naują įrašą. The naujaPostMutacija konstanta reiškia mutacijos funkciją ir jos konfigūravimo parinktis.

The mutacijaFn yra asinchroninė funkcija, siunčianti POST užklausą į API galutinį tašką. Prašyme yra objektas, kuriame yra titulą vertė iš paštu objektas.

Norėdami paleisti mutacijaFn, jums reikės paskambinti newPostMutation.mutate() metodas:

konst rankenaPateikti = async (įvykis) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
grąžinti (


 tipas ="tekstas"
 vietos rezervuaras='Prideti pavadinima'
 vardas ="pavadinimas"
 onChange={handleChange} 
 value={post.title}
 />
Pridėti įrašą</button>
 </form>
 )
}

Pateikus formą bus paleista rankenaPateikti funkcija. The rankenaPateikti funkcija yra asinchroninė funkcija, suaktyvinanti mutacijos funkciją newPostMutation.mutate().

Efektyvus duomenų gavimas naudojant Tanstack užklausą

Šiame straipsnyje nagrinėjama, kaip apdoroti duomenų gavimą React programoje naudojant tanstack/react-query biblioteką.

Tanstack/react-query biblioteka yra galingas ir lankstus įrankis duomenims gauti ir kaupti talpykloje React programose. Jį lengva naudoti, o talpyklos talpyklos galimybės daro jį efektyvų ir reaguojantį.

Nesvarbu, ar kuriate nedidelį asmeninį projektą, ar didelę įmonės programą, tanstack/react-query biblioteka gali padėti efektyviai ir efektyviai valdyti ir rodyti duomenis. Kartu su „React“, „Next.js“ taip pat teikia keletą integruotų procesų ir trečiųjų šalių bibliotekų, skirtų duomenų gavimui.