0Pricing
React Academy · Aula

Atualizações otimistas e invalidação do cache

Atualize a interface instantaneamente durante uma mutação e invalide dados armazenados em cache com etiquetas.

Atualizações otimistas e invalidação do cache é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você criará endpoints de mutação no RTK Query, atualizará a interface instantaneamente com atualizações otimistas e invalidará entradas desatualizadas do cache usando identificadores.

Endpoints de mutação

Defina mutações com builder.mutation(). As mutações modificam dados no servidor (POST, PUT, DELETE) e retornam um gancho useMutation.
export const userApi = createApi({
  /* ... */
  endpoints: (builder) => ({
    updateUser: builder.mutation({
      query: ({ id, ...body }) => ({
        url: '/users/' + id,
        method: 'PUT',
        body,
      }),
    }),
  }),
});

Usando um gancho de mutação

Extraia [trigger, result] do gancho de mutação. Chame trigger() com o argumento da mutação. result contém isLoading, isSuccess e isError.
const [updateUser, { isLoading }] = useUpdateUserMutation();

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

Identificadores de cache para invalidação

Os identificadores vinculam dados de consultas armazenados em cache a mutações. Defina `providesTags` nas consultas e `invalidatesTags` nas mutações. Quando uma mutação é executada, o RTK Query busca novamente automaticamente todas as consultas que forneceram os identificadores invalidados.
endpoints: (builder) => ({
  getUsers: builder.query({
    query: () => '/users',
    providesTags: ['User'],
  }),
  deleteUser: builder.mutation({
    query: (id) => ({ url: '/users/' + id, method: 'DELETE' }),
    invalidatesTags: ['User'],
  }),
})

Invalidação granular de identificadores

Use objetos de identificador com id para obter uma invalidação detalhada. Forneça o identificador do usuário específico em getUser e invalide apenas o cache desse usuário em updateUser.
providesTags: (result, error, id) => [{ type: 'User', id }],
invalidatesTags: (result, error, { id }) => [{ type: 'User', id }]

Atualizações otimistas com onQueryStarted

Use onQueryStarted em uma mutação para atualizar o cache imediatamente, antes que o servidor responda, e depois reverta a alteração se a mutação falhar.
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
  },
})

Invalidando todas as instâncias de um tipo de identificador

Usar `{ type: 'User', id: 'LIST' }` como identificador para consultas de listas permite invalidar a lista inteira sem invalidar as entradas individuais de usuários.
providesTags: result =>
  result ? [
    ...result.map(({ id }) => ({ type: 'User', id })),
    { type: 'User', id: 'LIST' },
  ] : [{ type: 'User', id: 'LIST' }]

Invalidação manual do cache

Invalide identificadores específicos programaticamente com dispatch(api.util.invalidateTags(['User'])). Isso é útil em manipuladores de eventos que ficam fora dos componentes.
dispatch(userApi.util.invalidateTags(['User']));

Atualizações pessimistas versus otimistas

Otimista: atualiza o cache antes de o servidor responder (interface instantânea, com reversão em caso de erro). Pessimista: aguarda o servidor e depois atualiza (mais seguro, mas mais lento). Escolha com base no risco de falha da mutação.

Quando usar identificadores ou uma nova busca manual

Use identificadores quando souber exatamente quais consultas invalidar. Use refetch() de um gancho de consulta para atualizações manuais pontuais. Os identificadores são mais automáticos e escaláveis para APIs grandes.

Verificação rápida

No RTK Query, o que invalidatesTags em um endpoint de mutação faz?

Recapitulação

Defina mutações com builder.mutation. Use providesTags nas consultas e invalidatesTags nas mutações para fazer novas buscas automaticamente. Use onQueryStarted com updateQueryData para atualizações otimistas e undo() para a reversão.

Curso concluído

Parabéns! Você concluiu **Redux Toolkit e RTK Query**. Agora você pode criar fatias do Redux, lidar com lógica assíncrona usando createAsyncThunk e gerenciar o estado do servidor com o armazenamento em cache e as atualizações otimistas do RTK Query.

Perguntas Frequentes

A aula “Atualizações otimistas e invalidação do cache” é grátis?

Sim — o texto completo de “Atualizações otimistas e invalidação do cache” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Atualizações otimistas e invalidação do cache”?

Atualize a interface instantaneamente durante uma mutação e invalide dados armazenados em cache com etiquetas. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Atualizações otimistas e invalidação do cache”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Partes do Redux Toolkit e createSlice
  2. Lógica assíncrona com createAsyncThunk
  3. RTK Query: endpoints e armazenamento automático em cache
  4. Atualizações otimistas e invalidação do cache
← Voltar para React Academy