Tanstack Query, ook wel React Query genoemd, is een populaire bibliotheek voor het ophalen van gegevens in React-applicaties. React Query vereenvoudigt het proces van het ophalen, cachen en bijwerken van gegevens in webapplicaties. Dit artikel bespreekt het gebruik van React Query om het ophalen van gegevens in een React-toepassing af te handelen.

React Query installeren en instellen

U kunt React Query installeren met behulp van npm of garen. Om het te installeren met behulp van npm, voert u de volgende opdracht uit in uw terminal:

npm i @tanstack/react-query

Om het met garen te installeren, voert u de volgende opdracht uit in uw terminal:

garen voeg @tanstack/react-query toe

Na het installeren van de React Query-bibliotheek, verpak je de hele applicatie in de QueryClientProvider bestanddeel. De QueryClientProvider component omhult uw hele toepassing en biedt een exemplaar van het QueryClient voor al zijn onderliggende componenten.

De QueryClient is het centrale stuk van React Query. De QueryClient beheert alle logica voor het ophalen en cachen van gegevens. De QueryClientProvider onderdeel neemt de QueryClient als een prop en maakt het beschikbaar voor de rest van uw applicatie.

Om gebruik te maken van de QueryClientProvider en de QueryClient in uw toepassing, moet u ze importeren uit de @tanstack/react-query bibliotheek:

importeren Reageer van'Reageer';
importeren ReactDOM van'react-dom/klant';
importeren app van'./App';
importeren { QueryClientProvider, QueryClient } van'@tanstack/reageer-query';
const queryClient = nieuw VraagKlant();
ReactDOM.createRoot(document.getEementd('wortel')).veroorzaken(



 </QueryClientProvider>
 </React.StrictMode>
)

Het gebruik van Query Hook begrijpen

De gebruikQuery hook is een functie die wordt geleverd door de React Query-bibliotheek, die gegevens ophaalt van een server of API. Het accepteert een object met de volgende eigenschappen: vraagSleutel (de sleutel van de query) en vraagFn (een functie die een belofte retourneert die wordt omgezet in de gegevens die u wilt ophalen).

De vraagSleutel identificeert de vraag; het moet uniek zijn voor elke query in uw toepassing. De sleutel kan elke waarde zijn, zoals een string, een object of een array.

Om gegevens op te halen met behulp van de gebruikQuery hook, moet je het importeren vanuit de @tanstack/react-query bibliotheek, pas a vraagSleutel en gebruik de vraagFn om de gegevens van een API op te halen.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren axioma's van'axios';
importeren {gebruikQuery} van'@tanstack/reageer-query';
functieThuis() {
const postQuery = useQuery({
 vraagSleutel: ['berichten'],
 vraagFn: asynchroon () => {
const reactie = wachten axios.get(' https://jsonplaceholder.typicode.com/posts');
const gegevens = wachten reactie.gegevens;
opbrengst gegevens;
 }
 })
als(postQuery.isLoading) opbrengst ( <h1>Bezig met laden...h1>)
als(postQuery.isError) opbrengst (<h1>Fout bij het laden van gegevens!!!h1>)

opbrengst (



Thuis</h1>
 { postQuery.data.map( (item) => ( <Psleutel={item ID}>{titel van het item}P>)) }
 </div>
 )
}
exporterenstandaard Thuis;

De gebruikQuery hook retourneert een object dat informatie over de query bevat. De postQuery object bevat de Laadt, isFout, En isSucces staten. De Laadt, isFout, En isSucces staten beheren de levenscyclus van het proces voor het ophalen van gegevens. De postQuery.data eigenschap bevat de gegevens die zijn opgehaald uit de API.

De Laadt state is een booleaanse waarde die aangeeft of de query momenteel gegevens aan het laden is. Wanneer de Laadt status is waar, de query wordt uitgevoerd en de gevraagde gegevens zijn niet beschikbaar.

De isFout state is ook een booleaanse waarde die aangeeft of er een fout is opgetreden tijdens het ophalen van gegevens. Wanneer isFout waar is, kan de query geen gegevens ophalen.

De isSucces state is een booleaanse waarde die aangeeft of de query met succes gegevens heeft opgehaald. Wanneer isSucces waar is, kunt u de opgehaalde gegevens in uw toepassing weergeven.

Let op: u kunt toegang krijgen tot de vraagSleutel de... gebruiken vraagFn. De vraagFn neemt een enkel argument. Dit argument is een object dat de parameters bevat die nodig zijn voor het API-verzoek. Een van deze parameters is de vraagSleutel.

Bijvoorbeeld:

gebruikQuery({
 vraagSleutel: ['berichten'],
 vraagFn: asynchroon (obj) => {
troosten.log(object.queryKey);
 }
 })

Omgaan met verouderde gegevens

React-query biedt vele manieren om met verouderde gegevens om te gaan. De React Query-bibliotheek zorgt ervoor dat er automatisch een nieuw ophaalverzoek naar uw API wordt gestuurd wanneer de opgehaalde gegevens oud worden. Dit garandeert dat u continu de meest actuele gegevens weergeeft.

