React Academy · Oppitunti

RTK Query: endpointit ja automaattinen välimuisti

Määritelkää query- ja mutation-endpointit createApilla ja antakaa RTK Queryn hallita välimuistia.

Oppitunti 3/413 vaihetta

RTK Query: endpointit ja automaattinen välimuisti on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tällä oppitunnilla määrittelette kysely- ja mutaatioendpointit RTK Queryn createApi-funktiolla ja annatte sen hallita automaattisesti välimuistia, lataustiloja ja tietojen hakemista.

Mikä RTK Query on?

RTK Query on Redux Toolkitiin sisäänrakennettu tietojen haku- ja välimuistikerros. Se poistaa manuaalisen loading- ja error-tilojen hallinnan tarpeen, yhdistää päällekkäiset pyynnöt ja tallentaa vastaukset välimuistiin endpointin ja argumentin perusteella.

APIn luominen createApi-funktiolla

Kutsukaa createApi()-funktiota ja antakaa sille reducerPath, baseQuery ja endpoints. Tuloksena saatte muun muassa automaattisesti luodut React-hookit.

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;

APIn lisääminen storeen

Lisätkää automaattisesti luotu reducer ja middleware configureStoreen. Middleware hallitsee välimuistin elinkaarta, mitätöintiä ja uudelleenhakua.

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

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

Query-hookin käyttäminen

Kutsukaa automaattisesti luotua hookia komponentissa. Se palauttaa data-, isLoading-, isError- ja refetch-arvot. Data tallennetaan välimuistiin argumentin perusteella — sama hook samalla argumentilla palauttaa välimuistissa olevan datan heti.

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

Automaattinen päällekkäisten pyyntöjen yhdistäminen

Jos kaksi komponenttia liitetään samanaikaisesti käyttöliittymään ja ne kutsuvat useGetUsersQuery()-hookia, RTK Query lähettää vain yhden verkkopyynnön ja jakaa vastauksen molemmille komponenteille.

Välimuistin TTL keepUnusedDataFor-asetuksella

Määrittäkää, kuinka kauan välimuistissa olevat tiedot säilyvät storessa sen jälkeen, kun kaikki tilaajat poistuvat käyttöliittymästä. Oletusarvo on 60 sekuntia. Asettakaa arvo endpoint-kohtaisesti.

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

Reaaliaikaisten tietojen pollaaminen

Välittäkää `pollingInterval` hook-kutsulle, niin tiedot haetaan automaattisesti uudelleen N millisekunnin välein. Tämä on hyödyllistä koontinäytöissä ja reaaliaikaisissa syötteissä.

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

Query-argumentit ja kyselyn ohittaminen

Välittäkää undefined tai käyttäkää `skip`-asetusta kyselyn ohittamiseen ehtojen perusteella. Tämä on hyödyllistä, kun vaadittuja tunnisteita ei ole vielä saatavilla.

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

Vastausten muuntaminen

Käyttäkää `transformResponse`-asetusta API-vastauksen muotoiluun ennen sen tallentamista välimuistiin. Näin komponentit pysyvät selkeinä — ne saavat käsitellyn tietomuodon eivätkä raakaa API-muotoa.

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

Pikatarkistus

Mitä tapahtuu, jos kaksi komponenttia kutsuu samaa RTK Query -hookia samalla argumentilla samanaikaisesti?

Vastaa interaktiivisessa oppitunnissa

Kertaus

createApi määrittää endpointit ja luo tyypitetyt hookit. Lisätkää reducer ja middleware storeen. Query-hookit palauttavat data-, isLoading- ja isError-arvot. Vastaukset tallennetaan välimuistiin ja päällekkäiset pyynnöt yhdistetään automaattisesti.

Seuraavaksi

Seuraava oppitunti: **Optimistiset päivitykset ja välimuistin mitätöinti** — päivitätte käyttöliittymän heti mutaation yhteydessä ja mitätöitte välimuistissa olevat tiedot tageilla.

Aloita maksutta

Opi React 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: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”RTK Query: endpointit ja automaattinen välimuisti” ilmainen?

Kyllä – oppitunnin ”RTK Query: endpointit ja automaattinen välimuisti” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”RTK Query: endpointit ja automaattinen välimuisti”?

Määritelkää query- ja mutation-endpointit createApilla ja antakaa RTK Queryn hallita välimuistia. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”RTK Query: endpointit ja automaattinen välimuisti”-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ä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-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

Redux Toolkitin slicet ja createSlice
Asynkroninen logiikka createAsyncThunkilla
RTK Query: endpointit ja automaattinen välimuisti
Optimistiset päivitykset ja välimuistin mitätöinti

← Takaisin: React Academy