Dagen inleddes med en snabb genomgång av React Router v6 följt av felsökning för jag missat att migrera <Link>-komponenterna när vi uppgraderade till v6-beta.0 i torsdags.
Därefter skapade vi en ny React-app (03-query) med lite placeholders i statisk HTML, innan vi introducerade React Query och kollade på hur den kan förenkla våra liv väldigt mycket då den inte bara hjälper oss med att hämta data utan även cache:ar den, kollar om den är utgången (”stale”) eller inte och automatiskt hämtar ny data om så skulle vara fallet.
Vi såg även hur den returnerar information om query:n, t.ex. om den fortfarande körs eller om något gått fel.
Precis innan lunch så refaktorerade vi om koden för att visa info om en GitHub-profil till en egen GitHubProfile-komponent, som implementerade React Query i form av dess useQuery-hook. Vi skapade även en GitHubRepositories-komponent som med hjälp av React Query hämtar ut en GitHub-användares (publika) repositories.
Efter lunch kikade vi på hur vi kan applicera DRY-principen (Don’t Repeat Yourself) och gjorde refaktorering i flera steg så att vi till useQuery skickar in vilken GitHub-användare vi vill hämta profil/repositories från, och vi lyfte även ut funktionerna som useQuery kallar på till en egen modul (services/GitHubAPI.js).
Vi lade även in stöd för att skicka med en GitHub Access Token för att inte bli rate-limited (utan en token får vi bara skicka 60 requests per timme, men med en token kan vi skicka 5000 requests per timme).
Obs! Glöm inte hämta ut en egen Access Token från https://github.com/settings/tokens, klicka i repo > public_repo samt user > read:user, spara sedan den token som genereras i REACT_APP_GITHUB_TOKEN i .env-filen i roten av din app (skapa filen om den inte finns).
Sist men absolut inte minst kollade vi på React Query Devtools som är ett fantastiskt litet (men kraftfullt!) paket som gör att vi kan se allt som händer ”inne i” React Query, som pågående queries, om data blivit stale ännu m.m. m.m.
Länkar
React Query
https://react-query.tanstack.com/
React Query Docs
https://react-query.tanstack.com/docs/overview
React Query Devtools
https://github.com/tannerlinsley/react-query-devtools
Videos
React Query Tutorial (The Net Ninja)
Kika på video 1-4 för en snabb recap (videon länkad nedan är en spellista, klicka på länktexten under videon för att komma direkt till listan på YouTube).
Självstudier
Gå igenom det vi gjort idag och se om du hänger med – och ställ frågor imorgon om något krånglat eller känns oklart!