[Dúvida] Como o useMutate conhece o nome da query?

Olá!

Nessa aula foi mostrado como usar a propriedade refetchQueries em um useMutate. Dentro dessa propriedade foi passado um array com o nome da query a ser executada:

useMutation(ADICIONAR_ITEM, {
    refetchQueries: ['ObterCarrinho']
});

No caso, esse ObterCarrinho é o nome dado à query dentro do template literals usando o gql:

export const OBTER_CARRINHO = gql`
query ObterCarrinho{
  carrinho {
    total
    itens {
      livroId
      quantidade
      opcaoCompra { 
        id
        preco
      }
      livro {
        id
        imagemCapa
        titulo
        descricao        
        autor {
          nome
        }
      }
    }
  }
}
`

Ou seja, tenho uma variável OBTER_CARRINHO e dentro dela tenho a query nomeada ObterCarrinho.

Minha dúvida é: como o useMutate conhece o nome dessa query ObterCarrinho? Não consegui entender como o useMutate tem acesso a esse nome, sendo que é algo que está dentro de uma variável, (a OBTER_CARRINHO). É alguma coisa interna do GraphQL?

Fiz um teste e ao invés de usar o nome da query, usei a variável e funcionou:

useMutation(ADICIONAR_ITEM, {
    refetchQueries: [OBTER_CARRINHO]
});

Por que isso também funciona? Qual é a "melhor prática"?

Obrigado!

Oi, Matheus, tudo bem?

Ao usar o useMutation do Apollo Client, você tem a opção de especificar refetchQueries para indicar quais queries devem ser reexecutadas após a mutação. Isso serve para garantir que os dados na interface do usuário estejam sincronizados com o estado mais recente no servidor.

O Apollo Client é capaz de identificar a query pelo nome porque, internamente, ele mantém um registro de todas as queries executadas. Quando você passa o nome da query como uma string (por exemplo, 'ObterCarrinho'), o Apollo Client consulta esse registro para encontrar a query correspondente.

Quanto à sua observação de que usar a variável OBTER_CARRINHO também funciona, isso ocorre porque o Apollo Client consegue identificar e extrair o nome da operação da query GraphQL contida na variável. Isso é possível porque a query é uma string formatada que inclui o nome da operação (neste caso, query ObterCarrinho). Assim, quando você passa a variável diretamente, o Apollo Client ainda consegue acessar e utilizar o nome da operação definido dentro da query.

Sobre qual é a "melhor prática", ambas as abordagens são válidas. Passar o nome da query como uma string é simples e direto, especialmente se você não precisar de referências dinâmicas ou manipulação complexa. Por outro lado, usar a variável pode ser mais seguro em termos de refatoração do código, pois alterações no nome da query dentro da variável gql serão automaticamente refletidas onde a variável é usada, reduzindo o risco de erros por desincronização de nomes.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação