GraphQL Fragments: Deixe Cada Componente Ser Dono de Seus Dados

As consultas GraphQL parecem limpas no início. Uma única requisição obtém todos os seus dados. Então, seu aplicativo cresce.

A consulta da sua página começa a coletar campos para muitos componentes filhos diferentes. Você adiciona um campo para um novo componente. Seis semanas depois, você exclui esse componente. Você esquece de remover o campo da consulta principal. Agora, ninguém sabe se é seguro excluí-lo. A consulta cresce indefinidamente.

Fragmentos resolvem isso. A maioria das equipes os utiliza como uma forma de copiar e colar campos. Esta é a maneira errada. Fragmentos devem ser um modelo para a propriedade dos componentes.

Um fragmento é um grupo nomeado de campos para um tipo específico.

Exemplo:

fragment UserBadge on User {
  id
  name
  avatarUrl
}

Você espalha (spread) este fragmento em qualquer consulta que precise de um User.

O valor real vem de onde você salva o fragmento. Não os coloque em um arquivo compartilhado. Coloque o fragmento no mesmo arquivo do componente que o utiliza.

Isso é chamado de co-location. Cada componente declara suas próprias necessidades de dados.

Quando um componente precisa de um novo campo, você o adiciona ao seu fragmento. A consulta pai é atualizada automaticamente. Quando você exclui um componente, você exclui seu fragmento. A consulta diminui. O componente pai não precisa conhecer os campos internos de seus filhos.

O mascaramento de dados (data masking) torna isso ainda melhor. Com o mascaramento ativado, um componente vê apenas os campos que solicitou em seu próprio fragmento. Mesmo que o servidor envie dados extras, seu componente não poderá acessá-los.

Isso cria um contrato estrito.

  • TypeScript sabe exatamente quais dados cada componente possui.
  • Se você remover um campo de um fragmento, o TypeScript mostrará todos os erros.
  • A refatoração torna-se uma simples verificação de tipos em vez de uma busca por todo o seu código-fonte.

Use fragmentos quando:

  • Múltiplos componentes usam o mesmo tipo, como User ou Product.
  • Suas consultas de página são muito longas.
  • Você deixa campos mortos em suas consultas acidentalmente.
  • Você deseja segurança de tipos (TypeScript safety) para seus dados.

Comece pequeno. Encontre um componente que recebe dados de uma consulta pai. Mova seus campos para um fragmento. Coloque esse fragmento no arquivo do componente.

Fragmentos garantem que a busca de dados corresponda à sua UI conforme seu aplicativo cresce.

Fonte: https://dev.to/grimicorn/graphql-fragments-let-each-component-own-its-data-5359