Frontend Academy · Oppitunti

SWR ja React Query tietojen välimuistissa

Oppitunti 4/414 vaihetta

SWR ja React Query tietojen välimuistissa on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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 Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Palvelintila on eri asia

Verkkodata ei ole vain tavallista tilaa. Se tarvitsee välimuistin, duplikaattipyyntöjen eston, taustapäivityksen, lataus- ja virhetilan seurannan sekä uudelleenyritykset. Manuaaliset useEffect + useState -hakumallit toteuttavat nämä ominaisuudet huonosti uudelleen.

SWR vai TanStack Query

SWR (Vercel): pieni, yksinkertainen ja hook-pohjainen. TanStack Query (aiemmin React Query): suurempi ja monipuolisempi (mutaatiot, infinite-kyselyt, esilataus ja devtools). Molemmat ovat erinomaisia.

SWR — peruskäyttö

useSWR(key, fetcher) palauttaa datan, virheen ja lataustilan. Tiedot välimuistitetaan avaimen perusteella, ja duplikaattipyynnöt estetään komponenttien välillä.

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(r => r.json());

function Profile() {
  const { data, error, isLoading } = useSWR('/api/me', fetcher);

  if (error) return <ErrorMessage error={error} />;
  if (isLoading) return <Spinner />;
  return <h1>{data.name}</h1>;
}

SWR — uudelleenvalidoinnin toiminta

Oletusarvoisesti SWR uudelleenvalidoi tiedot kohdistuksen yhteydessä (kun välilehti saa jälleen kohdistuksen) ja yhteyden muodostamisen jälkeen. Se palauttaa välimuistissa olevan arvon heti (stale) ja päivittää sen taustalla (while-revalidate).

SWR — mutaatio

mutate(key) uudelleenvalidoi välimuistissa olevan kyselyn. Välittäkää uudet tiedot toisena argumenttina, jos haluatte päivittää tiedot optimistisesti.

import useSWR, { mutate } from 'swr';

async function updateProfile(updates) {
  // Optimistic update — UI reflects change immediately
  mutate('/api/me', { ...currentData, ...updates }, false);
  await fetch('/api/me', { method: 'PUT', body: JSON.stringify(updates) });
  // Revalidate to get the server's canonical state
  mutate('/api/me');
}

TanStack Query — käyttöönotto

Käärikää sovellus QueryClientProvider-komponenttiin, joka käyttää määritettyä QueryClient-oliota.

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

const client = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30000, retry: 2 }
  }
});

function App() {
  return (
    <QueryClientProvider client={client}>
      <Routes />
    </QueryClientProvider>
  );
}

useQuery

useQuery({ queryKey, queryFn }) hakee ja tallentaa tiedot välimuistiin.

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

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 60_000 // fresh for 1 minute
  });

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

useMutation kirjoitusoperaatioihin

useMutation käsittelee POST-, PUT- ja DELETE-operaatiot. Se tarjoaa sisäänrakennetun odotus- ja virhetilan sekä onSuccess-hookin, jolla välimuistit voi mitätöidä.

import { useMutation, useQueryClient } from '@tanstack/react-query';

function CreateUserForm() {
  const qc = useQueryClient();
  const m = useMutation({
    mutationFn: (user) => fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] })
  });

  return <button onClick={() => m.mutate({ name: 'Alice' })} disabled={m.isPending}>Create</button>;
}

Kyselyjen mitätöinti

Mitätöikää mutaation jälkeen siihen liittyvät kyselyt, jotta tiedot haetaan uudelleen. queryClient.invalidateQueries({ queryKey: ['users'] }) merkitsee ne vanhentuneiksi ja hakee ne uudelleen, jos ne on liitetty käyttöliittymään.

Optimistiset päivitykset

TanStack Query tarjoaa ensiluokkaisen tuen optimistisille päivityksille onMutate-, onError- ja onSettled-toimintojen avulla.

useMutation({
  mutationFn: updateUser,
  onMutate: async (newUser) => {
    await qc.cancelQueries({ queryKey: ['user', newUser.id] });
    const previous = qc.getQueryData(['user', newUser.id]);
    qc.setQueryData(['user', newUser.id], newUser);
    return { previous };
  },
  onError: (_, newUser, ctx) => {
    qc.setQueryData(['user', newUser.id], ctx.previous); // rollback
  },
  onSettled: (_, __, newUser) => {
    qc.invalidateQueries({ queryKey: ['user', newUser.id] });
  }
});

Infinite-kyselyt

useInfiniteQuery käsittelee sivutettuja ja loputtomasti vieritettäviä listoja — se tarjoaa fetchNextPage-toiminnon ja seuraa kaikkia ladattuja sivuja.

React Query Devtools

Lisätkää @tanstack/react-query-devtools, jos haluatte kelluvan paneelin, joka näyttää kaikki välimuistissa olevat kyselyt ja niiden tilan sekä mahdollistaa niiden manuaalisen mitätöinnin.

Pikatarkistus

Mikä on SWR:n tai TanStack Queryn tärkein hyöty verrattuna manuaaliseen useEffect + fetch-ratkaisuun?

Vastaa interaktiivisessa oppitunnissa

Kertaus: SWR ja React Query

Palvelintila tarvitsee välimuistin, duplikaattipyyntöjen eston ja uudelleenvalidoinnin. SWR on pieni ja yksinkertainen. TanStack Query tarjoaa enemmän ominaisuuksia (mutaatiot, infinite-kyselyt ja devtools). Käyttäkää useQuerya lukemiseen ja useMutationia kirjoittamiseen. Kutsukaa invalidateQueries-toimintoa mutaatioiden jälkeen. Optimistiset päivitykset toteutetaan onMutate- ja onError-toiminnoilla. Molemmat tekevät manuaalisesta useEffect+fetch-ratkaisusta tarpeettoman tuotantosovelluksissa.

Aloita maksutta

Opi HTML 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: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”SWR ja React Query tietojen välimuistissa” ilmainen?

Kyllä – oppitunnin ”SWR ja React Query tietojen välimuistissa” 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 Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”SWR ja React Query tietojen välimuistissa”?

Käytä SWR:ää tai TanStack Querya palvelintietojen hakemiseen, välimuistiin tallentamiseen, päällekkäisten pyyntöjen yhdistämiseen ja uudelleenvalidointiin manuaalisten useEffect-hakumallien sijaan. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

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

Kuinka kauan ”SWR ja React Query tietojen välimuistissa”-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ä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend 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

Fetch API: GET, POST, PUT ja DELETE
Axios: interceptors ja base URL
Virheenkäsittely: HTTP-tilakoodit
SWR ja React Query tietojen välimuistissa

← Takaisin: Frontend Academy