React Academy · Oppitunti

React Queryn ja QueryClientin käyttöönotto

Asentakaa TanStack Query, käärikää sovellus QueryClientProvideriin ja suorittakaa ensimmäinen useQuery.

Oppitunti 1/413 vaihetta

React Queryn ja QueryClientin käyttöönotto on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla asennatte TanStack Queryn, määritätte QueryClientin ja QueryClientProviderin sekä suoritatte ensimmäisen useQuery-kutsunne tietojen hakemiseksi API:sta.

Mikä React Query on?

TanStack Query (aiemmin React Query) hallitsee palvelintilaa: etäisistä lähteistä haettavien tietojen hakemista, välimuistia, synkronointia ja päivittämistä. Se korvaa manuaalisen lataus- ja virhetilojen hallinnan sekä useEffect-pohjaisen tietojen haun.

Asennus

Asentakaa ydinpaketti ja halutessanne DevTools-työkalut.

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools --save-dev

QueryClientin luominen

Luokaa QueryClient-instanssi, joka sisältää kaiken välimuistin ja määritykset. Välittäkää se QueryClientProviderille, joka ympäröi sovelluksen.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

Ensimmäinen useQuery-kutsunne

Kutsukaa useQuerya queryKey-taulukolla ja tietoja palauttavalla queryFn-funktiolla. Avain yksilöi välimuistissa olevan merkinnän.

import { useQuery } from '@tanstack/react-query';

function Posts() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error!</p>;
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Kyselyavaimet

Kyselyavaimet ovat taulukoita. Lisää parametrit avaimeen rajataksesi välimuistimerkinnän. Eri avaimet tarkoittavat eri välimuistimerkintöjä.

// All posts
useQuery({ queryKey: ['posts'], queryFn: fetchPosts })

// Post with id 5
useQuery({ queryKey: ['posts', 5], queryFn: () => fetchPost(5) })

// Posts filtered by category
useQuery({ queryKey: ['posts', { category: 'react' }], queryFn: /* ... */ })

Kyselyn tila

useQuery palauttaa useita tilaa kuvaavia ominaisuuksia: `isLoading`, `isFetching`, `isError`, `isSuccess`, `data` ja `error`. `isFetching` on tosi myös taustalla tehtävien uudelleenhakujen aikana, kun taas `isLoading` on tosi vain ensimmäisen latauksen aikana.

React Query DevTools

Lisätkää ReactQueryDevtools sovellukseen kehityksen aikana nähdäksenne kaikki välimuistimerkinnät, niiden tilat ja sen, milloin ne on viimeksi haettu. Työkalu on erittäin hyödyllinen virheenkorjauksessa.

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

Oletusmääritykset

Määrittäkää yleiset oletusarvot QueryClientissa: staleTime, gcTime (roskienkeruu), uudelleenyritysten määrä ja refetchOnWindowFocus.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,     // data is fresh for 60s
      retry: 2,              // retry failed queries twice
      refetchOnWindowFocus: false,
    },
  },
});

Automaattinen uudelleenhakeminen

Oletusarvoisesti React Query hakee vanhentuneet tiedot uudelleen, kun selainikkuna saa jälleen kohdistuksen, komponentti liitetään uudelleen tai verkkoyhteys palautuu. Nämä asetukset voi määrittää erikseen jokaiselle kyselylle.

Pikatarkistus

Mikä on useQueryn queryKey-taulukon tarkoitus?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Asentakaa @tanstack/react-query, luokaa QueryClient, ympäröikää sovellus QueryClientProviderilla ja kutsukaa useQuerya queryKey-avaimen ja queryFn-funktion kanssa. Lisätkää DevTools näkyvyyden parantamiseksi. Määrittäkää QueryClientin yleiset oletusarvot.

Seuraavaksi

Seuraava oppitunti: **Välimuisti, vanhentumisaika ja taustalla tehtävä uudelleenhaku** — määritätte staleTime- ja gcTime-arvot hallitaksenne tietojen uudelleenhaun ajankohtaa.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”React Queryn ja QueryClientin käyttöönotto” ilmainen?

Kyllä – oppitunnin ”React Queryn ja QueryClientin käyttöönotto” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”React Queryn ja QueryClientin käyttöönotto”?

Asentakaa TanStack Query, käärikää sovellus QueryClientProvideriin ja suorittakaa ensimmäinen useQuery. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”React Queryn ja QueryClientin käyttöönotto”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

React Queryn ja QueryClientin käyttöönotto
Välimuisti, stale time ja taustalataus
Mutationit useMutationilla
Infinite scroll ja sivutus useInfiniteQuerylla

← Takaisin: React Academy