Next.js 15 -täyden pinon verkkosovellukset · Oppitunti

React Query palvelintilan hallintaan

Hallitkaa palvelinpuolen tietojen hakua, välimuistia ja synkronointia React Queryn (TanStack Query) avulla.

Oppitunti 1/412 vaihetta

React Query palvelintilan hallintaan on ilmainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -täyden pinon verkkosovellukset-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Tutustutaan React Queryyn

React Query, joka tunnetaan nykyään nimellä TanStack Query, on tehokas kirjasto sovellusten palvelinpuolen tilan hallintaan.

Sen avulla voitte noutaa, tallentaa välimuistiin, synkronoida ja päivittää tietoja React- ja Next.js-sovelluksissanne vaivattomasti. Ajatelkaa sitä tietokerroksena, joka käsittelee palvelindatan monimutkaisuudet puolestanne.

TanStack Queryn hyödyt

React Query ratkaisee monia yleisiä tiedonhakun haasteita ja tekee sovelluksesta nopeamman ja responsiivisemman tuntuisen:

Välimuistitus: tallentaa haetut tiedot tarpeettomien pyyntöjen estämiseksi.
Uudelleenvalidointi: päivittää vanhentuneet tiedot automaattisesti taustalla.
Lataustilat: tarjoaa selkeät ilmaisimet tietojen hakemisen tilalle.
Virheenkäsittely: helpottaa hakemisessa tapahtuvien virheiden hallintaa ja näyttämistä.
Suorituskyky: vähentää verkkopyyntöjä ja parantaa käyttökokemusta.

Alkuasetukset: Provider

React Queryn käyttämiseksi teidän on ensin määritettävä QueryClient ja välitettävä se sovellukselle. Tämä tehdään yleensä sovelluksen juuressa ympäröimällä komponentit QueryClientProvider-komponentilla.

Seuraavassa on esimerkki asiakkaan ja providerin määrittämisestä Next.js-sovelluksessa:

/* app/providers.jsx (or similar) */
"use client";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';

const queryClient = new QueryClient();

export default function AppProviders({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

Ensimmäinen tietojen haku

useQuery-hook on tietojen hakemisen ydin. Se ottaa kaksi pääargumenttia: yksilöllisen kyselyavaimen ja asynkronisen kyselyfunktion.

Kyselyavain tunnistaa tiedot välimuistissa. Kyselyfunktio hakee tiedot. Kokeilkaa suorittaa tämä yksinkertainen käyttäjää hakeva esimerkki:

"use client";
import { useQuery } from '@tanstack/react-query';
import React from 'react';

async function fetchUser() {
  const res = await fetch(
    'https://jsonplaceholder.typicode.com/users/1'
  );
  if (!res.ok) throw new Error('Failed to fetch');
  return res.json();
}

export default function UserProfile() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', 1],
    queryFn: fetchUser,
  });

  if (isLoading) return <p>Loading user...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h3>User: {data.name}</h3>
      <p>Email: {data.email}</p>
    </div>
  );
}

Kyselyavainten voima

Kyselyavaimet ovat ratkaisevan tärkeitä! Ne toimivat välimuistissa olevien tietojen yksilöllisinä tunnisteina. React Query käyttää niitä tiettyjen kyselyjen tunnistamiseen, uudelleenhakemiseen ja mitätöimiseen.

Avaimet voivat olla yksinkertaisia merkkijonoja (esim. 'todos') tai taulukoita.
Taulukot sopivat erinomaisesti riippuvuuksien tai parametrien välittämiseen, kuten ['todos', { status: 'active' }].
Kun avaimen taulukkoalkiot muuttuvat, React Query tietää hakea tiedot uudelleen.

Käyttöliittymän palaute käyttäjille

useQuery palauttaa useita hyödyllisiä tiloja käyttöliittymän hallintaan ja palautteen antamiseen käyttäjille:

isLoading: true, kun kysely hakee tietoja ensimmäistä kertaa.
isError: true, jos kyselyn tietojen haku epäonnistui.
data: onnistuneesti haetut tiedot tai undefined.
error: virheobjekti, jos isError on true.

Näiden avulla voit näyttää latausanimaatioita tai virheilmoituksia.

"use client";
import { useQuery } from '@tanstack/react-query';
import React from 'react';

async function fetchPost(id) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  );
  if (!res.ok) throw new Error('Fetch failed');
  return res.json();
}

export default function PostDetail() {
  const postId = 2; // Example ID
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['post', postId],
    queryFn: () => fetchPost(postId),
  });

  if (isLoading) return <p>Loading post {postId}...</p>;
  if (isError) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h4>Post {data.id}</h4>
      <p>{data.title}</p>
    </div>
  );
}

Älykäs välimuistin toiminta

React Query tallentaa tiedot automaattisesti välimuistiin onnistuneen haun jälkeen. Oletusarvoisesti tietojen katsotaan olevan heti haun jälkeen "vanhentuneita", mikä tarkoittaa, että ne voidaan hakea taustalla uudelleen komponentin liittämisen yhteydessä tai ikkunan saadessa jälleen kohdistuksen.

Tämä "stale-while-revalidate"-lähestymistapa antaa käyttöliittymälle välitöntä palautetta ja päivittää tiedot tuoreisiin. Voit määrittää staleTime-arvon pitämään tiedot "tuoreina" pidempään ja estämään tarpeettomat uudelleenhaut.

Palvelimen tietojen päivittäminen

