React Native Academy · leksjon

QueryClient, QueryClientProvider og useQuery

Sett opp TanStack Query med en QueryClient, pakk appen inn i QueryClientProvider, og hent data med useQuery – i stedet for manuell henting basert på useEffect.

Leksjon 1 av 413 trinn

QueryClient, QueryClientProvider og useQuery er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva er TanStack React Query?

TanStack React Query (tidligere React Query) er et bibliotek for datahenting og hurtigbufring som administrerer servertilstand i React Native-appen din. I stedet for å administrere tilstanden for lasting, feil og data manuelt med useState og useEffect, tilbyr React Query smart hurtigbufring, henting i bakgrunnen og automatisk nytt forsøk – alt gjennom et enkelt hook-API.

Servertilstand er grunnleggende forskjellig fra grensesnittstilstand: Den ligger på en ekstern server, kan bli utdatert, må hentes på nytt, og flere komponenter kan trenge de samme dataene. React Query løser alt dette på en velprøvd måte som er utprøvd i produksjon.

// Traditional approach (before React Query):
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

// With React Query:
const { data, isLoading, error } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
});
// Same result — dramatically less code

Installere TanStack Query

Installer TanStack Query (v5) og plugin-en for vedvarende lagring som er spesifikk for React Native. Kjernepakken er @tanstack/react-query. For Expo-prosjekter kan du også ønske å installere utviklerverktøyene, men de krever et nettmiljø for visning.

React Query v5 bruker objektsyntaks for hook-alternativer (en endring som bryter med v4). Hvis du ser opplæringsmateriell som bruker posisjonsbaserte argumenter for useQuery, gjelder det v4. Denne leksjonen dekker det moderne v5-API-et.

// Install:
// npx expo install @tanstack/react-query
// npx expo install @tanstack/react-query-persist-client
// npx expo install @tanstack/async-storage-persister
// npx expo install @react-native-async-storage/async-storage

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

Konfigurere QueryClient

QueryClient er kjerneobjektet som administrerer alle hurtigbuffere, spørringer og mutasjoner. Du oppretter én instans og deler den i hele appen. Konfigurer globale standardverdier i konstruktøren til QueryClient – disse gjelder for alle spørringer med mindre de overstyres på den enkelte spørringen.

Opprett QueryClient utenfor komponenttreet (eller i en useState-initialisering), slik at den ikke opprettes på nytt ved hver gjengivelse. En QueryClient som opprettes på nytt, mister alle hurtigbufrede data.

import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,  // 5 minutes before considered stale
      gcTime: 10 * 60 * 1000,    // 10 minutes before garbage collected
      retry: 2,                   // retry failed requests twice
      refetchOnWindowFocus: false, // disable for mobile
    },
  },
});

QueryClientProvider: Gjøre klienten tilgjengelig

Pakk roten av appen inn i QueryClientProvider, og send QueryClient-instansen som client-prop. Alle komponenter i provideren kan deretter få tilgang til QueryClient og bruke React Query-hookene. Dette ligner på React Redux sin Provider eller React Navigation sin NavigationContainer.

Plasser QueryClientProvider ved roten av appen, slik at navigasjon og andre providere pakkes inn. Rekkefølgen sammen med andre providere (som Redux Provider eller AuthProvider) har vanligvis ingen betydning, med mindre de avhenger av hverandre.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 5 * 60 * 1000 } },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </QueryClientProvider>
  );
}

useQuery: Hente data

useQuery er den primære hooken for å hente og hurtigbufre serverdata. Den tar et konfigurasjonsobjekt med to obligatoriske felt: queryKey (en unik identifikator for disse dataene) og queryFn (den asynkrone funksjonen som henter dataene). React Query kaller queryFn automatisk og hurtigbufrer resultatet.

Hooken returnerer data, isLoading, isFetching, error og mange andre tilstandsverdier. isLoading er true ved første lasting, mens isFetching er true hver gang data hentes, også ved henting i bakgrunnen.

import { useQuery } from '@tanstack/react-query';

async function fetchPosts() {
  const response = await fetch('https://api.example.com/posts');
  if (!response.ok) throw new Error('Network error');
  return response.json();
}

function PostsScreen() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });

  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error.message}</Text>;
  return <FlatList data={data} renderItem={...} />;
}

Spørringsnøkler: Hurtigbufferens identitet

queryKey er måten React Query identifiserer og gjenbruker hurtigbufrede data på. Bruk en tabell som inkluderer datatypen og eventuelle variabler som henting avhenger av. Spørringer med samme nøkkel deler hurtigbufrede data – flere komponenter som bruker ['posts'], henter bare én gang og deler det samme dataobjektet.

Inkluder dynamiske parametere i nøkkelarrayet, slik at ulike parametersammensetninger får separate oppføringer i hurtigbufferet. For eksempel hurtigbufres hver brukers data separat med ['user', userId]. Nøkler sammenlignes etter verdi (dyp likhet), ikke referanse.

// Static key:
const { data: posts } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchAllPosts,
});

// Dynamic key — separate cache per user:
const { data: user } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});

// Compound key with filters:
const { data: filteredPosts } = useQuery({
  queryKey: ['posts', { status: 'published', category: 'tech' }],
  queryFn: () => fetchPosts({ status: 'published', category: 'tech' }),
});

staleTime og cacheTime

staleTime bestemmer hvor lenge hurtigbufrede data regnes som ferske før React Query henter oppdaterte data i bakgrunnen. I dette tidsrommet returneres den hurtigbufrede verdien umiddelbart uten nettverksforespørsel. Etter staleTime regnes dataene som utdaterte, og en ny henting i bakgrunnen utløses ved neste montering eller når vinduet får fokus.

