Wzorce optymistyczne z React Query i Zustand

Hook useMutation biblioteki React Query zapewnia wbudowaną infrastrukturę do optymistycznych aktualizacji za pomocą trzech wywołań zwrotnych cyklu życia: onMutate (wywoływane przed mutacją, zwraca obiekt context), onError (wywoływane po niepowodzeniu, otrzymuje context) oraz onSettled (wywoływane po powodzeniu lub niepowodzeniu). Ta struktura została zaprojektowana specjalnie z myślą o wzorcach optymistycznych.

W onMutate wykonaj trzy kroki: najpierw anuluj wszystkie trwające zapytania dotyczące danych, których dotyczy zmiana (await queryClient.cancelQueries({ queryKey })), następnie utwórz migawkę bieżącej pamięci podręcznej (queryClient.getQueryData(queryKey)), a na końcu zastosuj optymistyczną aktualizację w pamięci podręcznej (queryClient.setQueryData(queryKey, updater)). Zwróć migawkę jako context.

Wywołanie zwrotne onError otrzymuje błąd, zmienne mutacji oraz context zwrócony z onMutate. Użyj context do wycofania zmian: queryClient.setQueryData(queryKey, context.previousData). Context jest łącznikiem między migawką utworzoną w onMutate a wycofaniem zmian w onError.

Wywołanie zwrotne onSettled jest uruchamiane niezależnie od powodzenia lub niepowodzenia. Użyj go do ponownego pobrania zapytania i synchronizacji ze stanem serwera: queryClient.invalidateQueries({ queryKey }). Dzięki temu po każdej mutacji — niezależnie od tego, czy zakończyła się powodzeniem, czy niepowodzeniem — stan ostatecznie zbiegnie się z rzeczywistym stanem serwera.

Praktyczny przykład to przełączanie stanu ukończenia todo. W onMutate utwórz migawkę listy todo, a następnie zaktualizuj konkretne todo w pamięci podręcznej. W onError przywróć migawkę z context. W onSettled unieważnij zapytanie dotyczące todo, aby ponownie pobrać dane. Użytkownik natychmiast widzi zmianę, a synchronizacja z serwerem odbywa się w tle.

W magazynie Zustand optymistyczne aktualizacje są proste: utwórz akcję updateItem(id, changes), która natychmiast aktualizuje element w magazynie, a następnie wywołuje API. Jeśli API zakończy się niepowodzeniem, wywołaj inną akcję revertItem(id, previousState). Synchroniczne aktualizacje stanu w Zustand sprawiają, że krok optymistyczny jest natychmiastowy.

Podczas optymistycznej aktualizacji głęboko zagnieżdżonego stanu Zustand użyj funkcji produce biblioteki Immer, aby uzyskać czytelną składnię mutacji: set(produce(state => { state.items[id] = { ...state.items[id], ...changes } })). Immer obsługuje niezmienne aktualizacje za pomocą składni mutującej, dzięki czemu złożone zmiany zagnieżdżonego stanu są czytelne i bezpieczne.

React 19 wprowadził wbudowany hook useOptimistic(state, updateFn) do obsługi optymistycznych aktualizacji w ramach Server Actions. const [optimisticState, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]). Wywołanie addOptimistic(newItem) natychmiast aktualizuje interfejs, podczas gdy akcja serwera jest wykonywana asynchronicznie.

useOptimistic automatycznie obsługuje wycofywanie zmian. Po zakończeniu Server Action — powodzeniem lub błędem — React przywraca stan optymistyczny i stosuje rzeczywisty stan z serwera. Nie trzeba pisać ręcznej logiki wycofywania zmian, ponieważ React zarządza cyklem życia optymistycznej aktualizacji w ramach granicy Suspense akcji.

Ręczne optymistyczne aktualizacje zapewniają pełną kontrolę, ale wymagają dodatkowego kodu. React Query onMutate/onError/onSettled integruje się z pamięcią podręczną zapytań i automatycznie synchronizuje dane. useOptimistic jest najprostszym rozwiązaniem dla Server Actions, ale wymaga React 19 i architektury opartej na akcjach serwera. Wybierz rozwiązanie odpowiednie dla warstwy danych: ręczne aktualizacje dla prostego stanu lokalnego, React Query dla interfejsów REST API, a useOptimistic dla RSC/Server Actions.

Wybierając wzorzec optymistyczny, uwzględnij swoją architekturę. Jeśli korzystasz z React Query w całej aplikacji, wzorzec onMutate jest spójny i uwzględnia pamięć podręczną. Jeśli używasz Zustand do zarządzania stanem globalnym, naturalnie pasuje do niego wzorzec oparty na akcjach. Jeśli korzystasz z React 19 i Server Actions, useOptimistic jest idiomatycznym wyborem. Łączenie wzorców w jednej aplikacji jest powszechne i dopuszczalne.

Co powinno zwracać wywołanie zwrotne onMutate w React Query, aby umożliwić wycofanie zmian w onError?

React Query useMutation korzysta z onMutate (anulowanie zapytań, utworzenie migawki, zastosowanie optymistycznej aktualizacji i zwrócenie context), onError (przywrócenie migawki z context) oraz onSettled (unieważnienie zapytania w celu ponownego pobrania danych). Optymistyczne aktualizacje w Zustand natychmiast wywołują akcję stanu, a następnie API, i wycofują zmiany w razie niepowodzenia. React 19 useOptimistic zapewnia automatyczne wycofywanie zmian w ramach Server Actions. Wybierz wzorzec pasujący do architektury warstwy danych.