Hvor mange applikasjoner vet du om som ikke henter eller oppdaterer data? Ofte får brukeren data som er hentet fra et eller annet sted, og brukeren taster inn nye data som blir lagret. Brukeren forventer at dette skal skje raskt, men på veien kan det skje feil. Derfor må du som utvikler kjenne til datahåndtering godt.
I denne luka lærer du hands-on om hva du trenger å vite om datafetching.
Hvorfor bry deg om datafetching?
Når vi snakker om asynkron data, altså data som ikke kommer direkte fra klienten, men fra en server eller et API, møter vi flere utfordringer:
- Dataene tar tid å reise fra server og klient
- Dataene må holdes oppdaterte og konsistente
- Feil kan oppstå
Dette er komplekse utfordringer, og som krever mange linjer kode om du skal håndtere dem selv. Derfor bør du lære et verktøy som håndterer asynkron data, som TanStack Query eller useSWR. Med disse verktøyene kan du få mye funksjonalitet ut av boksen, som caching, revalidering og feilbehandling. Om du kan disse verktøyene godt, kan du lage løsninger som er mer leselige for deg, og som er mer brukervennlige for brukeren.
Workshop i datafetching
Einar Afiouni har lagd denne datafetching- workshopen, hvor du lærer hvordan du går fra grunnleggende fetch med useEffect og useState til å bruke TanStack Query (eller useSWR) til å lage mer robuste løsninger med færre linjer kode. Du får teste ut hvordan det er å implementere de viktigste funksjonalitetene, med fetching og mutering, men også lagd mer komplisert funksjonalitet, som optimistisk oppdatering.
Før du starter, er det noen kjekke ting å vite om workshopen:
- Oppgavene ligger i src/[oppgave]: Hver oppgave er delt opp i mindre deloppgaver, dokumentert som kommentarer i koden.
- Løsningsforslag ligger i branch: Oppgavene har løsningsforslag i branch, relatert til biblioteket du velger. Det er ikke en fasit, så vurder forskjellen mellom din egen løsning og løsningsforslaget.
- Hvordan ta dette videre: I tillegg til å vurdere egen løsning, se også på dokumentasjon versus egne hobbyprosjekter- eller oppdrag. Kan noen av disse verktøyene forenkle koden i egne prosjekter? Hvordan håndterer du mer kompliserte scenarioer i egne prosjekter, og hvordan ville du gjort det med verktøyet du valgte?
I workshopen kan du velge mellom å bruke TanStack Query eller useSWR. Dokumentasjonen til verktøyene finner du her:
- TanStack Query: https://tanstack.com/query/latest/docs/framework/react/overview
- useSWR: https://swr.vercel.app/
👉 For å starte workshopen, kloner du GitHub-repository, leser readme, kjører opp applikasjonen og leser av oppgavene. Workshopen finner du her: https://github.com/iernie/datafetching-workshop/tree/main
Videre lesing
- Jeg har skrevet om forskjellen mellom asynkron- og synkron data i en tidligere luke. Dette kan hjelpe deg å forstå hvorfor vi trenger et verktøy som TanStack Query: https://www.bekk.christmas/post/2024/03/alt-du-trenger-a-vite-om-klient-og-servertilstand-del-1
- TanStack Query og useSWR løser det samme problemet og er nokså like, men det er noen forskjeller. Se (en forsøkt ubiased) oversikt her: https://tanstack.com/query/v4/docs/framework/react/comparison
- I Reacts docs kan du lese om hvordan du kan fetche data med useEffect, men du må isåfall håndtere race-conditions og cleanup selv: https://react.dev/learn/you-might-not-need-an-effect#fetching-data