Tanstack Query, AKA React Query, on suosittu kirjasto tietojen hakemiseen React-sovelluksissa. React Query yksinkertaistaa tietojen hakemista, välimuistiin tallentamista ja päivittämistä verkkosovelluksissa. Tässä artikkelissa käsitellään React Queryn käyttöä tietojen noudon käsittelemiseen React-sovelluksessa.

React Queryn asentaminen ja määrittäminen

Voit asentaa React Queryn npm: n tai langan avulla. Asenna se npm: llä suorittamalla seuraava komento päätteessäsi:

npm i @tanstack/react-query

Asenna se langalla suorittamalla seuraava komento päätteessäsi:

lanka lisää @tanstack/react-query

Kun olet asentanut React Query -kirjaston, kääri koko sovelluksen QueryClientProvider komponentti. The QueryClientProvider komponentti kääri koko sovelluksesi ja tarjoaa ilmentymän QueryClient kaikkiin sen lapsikomponentteihin.

The QueryClient on React Queryn keskeinen osa. The QueryClient hallitsee kaikkea tiedonhaku- ja välimuistilogiikkaa. The

QueryClientProvider komponentti vie QueryClient rekvisiitta ja antaa sen muun sovelluksesi käyttöön.

Hyödyntämään QueryClientProvider ja QueryClient sovelluksessasi, sinun on tuotava ne sovelluksesta @tanstack/react-query kirjasto:

tuonti Reagoi alkaen'reagoi';
tuonti ReactDOM alkaen'react-dom/client';
tuonti Sovellus alkaen'./Sovellus';
tuonti { QueryClientProvider, QueryClient } alkaen'@tanstack/react-query';
konst queryClient = Uusi QueryClient();
ReactDOM.createRoot(asiakirja.getEementd('juuri')).render(



 </QueryClientProvider>
 </React.StrictMode>
)

UseQuery Hookin ymmärtäminen

The useQuery hook on React Query -kirjaston tarjoama toiminto, joka hakee tiedot palvelimelta tai API: lta. Se hyväksyy objektin, jolla on seuraavat ominaisuudet: queryKey (kyselyn avain) ja queryFn (funktio, joka palauttaa lupauksen, joka ratkaisee tiedot, jotka haluat hakea).

The queryKey tunnistaa kyselyn; sen on oltava yksilöllinen jokaiselle sovelluksesi kyselylle. Avain voi olla mikä tahansa arvo, kuten merkkijono, objekti tai taulukko.

Tietojen hakeminen käyttämällä useQuery koukku, sinun on tuotava se @tanstack/react-query kirjasto, pass a queryKey ja käytä queryFn noutaaksesi tiedot API: sta.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti aksiot alkaen"aksiot";
tuonti { useQuery } alkaen'@tanstack/react-query';
toimintoKoti() {
konst postQuery = useQuery({
 queryKey: ["viestit"],
 queryFn: asynk () => {
konst vastaus = odottaa axios.get(' https://jsonplaceholder.typicode.com/posts');
konst data = odottaa vastaus.data;
palata tiedot;
 }
 })
jos( postQuery.isLoading ) palata ( <h1>Ladataan...h1>)
jos( postQuery.isError ) palata (<h1>Virhe ladattaessa tietoja!!!h1>)

palata (



Etusivu</h1>
 { postQuery.data.map( (kohde) => ( <savain={item.id}>{item.title}s>)) }
 </div>
 )
}
viedäoletuksena Koti;

The useQuery koukku palauttaa objektin, joka sisältää tietoja kyselystä. The postQuery objekti sisältää isLadataan, on Error, ja on Menestys valtioita. The isLadataan, on Error, ja on Menestys valtiot hallitsevat tiedonhakuprosessin elinkaarta. The postQuery.data ominaisuus sisältää API: lta haetut tiedot.

The isLadataan tila on boolen arvo, joka osoittaa, lataako kysely parhaillaan tietoja. Kun isLadataan tila on tosi, kysely on käynnissä ja pyydetyt tiedot eivät ole saatavilla.

The on Error tila on myös looginen arvo, joka osoittaa, tapahtuiko virhe tietojen haussa. Kun on Error on totta, kysely ei onnistunut hakemaan tietoja.

The on Menestys tila on boolen arvo, joka osoittaa, onko kysely onnistuneesti noutanut tiedot. Kun on Menestys on totta, voit näyttää sovelluksestasi haetut tiedot.

Huomaa, että voit käyttää queryKey käyttämällä queryFn. The queryFn kestää yhden argumentin. Tämä argumentti on objekti, joka sisältää API-pyynnön edellyttämät parametrit. Yksi näistä parametreista on queryKey.

Esimerkiksi:

useQuery({
 queryKey: ["viestit"],
 queryFn: asynk (obj) => {
konsoli.log( obj.queryKey );
 }
 })

Vanhentuneiden tietojen käsittely

Reaktiokysely tarjoaa monia tapoja käsitellä vanhentuneita tietoja. React Query -kirjasto varmistaa, että se tekee automaattisesti uuden hakupyynnön API: llesi, kun haettu data vanhenee. Tämä takaa, että teet jatkuvasti ajantasaisimpia tietoja.