U kunt bepalen hoe snel uw gegevens verouderd raken en het tijdsinterval tussen elk automatisch ophaalverzoek bepalen door gebruik te maken van de oude Tijd En refetchInterval opties. De oude Tijd optie is een eigenschap die het aantal milliseconden aangeeft dat de gegevens in de cache geldig zijn voordat ze oud worden.

De refetchInterval optie is een eigenschap die het aantal milliseconden specificeert tussen elk automatisch ophaalverzoek van de React Query-bibliotheek.

Bijvoorbeeld:

gebruikQuery({
 vraagSleutel: ['...'],
 vraagFn: () => {...},
 oude tijd: 1000;
})

In dit voorbeeld is de oude Tijd is 1000 milliseconden (1 seconde). De opgehaalde gegevens worden na 1 seconde verouderd en vervolgens zal de React Query-bibliotheek opnieuw een ophaalverzoek naar de API sturen.

Hier gebruik je de refetchInterval optie om het tijdsinterval tussen elk automatisch ophaalverzoek te regelen:

gebruikQuery({
 vraagSleutel: ['...'],
 vraagFn: () => {...},
 opnieuw ophalenInterval: 6000;
})

De refetchInterval is 6000 milliseconden (6 seconden). De React Query activeert automatisch een nieuw ophaalverzoek om de gegevens in de cache na 6 seconden bij te werken.

Het gebruik begrijpenMutation Hook

De gebruikMutatie hook is een krachtige tool in de React Query-bibliotheek. Het voert een asynchrone bewerking uit mutaties, zoals het maken of bijwerken van gegevens op een server. De... gebruiken gebruikMutatie hook, kunt u eenvoudig uw applicatiestatus en gebruikersinterface bijwerken op basis van de reactie van de mutatie.

Hieronder hebben we een gemaakt Post toevoegen onderdeel dat een formulier met een invoerveld en een verzendknop. Deze formuliercomponent gebruikt de useMutation-hook om de status bij te werken:

importeren Reageer van'Reageer'
functiePost toevoegen() {
const[post, setPost] = React.useState({
 titel: ""
 })
functieomgaanWijzigen(evenement) {
 stelPost( (vorigeStaat) => ({
 ...vorigeStaat,
 [gebeurtenis.doel.naam]: gebeurtenis.doel.waarde
 }) )
 }
opbrengst (



 type="tekst"
 tijdelijke aanduiding='Titel toevoegen'
 naam='titel'
 onChange={handleChange} 
 waarde={post.titel}
 />
Bericht toevoegen</button>
 </form>
 )
}
exporterenstandaard Post toevoegen;

Binnen in de Post toevoegen component is een staat na die dient als een object met één eigenschap, titel.

De omgaanWijzigen functie werkt de status bij na wanneer gebruikers in de invoervelden typen. Na het maken van de Post toevoegen component, importeren we de gebruikMutatie hook en gebruik het om de API bij te werken.

Bijvoorbeeld:

importeren { useMutatie } van'@tanstack/reageer-query'
importeren axioma's van'axios';
const newPostMutation = useMutation({
 mutatieFn: asynchroon () => {
const reactie = wachten axios.post('', {
 titel: post.titel,
 });
const data = respons.data;
opbrengst gegevens;
 }
 })

De gebruikMutatie hook behandelt het HTTP-verzoek om een ​​nieuw bericht te maken. De nieuwPostMutation constante vertegenwoordigt de mutatiefunctie en zijn configuratieopties.

De mutatieFn is een asynchrone functie die een POST-verzoek naar het API-eindpunt stuurt. Het verzoek bevat een object dat de titel waarde uit de na voorwerp.

Om de mutatieFn, moet u bellen met de nieuwPostMutation.mutate() methode:

const handleSubmit = asynchroon (gebeurtenis) => { 
 evenement.preventDefault();
 nieuwePostMutatie.mutate();
}
opbrengst (


 type="tekst"
 tijdelijke aanduiding='Titel toevoegen'
 naam='titel'
 onChange={handleChange} 
 waarde={post.titel}
 />
Bericht toevoegen</button>
 </form>
 )
}

Als u het formulier verzendt, wordt het handvatVerzenden functie. De handvatVerzenden functie is een asynchrone functie die de mutatiefunctie activeert nieuwPostMutation.mutate().

Efficiënt ophalen van gegevens met Tanstack Query

Dit artikel onderzoekt hoe het ophalen van gegevens in een React-toepassing moet worden afgehandeld met behulp van de tanstack/react-query-bibliotheek.

De tanstack/react-query-bibliotheek biedt een krachtige en flexibele tool voor het ophalen en cachen van gegevens in React-applicaties. Het is gemakkelijk te gebruiken en de caching-mogelijkheden maken het efficiënt en responsief.

Of u nu een klein persoonlijk project bouwt of een uitgebreide bedrijfstoepassing, de tanstack/react-query-bibliotheek kan u helpen bij het effectief en efficiënt beheren en weergeven van gegevens. Samen met React biedt Next.js ook verschillende ingebouwde processen en bibliotheken van derden om gegevens op te halen.