React Academy · leksjon

RTK Query: Endpoints og automatisk caching

Definer query- og mutation-endpoints med createApi, og la RTK Query håndtere caching.

Leksjon 3 av 413 trinn

RTK Query: Endpoints og automatisk caching er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal du definere query- og mutation-endepunkter med RTK Querys createApi og la det håndtere caching, loading-tilstander og datahenting automatisk.

Hva er RTK Query?

RTK Query er et lag for datahenting og caching som er innebygd i Redux Toolkit. Det fjerner behovet for manuell håndtering av loading- og error-state, dedupliserer forespørsler og cacher svar basert på endepunkt og argument.

Opprette et API med createApi

Kall createApi() med en reducerPath, en baseQuery og endpoints. Resultatet inkluderer genererte React-hooks.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUser: builder.query({ query: (id) => '/users/' + id }),
    getUsers: builder.query({ query: () => '/users' }),
  }),
});

export const { useGetUserQuery, useGetUsersQuery } = userApi;

Legge API-et til i storet

Legg den genererte reduceren og middleware til i configureStore. Middleware-en håndterer cache-livssyklus, ugyldiggjøring og nye forespørsler.

import { configureStore } from '@reduxjs/toolkit';
import { userApi } from './userApi';

export const store = configureStore({
  reducer: { [userApi.reducerPath]: userApi.reducer },
  middleware: (gDM) => gDM().concat(userApi.middleware),
});

Bruke en query-hook

Kall den genererte hook-en i en komponent. Den returnerer data, isLoading, isError og refetch. Data caches etter argument — den samme hook-en med det samme argumentet returnerer cachede data umiddelbart.

function UserCard({ id }) {
  const { data, isLoading, isError } = useGetUserQuery(id);
  if (isLoading) return <Spinner />;
  if (isError) return <p>Error</p>;
  return <p>{data.name}</p>;
}

Automatisk deduplisering

Hvis to komponenter monteres samtidig og kaller useGetUsersQuery(), sender RTK Query bare én nettverksforespørsel og deler svaret mellom begge komponentene.

Cache-TTL med keepUnusedDataFor

Bestem hvor lenge cachede data skal bli værende i storet etter at alle abonnentene avmonteres. Standardverdien er 60 sekunder. Angi dette per endepunkt.

endpoints: (builder) => ({
  getUser: builder.query({
    query: id => '/users/' + id,
    keepUnusedDataFor: 300, // 5 minutes
  }),
})

Polling av sanntidsdata

Send `pollingInterval` til hook-kallet for å hente data på nytt automatisk hvert N. millisekund. Nyttig for dashbord og sanntidsstrømmer.

const { data } = useGetStatsQuery(undefined, {
  pollingInterval: 5000, // refetch every 5 seconds
});

Query-argumenter og hopping over forespørsler

Send undefined, eller bruk alternativet `skip` for å hoppe over en query betinget. Dette er nyttig når nødvendige ID-er ikke er tilgjengelige ennå.

const { data } = useGetUserQuery(userId, { skip: !userId });

Transformere svar

Bruk `transformResponse` for å omforme API-svaret før det caches. Dette holder komponentene ryddige — de mottar en bearbeidet struktur, ikke det rå API-formatet.

getUsers: builder.query({
  query: () => '/users',
  transformResponse: (raw) => raw.data.users,
})

Hurtigsjekk

Hva skjer hvis to komponenter kaller den samme RTK Query-hook-en med det samme argumentet samtidig?

Besvar den i den interaktive leksjonen

Oppsummering

createApi definerer endepunkter og genererer typede hooks. Legg reduceren og middleware-en til i storet. Query-hooks returnerer data, isLoading og isError. Svar caches og dedupliseres automatisk.

Neste

Neste leksjon: **Optimistic Updates & Cache Invalidation** — du skal oppdatere brukergrensesnittet umiddelbart ved en mutation og ugyldiggjøre cachede data med tags.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «RTK Query: Endpoints og automatisk caching» gratis?

Ja – hele teksten i «RTK Query: Endpoints og automatisk caching» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «RTK Query: Endpoints og automatisk caching»?

Definer query- og mutation-endpoints med createApi, og la RTK Query håndtere caching. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «RTK Query: Endpoints og automatisk caching»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Redux Toolkit-slices og createSlice
Asynkron logikk med createAsyncThunk
RTK Query: Endpoints og automatisk caching
Optimistiske oppdateringer og ugyldiggjøring av cache

← Tilbake til React Academy