Vi tittade på hur vi kunde lyfta ut konfigurationen av React Query till först en egen config-modul och därefter hur vi kan använda ReactQueryConfigProvider för att förse React Query med inställningar utan att behöva importera en config-modul varje gång vi ska använda useQuery.
Därefter kollade vi på isError som är en boolean som vi kan använda istället för error för att veta om något gått fel, och även isFetching som vi kan använda för att visa en loading-spinner när React Query förnyar stale data i bakgrunden.
Som slutkläm skapade vi komponenten GlobalFetchingSpinner där vi använde hook:en useIsFetching() för visa en spinner när en query körs, utan att behöva lägga in en spinner i varje komponent som gör en query.
Precis innan lunch tog jag en kopia på 03-query appen till 04-swpedia och rensade bort lite komponenter för att få en tom app men som ändå innehöll t.ex. node-sass, Bootstrap, React Query och lite annat gottis. I sin mest basic form så hämtade den nya appen planets från SWAPI (Star Wars API) och renderade ut en lista med de 10 första planeterna.
Efter lunch lade vi till Vehicles och gjorde en väldigt grov/crude hårdkodad paginering med hjälp av en stateful page-variabel och en knapp för varje sida, och såg att det fungerade men att vi får en ”flash” av att hela sidan ersätts med ”Loading…” när vi byter till en ny sida.
För att komma runt det så implementerade vi usePaginatedQuery() som ger oss två data-properties istället för bara en, där resolvedData innehåller data från den senaste lyckade query:n, medan latestData växlar mellan att vara undefined medan en query pågår och när query:n lyckas så sätts latestData till resultatet, samtidigt som även resolvedData uppdateras med samma data.
Vad detta ger oss är att vi kan rendera data från resolvedData men implementera paginering med hjälp av latestData. Se kodexempelet i Vehicles.js.
Länkar
ReactQueryConfigProvider
https://react-query.tanstack.com/docs/api/#reactqueryconfigprovider
useIsFetching()
https://react-query.tanstack.com/docs/api/#useisfetching
Paginated Queries
https://react-query.tanstack.com/docs/guides/paginated-queries
Videos
React Query Tutorial #5 – Pagination
En implementering av usePaginatedQuery från The Net Ninja.
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!