Mutacje i optymistyczne aktualizacje z SWR

Globalna funkcja mutate z swr umożliwia uruchomienie rewalidacji dla dowolnego klucza pamięci podręcznej z dowolnego miejsca w aplikacji: mutate('/api/user') powoduje ponowne pobranie danych przez wszystkie hooki useSWR('/api/user').

Należy ją zaimportować za pomocą: import { mutate } from 'swr'. Jest to przydatne do unieważniania danych po akcji na serwerze wykonanej poza komponentem, który ma bezpośredni dostęp do powiązanej funkcji mutate.

Przekazanie danych jako drugiego argumentu mutate: mutate('/api/user', updatedUser) natychmiast ustawia pamięć podręczną na updatedUser bez wykonywania żądania sieciowego. Nazywa się to czasem lokalną mutacją.

Należy dodać { revalidate: false } jako trzeci argument, aby uniemożliwić SWR ponowne pobranie danych po optymistycznej aktualizacji.

useSWRMutation służy do mutacji inicjowanych przez użytkownika (przesyłania formularzy, kliknięć przycisków), w przeciwieństwie do automatycznego pobierania. Nie wykonuje się podczas montowania, lecz dopiero po wywołaniu trigger().

Należy zaimportować z swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

Fetcher dla useSWRMutation otrzymuje (key, { arg}), gdzie arg jest wartością przekazaną do trigger(). Przykład: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Należy wywołać trigger({ title: 'New Post', content: '...' }), aby uruchomić mutację z danymi wpisu jako wartością arg.

isMutating z useSWRMutation ma wartość true, gdy żądanie mutacji jest w toku. Można użyć tej właściwości do wyłączenia przycisków przesyłania i wyświetlenia wskaźników ładowania na czas żądania, zapobiegając wielokrotnemu przesłaniu.

Zastępuje ona ręcznie zarządzaną zmienną stanu isSubmitting, którą w przeciwnym razie należałoby obsługiwać za pomocą useState.

Optymistyczna aktualizacja natychmiast stosuje w interfejsie oczekiwany rezultat, zanim serwer potwierdzi zmianę. Jeśli operacja na serwerze się powiedzie, nie trzeba robić nic więcej. Jeśli się nie powiedzie, aktualizacja zostaje wycofana do poprzedniego stanu.

Ten wzorzec sprawia, że interfejsy wydają się działać natychmiast: przycisk polubienia wygląda na kliknięty od razu, bez oczekiwania na odpowiedź POST.

Proszę użyć mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). SWR natychmiast ustawia w pamięci podręcznej wartość optimisticValue, wysyła żądanie ponownej walidacji i przywraca poprzednią wartość, jeśli żądanie zakończy się wyjątkiem.

Opcja rollbackOnError: true jest niezbędna dla poprawności działania: bez niej nieudana mutacja pozostawi w pamięci podręcznej nieaktualne optymistyczne dane.

Gdy ustawiono rollbackOnError: true, a mutacja zostanie odrzucona, SWR automatycznie przywraca pamięć podręczną do migawki wykonanej przed optymistyczną aktualizacją. Nie trzeba pisać ręcznie kodu wycofującego zmianę.

Dodatkowo należy ustawić populateCache: false, jeśli treść odpowiedzi mutacji nie odpowiada kształtowi danych używanemu przez useSWR. Zapobiega to nieprawidłowej aktualizacji pamięci podręcznej przez odpowiedź.

useSWR zwraca mutate powiązane z kluczem: const { data, mutate } = useSWR('/api/user', fetcher). To mutate automatycznie używa klucza '/api/user'; nie trzeba przekazywać go ponownie.

Mutate powiązanego z kluczem należy używać wewnątrz komponentów odpowiedzialnych za wyświetlanie danych. Mutate globalnego z swr należy używać, gdy trzeba unieważnić klucz z niepowiązanego komponentu lub funkcji narzędziowej.

useMutation w React Query ma podobny wzorzec trigger/isMutating. Najważniejsze różnice: idiomatycznym wzorcem unieważniania pamięci podręcznej w React Query jest wywołanie onSuccess z queryClient.invalidateQueries. SWR używa bezpośrednio funkcji mutate do aktualizowania pamięci podręcznej.

Oba rozwiązania obsługują optymistyczne aktualizacje i wycofywanie zmian, ale kształt API jest inny. Zespoły biegle posługujące się jednym z nich mogą szybko nauczyć się drugiego.

Po pomyślnej mutacji są trzy możliwości: ponownie pobrać dane, wywołując mutate(key), zaktualizować pamięć podręczną treścią odpowiedzi (jeśli API zwraca zaktualizowany zasób) albo połączyć oba podejścia, stosując optymistyczne aktualizacje wraz z ponowną walidacją.

W przypadku mutacji listy, na przykład dodania elementu, należy ręcznie zaktualizować pamięć podręczną, dopisując nowy element, a następnie przeprowadzić ponowną walidację w celu potwierdzenia stanu na serwerze. Pozwala to uniknąć ponownego pobierania całej listy przy zachowaniu spójności danych.

Jaką opcję należy ustawić w mutate z SWR, aby automatycznie wycofać optymistyczną aktualizację w przypadku błędu?

Globalne mutate(key) uruchamia ponowną walidację, a mutate(key, data) aktualizuje pamięć podręczną bez ponownego pobierania danych. useSWRMutation obsługuje jawnie wywoływane przez użytkownika mutacje za pomocą trigger(), stanu isMutating i obsługi extraArg. Optymistyczne aktualizacje z optimisticData i rollbackOnError: true sprawiają, że interfejsy wydają się działać natychmiast, zapewniając automatyczne odzyskiwanie po błędach.

Mutate powiązane z kluczem, zwracane przez useSWR, używa własnego klucza, natomiast globalne mutate z swr działa w dowolnym miejscu.