Voit hallita, kuinka nopeasti tietosi vanhenevat ja kunkin automaattisen noutopyynnön välistä aikaväliä käyttämällä ummehtunut aika ja refetchInterval vaihtoehtoja. The ummehtunut aika Option on ominaisuus, joka määrittää kuinka monta millisekuntia välimuistissa olevat tiedot ovat voimassa ennen kuin ne vanhentuvat.

The refetchInterval Option on ominaisuus, joka määrittää millisekuntien määrän React Query -kirjaston jokaisen automaattisen noutopyynnön välillä.

Esimerkiksi:

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

Tässä esimerkissä ummehtunut aika on 1000 millisekuntia (1 sekunti). Haettu data vanhenee 1 sekunnin kuluttua, ja sitten React Query -kirjasto tekee uuden noutopyynnön API: lle.

Tässä käytät refetchInterval mahdollisuus ohjata kunkin automaattisen noutopyynnön välistä aikaväliä:

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

The refetchInterval on 6000 millisekuntia (6 sekuntia). React Query käynnistää automaattisesti uuden hakupyynnön välimuistissa olevien tietojen päivittämiseksi 6 sekunnin kuluttua.

KäyttöMutaatiokoukun ymmärtäminen

The useMutation hook on tehokas työkalu React Query -kirjastossa. Se suorittaa asynkronisen toiminnan mutaatiot, kuten tietojen luominen tai päivittäminen palvelimelle. Käyttämällä useMutation koukku, voit helposti päivittää sovelluksesi tilan ja käyttöliittymän mutaation vastauksen perusteella.

Alla olemme luoneet an Lisää Post komponentti, joka tekee a lomake, jossa on syöttökenttä ja lähetyspainike. Tämä lomakekomponentti käyttää useMutation-koukkua tilan päivittämiseen:

tuonti Reagoi alkaen'reagoi'
toimintoLisää Post() {
konst[post, setPost] = React.useState({
 otsikko: ""
 })
toimintokahvaVaihda(tapahtuma) {
 setPost( (prevState) => ({
 ...prevState,
 [tapahtuma.kohteen.nimi]: tapahtuma.kohde.arvo
 }) )
 }
palata (



 tyyppi="teksti"
 paikkamerkki='Lisää otsikko'
 nimi ='titteli'
 onChange={handleChange} 
 value={post.title}
 />
Lisää viesti</button>
 </form>
 )
}
viedäoletuksena AddPost;

Sisällä Lisää Post komponentti on tila lähettää joka toimii esineenä, jolla on yksi ominaisuus, otsikko.

The kahvaVaihda toiminto päivittää tilan lähettää aina kun käyttäjät kirjoittavat syöttökenttiin. Luomisen jälkeen Lisää Post komponentti, tuomme useMutation koukku ja käytä sitä API: n päivittämiseen.

Esimerkiksi:

tuonti { useMutation } alkaen'@tanstack/react-query'
tuonti aksiot alkaen"aksiot";
konst newPostMutation = useMutation({
 mutaatioFn: asynk () => {
konst vastaus = odottaa axios.post('', {
 otsikko: post.title,
 });
konst data = vastaus.data;
palata tiedot;
 }
 })

The useMutation hook käsittelee HTTP-pyynnön luoda uusi viesti. The uusi PostMutaatio vakio edustaa mutaatiofunktiota ja sen konfigurointivaihtoehtoja.

The mutaatioFn on asynkroninen funktio, joka lähettää POST-pyynnön API-päätepisteeseen. Pyyntö sisältää objektin, joka sisältää otsikko arvo alkaen lähettää esine.

Juoksemaan mutaatioFn, sinun tulee soittaa numeroon newPostMutation.mutate() menetelmä:

konst handleSubmit = asynk (tapahtuma) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
palata (


 tyyppi="teksti"
 paikkamerkki='Lisää otsikko'
 nimi ='titteli'
 onChange={handleChange} 
 value={post.title}
 />
Lisää viesti</button>
 </form>
 )
}

Lomakkeen lähettäminen suorittaa käsitteleLähetä toiminto. The käsitteleLähetä funktio on asynkroninen funktio, joka laukaisee mutaatiofunktion newPostMutation.mutate().

Tehokas tiedonhaku Tanstack-kyselyllä

Tässä artikkelissa tarkastellaan, kuinka käsitellä tietojen hakemista React-sovelluksessa käyttämällä tanstack/react-query-kirjastoa.

Tanstack/react-query-kirjasto tarjoaa tehokkaan ja joustavan työkalun tietojen hakemiseen ja välimuistiin tallentamiseen React-sovelluksissa. Sitä on helppo käyttää, ja sen välimuistiominaisuudet tekevät siitä tehokkaan ja reagoivan.

Rakennatpa pientä henkilökohtaista projektia tai laajaa yrityssovellusta, tanstack/react-query-kirjasto voi auttaa sinua hallitsemaan ja näyttämään tietoja tehokkaasti ja tehokkaasti. Reactin ohella Next.js tarjoaa myös useita sisäänrakennettuja prosesseja ja kolmannen osapuolen kirjastoja tietojen hakemiseen.