0Pricing
React Academy · Lekcja

Optymistyczne aktualizacje i unieważnianie cache

Natychmiastowa aktualizacja interfejsu podczas mutacji oraz unieważnianie danych w cache za pomocą tagów.

Optymistyczne aktualizacje i unieważnianie cache to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Wprowadzenie

W tej lekcji nauczysz się tworzyć endpointy mutacji w RTK Query, natychmiast aktualizować interfejs za pomocą optymistycznych aktualizacji oraz unieważniać nieaktualne wpisy w cache za pomocą tagów.

Endpointy mutacji

Zdefiniuj mutacje za pomocą builder.mutation(). Mutacje modyfikują dane na serwerze (POST, PUT, DELETE) i zwracają hook useMutation.
export const userApi = createApi({
  /* ... */
  endpoints: (builder) => ({
    updateUser: builder.mutation({
      query: ({ id, ...body }) => ({
        url: '/users/' + id,
        method: 'PUT',
        body,
      }),
    }),
  }),
});

Używanie hooka mutacji

Wyodrębnij [trigger, result] z hooka mutacji. Wywołaj trigger() z argumentem mutacji. result zawiera isLoading, isSuccess i isError.
const [updateUser, { isLoading }] = useUpdateUserMutation();

const handleSave = async () => {
  await updateUser({ id: 1, name: 'Alice' });
};

Tagi cache’a do unieważniania

Tagi łączą dane zapytań w cache z mutacjami. Zdefiniuj `providesTags` dla zapytań oraz `invalidatesTags` dla mutacji. Po uruchomieniu mutacji RTK Query automatycznie ponownie pobierze dane ze wszystkich zapytań, które dostarczyły unieważnione tagi.
endpoints: (builder) => ({
  getUsers: builder.query({
    query: () => '/users',
    providesTags: ['User'],
  }),
  deleteUser: builder.mutation({
    query: (id) => ({ url: '/users/' + id, method: 'DELETE' }),
    invalidatesTags: ['User'],
  }),
})

Precyzyjne unieważnianie tagów

Używaj obiektów tagów z id, aby precyzyjnie unieważniać dane. Podaj tag konkretnego użytkownika w getUser i unieważniaj tylko cache tego użytkownika w updateUser.
providesTags: (result, error, id) => [{ type: 'User', id }],
invalidatesTags: (result, error, { id }) => [{ type: 'User', id }]

Optymistyczne aktualizacje z onQueryStarted

Użyj onQueryStarted w mutacji, aby natychmiast zaktualizować cache przed odpowiedzią serwera, a następnie wycofać zmianę, jeśli mutacja się nie powiedzie.
updateUser: builder.mutation({
  query: (user) => ({ url: '/users/' + user.id, method: 'PUT', body: user }),
  async onQueryStarted(user, { dispatch, queryFulfilled }) {
    const patch = dispatch(
      userApi.util.updateQueryData('getUser', user.id, draft => {
        Object.assign(draft, user);
      })
    );
    try { await queryFulfilled; }
    catch { patch.undo(); } // roll back on error
  },
})

Unieważnianie wszystkich instancji typu tagu

Użycie `{ type: 'User', id: 'LIST' }` jako tagu dla zapytań zwracających listę pozwala unieważnić całą listę bez unieważniania poszczególnych wpisów użytkowników.
providesTags: result =>
  result ? [
    ...result.map(({ id }) => ({ type: 'User', id })),
    { type: 'User', id: 'LIST' },
  ] : [{ type: 'User', id: 'LIST' }]

Ręczne unieważnianie cache’a

Programowo unieważniaj określone tagi za pomocą dispatch(api.util.invalidateTags(['User'])). Jest to przydatne w procedurach obsługi zdarzeń znajdujących się poza komponentami.
dispatch(userApi.util.invalidateTags(['User']));

Aktualizacje pesymistyczne a optymistyczne

Optymistyczna: aktualizuje cache przed odpowiedzią serwera (interfejs reaguje natychmiast, a w razie błędu zmiana jest wycofywana). Pesymistyczna: czeka na serwer, a dopiero potem aktualizuje dane (jest bezpieczniejsza, ale wolniejsza). Wybierz podejście zależnie od ryzyka niepowodzenia mutacji.

Kiedy używać tagów, a kiedy ręcznego ponownego pobierania

Używaj tagów, gdy dokładnie wiesz, które zapytania należy unieważnić. Użyj refetch() z hooka zapytania do jednorazowego ręcznego odświeżenia. Tagi są bardziej automatyczne i skalowalne w przypadku dużych interfejsów API.

Szybkie sprawdzenie

Co w RTK Query robi invalidatesTags w endpoincie mutacji?

Podsumowanie

Definiuj mutacje za pomocą builder.mutation. Używaj providesTags dla zapytań i invalidatesTags dla mutacji, aby automatycznie ponownie pobierać dane. Używaj onQueryStarted wraz z updateQueryData do optymistycznych aktualizacji oraz undo() do wycofywania zmian.

Ukończenie kursu

Gratulacje! Ukończono kurs **Redux Toolkit & RTK Query**. Można teraz tworzyć slice’y Redux, obsługiwać logikę asynchroniczną za pomocą createAsyncThunk oraz zarządzać stanem serwera dzięki cache’owaniu i optymistycznym aktualizacjom RTK Query.

Często zadawane pytania

Czy lekcja „Optymistyczne aktualizacje i unieważnianie cache” jest bezpłatna?

Tak — pełny tekst „Optymistyczne aktualizacje i unieważnianie cache” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Optymistyczne aktualizacje i unieważnianie cache”?

Natychmiastowa aktualizacja interfejsu podczas mutacji oraz unieważnianie danych w cache za pomocą tagów. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Optymistyczne aktualizacje i unieważnianie cache”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Slice'y Redux Toolkit i createSlice
  2. Logika asynchroniczna z createAsyncThunk
  3. RTK Query: endpointy i automatyczne buforowanie
  4. Optymistyczne aktualizacje i unieważnianie cache
← Powrót do React Academy