gcTime (tidligere cacheTime) bestemmer hvor lenge ubrukte hurtigbufferoppføringer (uten observatører) beholdes i minnet før de samles inn. Hurtigbufferet finnes selv etter at alle komponentene som bruker det, avmonteres, helt til gcTime utløper.

const { data } = useQuery({
  queryKey: ['settings'],
  queryFn: fetchUserSettings,
  staleTime: 10 * 60 * 1000,  // fresh for 10 min, no background refetch
  gcTime: 30 * 60 * 1000,     // kept in cache for 30 min after unmount
});

// Infinity means never stale (manual invalidation only):
const { data: config } = useQuery({
  queryKey: ['app-config'],
  queryFn: fetchAppConfig,
  staleTime: Infinity,
});

Avhengige spørringer

Noen spørringer avhenger av data fra en annen spørring. Bruk alternativet enabled for å deaktivere en spørring til avhengigheten er klar. React Query kaller ikke queryFn når enabled er false, og starter automatisk å hente data når enabled blir true.

Dette erstatter kjeder med nestede useEffect, der du venter på at én henting skal fullføres før en annen starter. Mønsteret for avhengige spørringer er deklarativt og enklere å forstå.

// Fetch user first:
const { data: user } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
});

// Then fetch user's posts when user is available:
const { data: userPosts } = useQuery({
  queryKey: ['posts', user?.id],
  queryFn: () => fetchUserPosts(user.id),
  enabled: !!user, // only runs after user is fetched
});

Atferd ved nye forsøk og feilhåndtering

React Query prøver automatisk mislykkede spørringer på nytt med eksponentiell tilbakeventing. Standardinnstillingen er 3 nye forsøk. Konfigurer retry (antall) og retryDelay (ms eller funksjon) for hver spørring. Når alle nye forsøk mislykkes, fylles error-feltet ut, og isError blir true.

queryFn må kaste en feil for å signalisere at noe gikk galt — det utløser ikke nye forsøk å returnere null eller et spesielt feilobjekt. Kast alltid en feil i spørringsfunksjonen når svaret indikerer en feil (kontroller HTTP-statuskodene eksplisitt).

const { data, isError, error } = useQuery({
  queryKey: ['data'],
  queryFn: async () => {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) {
      throw new Error('Request failed: ' + res.status); // must throw!
    }
    return res.json();
  },
  retry: 3,
  retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
});

Manuell ugyldiggjøring av spørringer

Når De vet at data er endret på serveren (for eksempel etter en mutasjon), kan De ugyldiggjøre de relevante spørringene med queryClient.invalidateQueries({ queryKey: ['posts'] }). Dette markerer dataene i hurtigbufferet som foreldede og utløser en bakgrunnsforespørsel på nytt for komponenter som for øyeblikket observerer spørringen.

Ugyldiggjøring av spørringer er et av de kraftigste mønstrene i React Query — etter at De har sendt inn en ny kommentar, kan De ugyldiggjøre kommentarspørringen, så oppdateres listen automatisk. Det er ikke nødvendig å oppdatere tilstanden manuelt.

import { useQueryClient } from '@tanstack/react-query';

function PostButton() {
  const queryClient = useQueryClient();

  async function handlePost() {
    await submitPost(newPostData);
    // Invalidate posts list — triggers background refetch:
    await queryClient.invalidateQueries({ queryKey: ['posts'] });
  }
}

Bakgrunnsforespørsel ved fokus på appen

React Query kan automatisk hente foreldede data på nytt når brukeren kommer tilbake til appen fra bakgrunnen. På nettet bruker dette window focus; i React Native må De konfigurere det med focusManager og AppState. Dette holder dataene oppdaterte automatisk uten at brukeren må oppdatere manuelt.

Konfigurer fokusbehandleren én gang når appen starter. Etter konfigurasjonen vil alle foreldede spørringer automatisk hentes på nytt når brukeren går tilbake til appen, slik at brukergrensesnittet holdes oppdatert uten ekstra kode i de enkelte komponentene.

import { focusManager } from '@tanstack/react-query';
import { AppState } from 'react-native';

// At app startup (App.js or index.js):
AppState.addEventListener('change', (state) => {
  focusManager.setFocused(state === 'active');
});

// Queries with staleTime < Infinity will refetch
// automatically when app comes to foreground

Kort test

Test forståelsen Deres av konseptene innen React Native Mobile Development fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen har De lært at: QueryClient inneholder hurtigbufferet og gjøres tilgjengelig for komponenttreet via QueryClientProvider, useQuery henter og hurtigbufrer serverdata identifisert av queryKey og kaller queryFn automatisk, og staleTime styrer hvor lenge data i hurtigbufferet regnes som ferske før en bakgrunnsforespørsel utløses. Neste steg er å bruke useMutation til å endre serverdata og automatisk oppdatere relaterte spørringer.

Gratis å komme i gang

Lær deg JavaScript 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: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «QueryClient, QueryClientProvider og useQuery» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «QueryClient, QueryClientProvider og useQuery», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «QueryClient, QueryClientProvider og useQuery»?

Sett opp TanStack Query med en QueryClient, pakk appen inn i QueryClientProvider, og hent data med useQuery – i stedet for manuell henting basert på useEffect. Du øver på React Native 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 Native Academy?

Ingen tidligere erfaring er nødvendig. React Native 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 1 av 4.

Hvor lang tid tar leksjonen «QueryClient, QueryClientProvider og useQuery»?

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 Native Academy-leksjonen?

Ja. Alle React Native 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

QueryClient, QueryClientProvider og useQuery
Mutasjoner med useMutation og ugyldiggjøring av hurtigbuffer
Bevare spørringshurtigbufferet med AsyncStorage
Konfigurere bakgrunnshenting og stale time

← Tilbake til React Native Academy