useMutation - Parte da biblioteca react-query e é usado para lidar com operações que alteram dados

[Romeusorionaet]

O hook useMutation é parte da biblioteca react-query e é usado para lidar com operações que alteram dados, como criar, atualizar ou excluir informações. Ele é ideal para gerenciar operações assíncronas que envolvem mudanças no estado, como chamadas de API para modificar dados.

Vamos detalhar o exemplo fornecido, que demonstra o uso de useMutation em um contexto de formulário para manipular endereços de usuários.

Estrutura do Exemplo

Código do Exemplo

import { useQuery, useMutation } from '@tanstack/react-query'

export function AddressFormContextProvider({ children }: AddressFormContextProps) {
  const { notifySuccess, notifyError } = useNotification()

  const { data, refetch, isLoading } = useQuery({
    queryKey: ['addressData'],
    queryFn: () => getDataUserAddress(),
    staleTime: 1000 * 60 * 60 * 24, // 24 hours
  })

  const mutation = useMutation({
    mutationFn: async ({
      addressFormData,
      operation,
    }: {
      addressFormData: AddressFormData
      operation: 'create' | 'update'
    }) => {
      const result =
        operation === 'create'
          ? await createUserAddress(addressFormData)
          : await updateUserAddress(addressFormData)

      if (result.success) {
        notifySuccess({ message: result.message, origin: 'server' })
        await refetch()

        return
      } else {
        notifyError({ message: result.message, origin: 'server' })
      }
    },
  })

  async function handleAddressForm(addressFormData: AddressFormData) {
    const previousAddress = data?.userAddress

    const { isSameData } = checkDataEquality(addressFormData, data?.userAddress)

    if (isSameData) {
      notifyError({
        message: 'Não há alterações para salvar',
        origin: 'client',
      })
      return
    }

    mutation.mutate({
      addressFormData,
      operation: previousAddress ? 'update' : 'create',
    })
  }

  ...
}

File

Explicação do Exemplo

1. Uso de useQuery:

   • useQuery é usado para buscar os dados atuais do endereço do usuário (getDataUserAddress).

2. Uso de useMutation:

   • useMutation gerencia operações de criação ou atualização de dados (createUserAddress e updateUserAddress).
   • mutationFn define a função assíncrona que executa a operação de criação ou atualização e lida com a resposta.

3. Função handleAddressForm:

   • Esta função lida com a submissão do formulário de endereço.

4. Contexto do AddressFormContextProvider:

   • O componente AddressFormContextProvider fornece a lógica e funções necessárias para lidar com o formulário de endereço aos seus filhos (children).
   • A função handleAddressForm é exposta através do contexto, permitindo que outros componentes acessem e utilizem essa lógica.

Benefícios do useMutation

• Gerenciamento de Estado de Mutação:

  • useMutation simplifica o gerenciamento de estado para operações que alteram dados, como o carregamento (isLoading), sucesso (isSuccess), e erro (isError).

• Notificações e Atualizações:

  • Permite o gerenciamento de notificações e atualizações de dados em resposta a alterações bem-sucedidas.

• Manejo de Erros:

  • Facilita o tratamento de erros e feedback para o usuário, mantendo uma interface responsiva e informativa.

Considerações

• Sincronização dos Dados:

  • useMutation é ideal para operações que envolvem a modificação de dados no servidor e precisa ser sincronizado com o estado do cliente.

• Notificações e Feedback:

  • Ajuda a fornecer feedback instantâneo ao usuário sobre o sucesso ou falha das operações.

Este exemplo mostra como useMutation pode ser usado para gerenciar operações assíncronas de criação e atualização em uma aplicação React, proporcionando uma maneira clara e eficiente de lidar com mudanças de dados e atualizar o estado da aplicação.