Fullstackwebapps met Next.js 15 · Les

React Query voor serverstate

Beheer het ophalen, cachen en synchroniseren van gegevens aan de serverzijde met React Query (TanStack Query).

Les 1 van 412 stappen

React Query voor serverstate is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Maak kennis met React Query

React Query, tegenwoordig bekend als TanStack Query, is een krachtige bibliotheek voor het beheren van status aan de serverzijde in je toepassingen.

De bibliotheek helpt je moeiteloos gegevens op te halen, te cachen, te synchroniseren en bij te werken in je React- en Next.js-apps. Zie het als je gegevenslaag, die de complexiteit van servergegevens voor je afhandelt.

Voordelen van TanStack Query

React Query lost veelvoorkomende uitdagingen bij het ophalen van gegevens op, waardoor je app sneller en responsiever aanvoelt:

Caching: slaat opgehaalde gegevens op om onnodige verzoeken te voorkomen.
Hervalidering: ververst verouderde gegevens automatisch op de achtergrond.
Laadstatussen: geeft duidelijke aanwijzingen over de status van het ophalen van gegevens.
Foutafhandeling: vereenvoudigt het beheren en weergeven van fouten bij het ophalen.
Prestaties: vermindert het aantal netwerkverzoeken en verbetert de gebruikerservaring.

Eerste configuratie: provider

Om React Query te gebruiken, moet je eerst een QueryClient instellen en aan je app aanbieden. Dit gebeurt meestal in de hoofdmap van je toepassing, waarbij je componenten omwikkelt met QueryClientProvider.

Zo kun je de client en provider instellen in een 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>
  );
}

Je eerste gegevens ophalen

De hook useQuery vormt de kern voor het ophalen van gegevens. De hook accepteert twee hoofdargumenten: een unieke querysleutel en een asynchrone queryfunctie.

De querysleutel identificeert je gegevens in de cache. De queryfunctie haalt de gegevens daadwerkelijk op. Probeer dit eenvoudige voorbeeld uit, waarin een gebruiker wordt opgehaald:

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

De kracht van querysleutels

Query-sleutels zijn cruciaal! Ze zijn als unieke ID's voor je gegevens in de cache. React Query gebruikt ze om specifieke queries te identificeren, opnieuw op te halen en ongeldig te maken.

Sleutels kunnen eenvoudige tekenreeksen zijn (bijvoorbeeld 'todos') of arrays.
Arrays zijn handig om afhankelijkheden of parameters door te geven, zoals ['todos', { status: 'active' }].
Wanneer de elementen van de array van een sleutel veranderen, weet React Query dat de gegevens opnieuw moeten worden opgehaald.

UI-feedback voor gebruikers

useQuery geeft verschillende handige statussen terug waarmee je je UI kunt beheren en gebruikers feedback kunt geven:

isLoading: true wanneer de query voor het eerst gegevens ophaalt.
isError: true als de query de gegevens niet kon ophalen.
data: De succesvol opgehaalde gegevens, of undefined.
error: Het foutobject als isError true is.

Hiermee kun je laadanimaties of foutmeldingen tonen.

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

Slim cachegedrag

React Query slaat gegevens automatisch op in de cache nadat ze succesvol zijn opgehaald. Standaard worden gegevens direct na het ophalen als "verouderd" beschouwd. Dat betekent dat ze op de achtergrond opnieuw kunnen worden opgehaald wanneer de component wordt gemonteerd of het venster opnieuw de focus krijgt.

Deze aanpak van "verouderd blijven terwijl opnieuw valideren" zorgt voor directe UI-feedback met bijgewerkte gegevens. Je kunt staleTime instellen om gegevens langer "actueel" te houden en onnodig opnieuw ophalen te voorkomen.

Gegevens op de server bijwerken

Waar useQuery bedoeld is voor het ophalen van gegevens, gebruik je useMutation om gegevens op de server te maken, bij te werken of te verwijderen (bijvoorbeeld met POST-, PUT- en DELETE-verzoeken).

Deze functie biedt een mutate-functie om de serveraanroep te starten en geeft ook isPending (vergelijkbaar met isLoading), isError en data terug voor de mutatie zelf. Bekijk een voorbeeld waarin we een nieuwe todo maken:

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

De cache actueel houden

Na een mutatie (bijvoorbeeld het toevoegen van een nieuw item) kan je lijst met items in de cache verouderd zijn. Je kunt queryClient.invalidateQueries() gebruiken om relevante queries als verouderd te markeren. Daardoor worden die queries opnieuw opgehaald.

Zo blijft je UI altijd de nieuwste gegevens van de server tonen. Meestal roep je invalidateQueries aan in de onSuccess-callback van 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>
  );
}

Verder dan de basis

React Query biedt nog veel meer geavanceerde functies om zeer performante en gebruiksvriendelijke gegevenservaringen te bouwen:

Optimistische updates: Werk de UI bij voordat de server reageert, zodat gebruikers direct feedback krijgen.
Paginering/oneindige queries: Laad grote gegevensverzamelingen efficiënt.
Afhankelijke queries: Haal gegevens op op basis van de resultaten van een andere query.
Query Devtools: Een browserextensie om de cache en queries te inspecteren.

Controle van query-hooks

Je hebt geleerd over useQuery en useMutation.

Welke van de volgende uitspraken over React Query-hooks zijn WAAR?

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les hebben we React Query (TanStack Query) verkend, een krachtige bibliotheek voor het beheren van serverstatus. Je hebt geleerd hoe je:

De QueryClientProvider instelt.
Gegevens ophaalt met de useQuery-hook en query-sleutels.
Laad- en foutstatussen beheert voor een betere gebruikerservaring.
Gegevens op de server wijzigt met useMutation.
Je cache actueel houdt door queries na mutaties ongeldig te maken.

React Query maakt het ophalen en synchroniseren van gegevens aanzienlijk eenvoudiger, waardoor je Next.js-apps sneller en robuuster worden!

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “React Query voor serverstate” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “React Query voor serverstate”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Wat leer ik in “React Query voor serverstate”?

Beheer het ophalen, cachen en synchroniseren van gegevens aan de serverzijde met React Query (TanStack Query). Je oefent met Fullstackwebapps met Next.js 15 door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackwebapps met Next.js 15 te beginnen?

Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “React Query voor serverstate”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackwebapps met Next.js 15?

Ja. Elke les over Fullstackwebapps met Next.js 15 bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

React Query voor serverstate
Clientstate met Zustand/Jotai
Strategieën voor caching aan de serverzijde
Optimistische updates en cache-invalidatie

← Terug naar Fullstackwebapps met Next.js 15