GraphQL Codegen: Tipagem Automática e Hooks

No post anterior sobre GraphQL, vimos os benefícios da linguagem e como aplicá-la na prática com NestJS.

Agora, vamos dar um passo além e explorar como o Codegen pode nos ajudar a automatizar tipagem e gerar hooks prontos para o frontend.

Você já se deparou com a dificuldade de manter tipos sincronizados entre o backend GraphQL e o frontend?
Com o crescimento do projeto, é comum perder tempo escrevendo manualmente interfaces TypeScript, arriscando inconsistências e erros de runtime.

É justamente para resolver esse problema que existe o GraphQL Code Generator.

"GraphQL Code Generator é uma ferramenta poderosa que gera automaticamente código tipado a partir do schema e documentos GraphQL, incluindo tipos TypeScript, hooks React e SDKs para clientes como Apollo ou Urql."

---

Por que usar o GraphQL Codegen?

• Tipagem Automática: O backend é a fonte da verdade e o frontend consome tipos atualizados sem esforço.
• Redução de Erros: Se algo muda no schema, o TypeScript acusa imediatamente.
• Produtividade: Queries e mutations viram funções/hook prontos, sem boilerplate.
• Escalabilidade: Equipes grandes evitam divergência entre contrato de API e implementação.

---

Configuração Básica

A configuração é feita no arquivo codegen.yml.

schema: http://localhost:4000/graphql
documents: ./src/**/*.graphql
generates:
    ./src/generated/graphql.ts:
        plugins:
            - 'typescript'
            - 'typescript-operations'
            - 'typescript-react-apollo'

Com esse setup, basta rodar graphql-codegen e o arquivo graphql.ts será gerado com todos os tipos e hooks.

Código Gerado

Imagine que você tem a mutation:

mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
        id
        name
        email
    }
}

Com o GraphQL Codegen, você terá um hook pronto para usar no frontend:

const [createUser, { data, loading, error }] = useCreateUserMutation();

Isso simplifica muito a integração entre frontend e backend, garantindo que os tipos estejam sempre sincronizados.

Conclusão

O GraphQL Codegen elimina o trabalho manual de manter tipagem duplicada, tornando o desenvolvimento mais rápido e seguro. Ele cria uma verdadeira ponte entre backend e frontend, reduzindo bugs e acelerando a entrega de novas features.