React Academy · Lektion

RTK Query: endpoints och automatisk cachning

Definiera query- och mutation-endpoints med createApi och låt RTK Query hantera cachningen.

Lektion 3 av 413 steg

RTK Query: endpoints och automatisk cachning är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen lär Du Dig att definiera query- och mutation-endpoints med RTK Queries createApi och låta det hantera cachelagring, loading-state och datahämtning automatiskt.

Vad är RTK Query?

RTK Query är ett lager för datahämtning och cachelagring som ingår i Redux Toolkit. Det eliminerar manuell hantering av loading- och error-state, deduplicerar requests och cachelagrar svar utifrån endpoint och argument.

Skapa ett API med createApi

Anropa createApi() med reducerPath, baseQuery och endpoints. Resultatet innehåller genererade 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;

Lägg till API:t i storet

Lägg till den genererade reducern och middleware i configureStore. Middleware hanterar cachelagringens livscykel, invalidering och omhämtning.

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

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

Använd en query-hook

Anropa den genererade hooken i en komponent. Den returnerar data, isLoading, isError och refetch. Data cachelagras utifrån argumentet — samma hook med samma argument returnerar cachelagrade data direkt.

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 deduplicering

Om två komponenter monteras samtidigt och anropar useGetUsersQuery() skickar RTK Query bara en nätverksförfrågan och delar svaret mellan båda komponenterna.

Cache-TTL med keepUnusedDataFor

Styr hur länge cachelagrade data ligger kvar i storet efter att alla prenumeranter har avmonterats. Standardvärdet är 60 sekunder. Ställ in det per endpoint.

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

Hämta live-data med polling

Skicka `pollingInterval` till hook-anropet för att automatiskt hämta data igen var N:e millisekund. Användbart för dashboards och liveflöden.

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

Query-argument och överhoppning

Skicka undefined eller använd alternativet `skip` för att villkorligt hoppa över en query. Användbart när nödvändiga ID:n ännu inte är tillgängliga.

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

Omforma svar

Använd `transformResponse` för att omforma API-svaret innan det cachelagras. Då hålls komponenterna rena — de får en bearbetad struktur i stället för API:ts råformat.

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

Snabb kontroll

Vad händer om två komponenter anropar samma RTK Query-hook med samma argument samtidigt?

Besvara frågan i den interaktiva lektionen

Sammanfattning

createApi definierar endpoints och genererar typsäkra hooks. Lägg till reducern och middleware i storet. Query-hooks returnerar data, isLoading och isError. Svar cachelagras och dedupliceras automatiskt.

Nästa steg

Nästa lektion: **Optimistiska uppdateringar och cache-invalidering** — Du kommer att uppdatera gränssnittet direkt vid en mutation och invalidera cachelagrade data med taggar.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”RTK Query: endpoints och automatisk cachning” gratis?

Ja – hela texten till ”RTK Query: endpoints och automatisk cachning” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”RTK Query: endpoints och automatisk cachning”?

Definiera query- och mutation-endpoints med createApi och låt RTK Query hantera cachningen. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”RTK Query: endpoints och automatisk cachning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Redux Toolkit-slices och createSlice
Asynkron logik med createAsyncThunk
RTK Query: endpoints och automatisk cachning
Optimistiska uppdateringar och cacheinvalidiering

← Tillbaka till React Academy