Next.js 15-fullstackwebapps · Lektion

React Query til server-state

Håndtér datahentning, caching og synkronisering på serversiden med React Query (TanStack Query).

Lektion 1 af 412 trin

React Query til server-state er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Mød React Query

React Query, der nu er kendt som TanStack Query, er et effektivt bibliotek til håndtering af tilstand på serversiden i dine applikationer.

Det hjælper dig med nemt at hente, cachelagre, synkronisere og opdatere data i dine React- og Next.js-apps. Tænk på det som dit datalag, der håndterer kompleksiteten ved serverdata for dig.

Fordele ved TanStack Query

React Query løser mange almindelige udfordringer ved datahentning, så din app føles hurtigere og reagerer bedre:

Cachelagring: Gemmer hentede data for at forhindre unødvendige forespørgsler.
Genvalidering: Opdaterer automatisk forældede data i baggrunden.
Indlæsningstilstande: Giver tydelige indikatorer for status for datahentningen.
Fejlhåndtering: Gør det enklere at håndtere og vise fejl ved datahentning.
Ydeevne: Reducerer netværksforespørgsler og forbedrer brugeroplevelsen.

Indledende opsætning: Provider

For at bruge React Query skal du først opsætte en QueryClient og give den til din app. Det gøres typisk i roden af din applikation, hvor dine komponenter indpakkes i QueryClientProvider.

Sådan kan du opsætte klienten og provideren i en Next.js-app:

/* 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>
  );
}

Din første datahentning

useQuery-hooket er kernen i datahentning. Det modtager to primære argumenter: en unik forespørgselsnøgle og en asynkron forespørgselsfunktion.

Forespørgselsnøglen identificerer dine data i cachen. Forespørgselsfunktionen henter dem. Prøv at køre dette enkle eksempel, der henter en bruger:

"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>
  );
}

Forespørgselsnøglernes styrke

Forespørgselsnøgler er afgørende! De fungerer som unikke id'er for dine cachelagrede data. React Query bruger dem til at identificere, hente igen og ugyldiggøre bestemte forespørgsler.

Nøgler kan være simple strenge (f.eks. 'todos') eller arrays.
Arrays er gode til at videregive afhængigheder eller parametre, f.eks. ['todos', { status: 'active' }].
Når elementerne i en nøgles array ændres, ved React Query, at dataene skal hentes igen.

Brugerfeedback i brugergrænsefladen

useQuery returnerer flere nyttige tilstande, som du kan bruge til at styre din brugergrænseflade og give brugerne feedback:

isLoading: true, når forespørgslen henter data for første gang.
isError: true, hvis forespørgslen ikke kunne hente data.
data: De data, der blev hentet, eller undefined.
error: Fejlobjektet, hvis isError er true.

Det giver dig mulighed for at vise indlæsningsanimationer eller fejlmeddelelser.

"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>
  );
}

Intelligent cacheadfærd

React Query gemmer automatisk data i cachen efter en vellykket hentning. Som standard betragtes data som "forældede" umiddelbart efter hentningen. Det betyder, at de muligvis hentes igen i baggrunden, når komponenten monteres, eller når vinduet får fokus igen.

Denne "forældet-mens-nyvalidering"-tilgang giver øjeblikkelig feedback i brugergrænsefladen med opdateringer til de nyeste data. Du kan konfigurere staleTime for at holde data "friske" i længere tid og dermed undgå unødvendige nye hentninger.

Opdatering af data på serveren

Mens useQuery bruges til at hente data, bruges useMutation til at oprette, opdatere eller slette data på serveren (f.eks. POST-, PUT- og DELETE-forespørgsler).

Den giver en mutate-funktion, som udløser serverkaldet, og returnerer også isPending (svarer til isLoading), isError og data for selve ændringen. Lad os se et eksempel på oprettelse af en ny todo:

"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>
  );
}

Hold cachen opdateret

Efter en ændring (f.eks. når du tilføjer et nyt element) kan din cachelagrede liste over elementer være forældet. Du kan bruge queryClient.invalidateQueries() til at markere relevante forespørgsler som forældede, hvilket udløser en ny hentning af disse forespørgsler.

Det sikrer, at din brugergrænseflade altid afspejler de nyeste data fra serveren. Du kalder typisk invalidateQueries i onSuccess-tilbagekaldet for useMutation.

"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>
  );
}

Ud over det grundlæggende

React Query tilbyder mange flere avancerede funktioner til at skabe effektive og brugervenlige dataoplevelser:

Optimistiske opdateringer: Opdater brugergrænsefladen, før serveren svarer, så brugeren får øjeblikkelig feedback.
Sideinddeling/uendelige forespørgsler: Indlæs store datasæt effektivt.
Afhængige forespørgsler: Hent data baseret på resultaterne fra en anden forespørgsel.
Forespørgselsværktøjer til udviklere: En browserudvidelse til at inspicere cachen og forespørgslerne.

Kontrol af forespørgselshooks

Du har lært om useQuery og useMutation.

Hvilke af følgende udsagn om React Query-hooks er SANDE?

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion udforskede vi React Query (TanStack Query), et effektivt bibliotek til håndtering af tilstand på serveren. Du lærte, hvordan du kan:

Opsætte QueryClientProvider.
Hente data med useQuery-hooket og forespørgselsnøgler.
Håndtere indlæsnings- og fejltilstande for at give en bedre brugeroplevelse.
Ændre data på serveren med useMutation.
Holde cachen opdateret ved at ugyldiggøre forespørgsler efter ændringer.

React Query gør datahentning og -synkronisering betydeligt enklere, så dine Next.js-apps bliver hurtigere og mere robuste!

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “React Query til server-state” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “React Query til server-state”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “React Query til server-state”?

Håndtér datahentning, caching og synkronisering på serversiden med React Query (TanStack Query). Du øver dig i Next.js 15-fullstackwebapps med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Next.js 15-fullstackwebapps?

Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “React Query til server-state”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Next.js 15-fullstackwebapps-lektion?

Ja. Alle Next.js 15-fullstackwebapps-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

React Query til server-state
State på klientsiden med Zustand/Jotai
Strategier til caching på serversiden
Optimistiske opdateringer og cache-invalidéring

← Tilbage til Next.js 15-fullstackwebapps