useQuery on tarkoitettu tietojen hakemiseen, kun taas useMutation on tarkoitettu palvelimella olevien tietojen luomiseen, päivittämiseen tai poistamiseen (esim. POST-, PUT- ja DELETE-pyynnöt).

Se tarjoaa mutate-funktion palvelinkutsun käynnistämiseen sekä palauttaa mutaatiolle itselleen tilat isPending (samankaltainen kuin isLoading), isError ja data. Katsotaan esimerkkiä uuden todon luomisesta:

"use client";
import { useMutation } from '@tanstack/react-query';
import React from 'react';

async function addTodo(newTodo) {
  const res = await fetch(
    'https://jsonplaceholder.typicode.com/todos',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newTodo),
    }
  );
  if (!res.ok) throw new Error('Failed to add');
  return res.json();
}

export default function AddTodo() {
  const mutation = useMutation({
    mutationFn: addTodo,
    onSuccess: (data) => alert('Added: ' + data.title),
    onError: (error) => alert('Error: ' + error.message),
  });

  const handleAdd = () => {
    mutation.mutate({ title: 'New task', completed: false });
  };

  return (
    <div>
      <button onClick={handleAdd} disabled={mutation.isPending}>
        {mutation.isPending ? 'Adding...' : 'Add Todo'}
      </button>
    </div>
  );
}

Välimuistin pitäminen ajan tasalla

Mutaation jälkeen (esimerkiksi uuden kohteen lisäämisen jälkeen) välimuistissa oleva kohdeluettelosi saattaa olla vanhentunut. Voit käyttää queryClient.invalidateQueries()-funktiota merkitsemään asiaankuuluvat kyselyt vanhentuneiksi, jolloin näiden kyselyjen tiedot haetaan uudelleen.

Näin käyttöliittymäsi näyttää aina uusimmat palvelimella olevat tiedot. Yleensä kutsut invalidateQueries-funktiota useMutation-funktion onSuccess-takaisinkutsussa.

"use client";
import { useMutation, useQueryClient } from '@tanstack/react-query';
import React from 'react';

async function createItem(newItem) {
  const res = await fetch(
    'https://jsonplaceholder.typicode.com/posts',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newItem),
    }
  );
  if (!res.ok) throw new Error('Failed to create');
  return res.json();
}

export default function CreateItemButton() {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: createItem,
    onSuccess: () => {
      // Invalidate 'items' query to refetch the list
      queryClient.invalidateQueries({ queryKey: ['items'] });
      alert('Item created and list will refetch!');
    },
  });

  const handleClick = () => {
    mutation.mutate({ title: 'New Item', body: '...' });
  };

  return (
    <button onClick={handleClick} disabled={mutation.isPending}>
      {mutation.isPending ? 'Creating...' : 'Create Item'}
    </button>
  );
}

Perusteita pidemmälle

React Query tarjoaa monia kehittyneempiä ominaisuuksia suorituskykyisten ja käyttäjäystävällisten tietokokemusten rakentamiseen:

Optimistiset päivitykset: Päivitä käyttöliittymä ennen palvelimen vastausta saadaksesi välitöntä palautetta.
Sivutus / Infinite Queries: Lataa suuret tietomäärät tehokkaasti.
Riippuvaiset kyselyt: Hae tietoja toisen kyselyn tulosten perusteella.
Query Devtools: Selainlaajennus välimuistin ja kyselyjen tarkasteluun.

Kyselyhookkien testi

Olet oppinut käyttämään useQuery- ja useMutation-hookkeja.

Mitkä seuraavista React Query -hookkeja koskevista väitteistä ovat TOSIA?

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa tutustuimme tehokkaaseen palvelintilan hallintaan tarkoitettuun kirjastoon React Query (TanStack Query). Opit seuraavat asiat:

QueryClientProvider-komponentin määrittäminen.
Tietojen hakeminen useQuery-hookilla ja kyselyavaimilla.
Lataus- ja virhetilojen käsittely paremman käyttökokemuksen saavuttamiseksi.
Palvelimella olevien tietojen muuttaminen useMutation-hookilla.
Välimuistin pitäminen ajan tasalla mitätöimällä kyselyt mutaatioiden jälkeen.

React Query yksinkertaistaa huomattavasti tietojen hakemista ja synkronointia, mikä tekee Next.js-sovelluksistasi nopeampia ja luotettavampia!

Aloita maksutta

Opi TypeScript 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: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”React Query palvelintilan hallintaan” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -täyden pinon verkkosovellukset-oppimispolun 3 oppituntia, myös oppitunnin “React Query palvelintilan hallintaan”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”React Query palvelintilan hallintaan”?

Hallitkaa palvelinpuolen tietojen hakua, välimuistia ja synkronointia React Queryn (TanStack Query) avulla. Harjoittelet Next.js 15 -täyden pinon verkkosovellukset-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -täyden pinon verkkosovellukset-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -täyden pinon verkkosovellukset-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 Query palvelintilan hallintaan”-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ä Next.js 15 -täyden pinon verkkosovellukset-oppitunnilla?

Kyllä. Jokainen Next.js 15 -täyden pinon verkkosovellukset-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 Query palvelintilan hallintaan
Asiakaspuolen tila Zustandilla/Jotaiilla
Palvelinpuolen välimuististrategiat
Optimistiset päivitykset ja välimuistin mitätöinti

← Takaisin: Next.js 15 -täyden pinon verkkosovellukset