Mutationer med useMutation og cache-invalidering

Kald mutate(variables) for at udløse mutationen. Argumentet variables sendes direkte til din mutationFn. mutate starter handlingen uden at vente — den returnerer ikke et Promise. Brug hookets callbacks onSuccess og onError til at reagere på resultatet.

Brug i stedet mutateAsync(variables), når du skal afvente resultatet i en asynkron funktion (for eksempel for at navigere efter et vellykket opslag). Pak altid mutateAsync ind i try/catch — uhåndterede afvisninger medfører fejl.

Callbacken onSuccess kører, når mutationen er gennemført. Den modtager dataene fra mutationsresultatet og de variable, der blev sendt til mutate. Brug onSuccess til at ugyldiggøre relaterede forespørgsler, vise en succesbesked, nulstille formularer eller navigere væk.

Du kan definere onSuccess på hookniveau (til logik, der altid skal anvendes) og også sende den som det andet argument til mutate(variables, { onSuccess }) for tilpasning pr. kald.

Ugyldiggørelse af cachen er processen med at markere cachelagrede forespørgsler som forældede efter en mutation, så de henter aktuelle data igen. Brug queryClient.invalidateQueries sammen med en forespørgselsnøgle. Delvist match af nøgler understøttes — hvis du ugyldiggør ['posts'], ugyldiggøres alle forespørgsler, hvis nøgle begynder med ['posts'], herunder ['posts', userId].

Ugyldiggørelsen udløser opdateringer i baggrunden for alle aktive (monterede) forespørgsler med matchende nøgler. Komponenter, der bruger disse forespørgsler, viser aktuelle data efter én netværksrundtur.

Optimistiske opdateringer opdaterer straks brugergrænsefladen, før serveren bekræfter mutationen. Hvis mutationen lykkes, bekræftes den foreløbige ændring. Hvis den mislykkes, rulles brugergrænsefladen tilbage til den tidligere tilstand. Det får interaktioner til at føles øjeblikkelige — du behøver ikke vente på serveren.

Implementér optimistiske opdateringer i onMutate: gem et øjebliksbillede af den aktuelle cache, opdatér cachen med det samme, og rul derefter tilbage i onError efter behov. React Query stiller queryClient.setQueryData til rådighed, så du manuelt kan opdatere cachen.

Brug statusfelterne for mutationen til at give passende feedback i brugergrænsefladen. isPending er true, mens mutationen er i gang — deaktivér sendeknappen, og vis en indlæsningsindikator. isSuccess er true efter gennemførelsen — vis en succesbesked. isError er true, hvis den mislykkedes — vis fejlbeskeden.

React Query nulstiller automatisk mutationsstatus efter en konfigurerbar periode angivet med gcTime. Hvis du vil nulstille den manuelt (for eksempel for at give brugeren mulighed for at prøve igen), skal du kalde funktionen reset(), som hooket returnerer.

I stedet for at ugyldiggøre og hente data igen kan du opdatere cachen direkte med mutationssvaret ved hjælp af queryClient.setQueryData. Det er mere effektivt, når serveren returnerer de opdaterede data i mutationssvaret — du kan føje dem til listen uden en ekstra netværksanmodning.

Dette mønster — at sætte cachen ud fra serverens svar i stedet for at ugyldiggøre den — sparer en netværksrundtur og er nyttigt til lister, hvor du vil tilføje det nye element med det samme.

Du kan definere globale mutationscallbacks i QueryClients defaultOptions.mutations til logning, fejlrapportering eller fornyelse af tokens, der skal gælde for alle mutationer i appen. Lokale mutationsindstillinger tilsidesætter de globale — begge kan eksistere samtidigt.

Et almindeligt anvendelsesområde er en global callback til onError, der kontrollerer, om svaret er 401 Unauthorized, og udløser et logout eller et forløb til fornyelse af tokens for alle mutationer uden at gentage denne logik i hvert enkelt useMutation-kald.

Mutationer håndterer filuploads ved at modtage FormData som de variable. mutationFn opretter et FormData-objekt og sender det med fetch ved hjælp af indholdstypen multipart/form-data. React Query håndterer indlæsnings- og fejltilstanden på samme måde som ved enhver anden mutation.

Ved store filuploads kan du følge fremdriften ved hjælp af en brugerdefineret fetch-wrapper med XHR, hvor fremdriften gemmes i en separat tilstandsvariabel, der opdateres via mønsteret onUploadProgress.

Ved arbejdsgange, der kræver flere sekventielle handlinger på serveren (for eksempel først at oprette en ordre og derefter behandle betalingen), kan du kæde mutationer ved at bruge mutateAsync sekventielt. Hver mutation kan bruge resultatet fra den foregående som sit input. Pak kæden ind i try/catch for at håndtere fejl.

Hvis et mellemliggende trin mislykkes, kan det være nødvendigt manuelt at rulle tidligere trin tilbage eller udløse kompenserende transaktioner. Design din API til atomicitet, hvor det er muligt, så fejlhåndtering på klientsiden bliver enklere.

I denne lektion har du lært, at useMutation håndterer skrivehandlinger (POST/PUT/DELETE) med tilstandene isPending, isError og isSuccess, at onSuccess er det primære sted at kalde queryClient.invalidateQueries for at opdatere relaterede cachelagrede data, og at optimistiske opdateringer via onMutate straks opdaterer cachen med et øjebliksbillede, der kan bruges til at rulle tilbage, hvis serverforespørgslen mislykkes. I næste afsnit gemmer vi React Query-cachen i AsyncStorage, så appen kan fungere offline først.