0Pricing
TypeScript Academy · Aula

Esquema GraphQL para tipos TypeScript

Gere tipos a partir de arquivos .graphql com codegen

Esquema GraphQL para tipos TypeScript é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 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 TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

O problema: divergência entre esquema e tipos

Em projetos GraphQL, o esquema do servidor e os tipos TypeScript do cliente facilmente ficam fora de sincronia sem automação. A geração de código resolve isso derivando os tipos diretamente do esquema.

# Without codegen: manual types that drift from schema
interface User { id: string; name: string; } // may not match schema

Gerador de código GraphQL

@graphql-codegen/cli lê seu esquema GraphQL e gera tipos TypeScript automaticamente.

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript

Configuração de codegen.yml

Configure a fonte do esquema e o local de saída em codegen.yml.

# codegen.yml
schema: "./api/schema.graphql"
generates:
  src/generated/types.ts:
    plugins:
      - typescript

Executando o gerador

Execute graphql-codegen para gerar tipos TypeScript do seu esquema.

npx graphql-codegen
# Generates src/generated/types.ts with all schema types

Exemplo de saída gerada

O arquivo gerado contém interfaces TypeScript correspondentes a cada tipo GraphQL do seu esquema.

// src/generated/types.ts (generated)
export type User = {
  __typename?: "User";
  id: string;
  name: string;
  email: string;
};

export type Query = {
  __typename?: "Query";
  user?: Maybe<User>;
};

Esquema de um ponto de acesso remoto

A geração de código também pode buscar o esquema de um ponto de acesso GraphQL ativo usando introspecção.

# codegen.yml with remote schema
schema:
  - https://api.example.com/graphql:
      headers:
        Authorization: "Bearer ${AUTH_TOKEN}"

Mapeamento de tipos escalares

Mapeie escalares personalizados do GraphQL para tipos TypeScript na configuração de geração de código.

# codegen.yml
config:
  scalars:
    DateTime: string
    JSON: Record<string, unknown>
    Upload: File

Tratamento de enumerações

As enumerações GraphQL são mapeadas para enumerações de strings ou tipos de união TypeScript, dependendo da configuração de geração de código.

# Generated from GraphQL enum Role { ADMIN USER GUEST }
export enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

Não nulo e possibilidade de nulo

Os campos anuláveis do GraphQL se tornam Maybe (ou seja, T | null | undefined) nos tipos gerados, refletindo a possibilidade de nulo do esquema.

// GraphQL: name: String (nullable)
// Generated: name?: Maybe<string>

// GraphQL: id: ID! (non-null)
// Generated: id: string

Integração contínua

Execute a geração de código na integração contínua para verificar se os tipos gerados estão atualizados. Faça a compilação falhar se o esquema tiver mudado sem ser gerado novamente.

# CI: check no drift
npx graphql-codegen --check
# Exits 1 if generated files are out of date

Recapitulação: do esquema aos tipos

O Gerador de código GraphQL lê seu esquema e produz tipos TypeScript automaticamente. Configure-o com codegen.yml, execute graphql-codegen e integre-o à integração contínua para evitar divergências no esquema.

Verificação rápida

Qual é a finalidade principal do Gerador de código GraphQL?

O que você aprendeu

O Gerador de código GraphQL elimina a divergência entre o esquema e os tipos ao gerar TypeScript a partir do esquema. Configure-o com codegen.yml, mapeie escalares personalizados e integre-o à integração contínua para garantir que tudo esteja atualizado.

Perguntas Frequentes

A aula “Esquema GraphQL para tipos TypeScript” é grátis?

Sim — o texto completo de “Esquema GraphQL para tipos TypeScript” é 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 TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Esquema GraphQL para tipos TypeScript”?

Gere tipos a partir de arquivos .graphql com codegen Você pratica TypeScript 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 TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript 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 1 de 4.

Quanto tempo leva a aula “Esquema GraphQL para tipos TypeScript”?

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 TypeScript Academy?

Sim. Cada aula de TypeScript 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. Esquema GraphQL para tipos TypeScript
  2. Resolução tipada com GraphQL Code Generator
  3. Cliente GraphQL tipado com Apollo e urql
  4. Segurança de tipos de ponta a ponta: fluxo orientado pelo esquema
← Voltar para TypeScript Academy