0Pricing
TypeScript Academy · Aula

Segurança de tipos de ponta a ponta: fluxo orientado pelo esquema

Mantenha uma única fonte de verdade, do esquema ao cliente

Segurança de tipos de ponta a ponta: fluxo orientado pelo esquema é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 4 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 que significa schema-first?

Schema-first significa que o schema GraphQL é a única fonte de verdade. Os tipos do frontend, os resolvers do backend e os contratos da API são todos derivados dele — evitando que qualquer camada fique fora de sincronia.

# The workflow:
# 1. Define schema (.graphql or SDL)
# 2. Generate server resolver types
# 3. Generate client operation types
# 4. Both sides automatically stay in sync

Definindo o schema

Escreva seu schema GraphQL em SDL (arquivos .graphql) e faça commit dele no repositório como o contrato entre cliente e servidor.

# schema.graphql
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

Servidor: gerando tipos de resolver

Execute a geração de código com o plugin typescript-resolvers para gerar assinaturas de resolver tipadas a partir do schema.

# Server codegen step
npx graphql-codegen --config codegen.server.yml

Cliente: gerando tipos de operação

Execute a geração de código com typescript-operations e os plugins do Apollo/urql para gerar ganchos tipados a partir dos arquivos de operações .graphql.

# Client codegen step
npx graphql-codegen --config codegen.client.yml

Detecção de alterações incompatíveis

Use graphql-inspector para detectar alterações incompatíveis no schema (remoção de campos, alteração de tipos) antes que cheguem à produção.

npx graphql-inspector diff ./api/schema.graphql ./api/schema.new.graphql
# Reports: BREAKING: Field 'User.email' was removed

Registro de schemas

Um registro de schemas (Apollo Studio, Hive) armazena versões do schema, acompanha alterações ao longo do tempo e alerta sobre alterações incompatíveis na integração contínua.

# Push schema to Apollo Studio:
npx apollo schema:push --endpoint https://api.example.com/graphql

Mocks com o schema

Use o schema para gerar dados simulados para o desenvolvimento do cliente sem um servidor real, mantendo os mocks de acordo com o schema.

import { buildClientSchema, introspectionFromSchema } from "graphql";
import { addMocksToSchema } from "@graphql-tools/mock";
const schema = buildClientSchema(introspectionResult);
const mockedSchema = addMocksToSchema({ schema });

tRPC como alternativa

Para projetos somente em TypeScript, tRPC oferece segurança de tipos de ponta a ponta sem uma linguagem de schema — o tipo do roteador do servidor É o contrato do cliente.

// Server: router infers types
const router = t.router({ getUser: t.procedure.query(() => fetchUser()) });
// Client: types flow automatically via inference
const { data } = trpc.getUser.useQuery();

Zod + tRPC para validação

Combine schemas do Zod com validadores de entrada do tRPC para obter validação em tempo de execução e tipos em tempo de compilação a partir de uma única definição.

const createUser = t.procedure
  .input(z.object({ name: z.string(), email: z.string().email() }))
  .mutation(({ input }) => saveUser(input));
// input: { name: string; email: string } — from Zod schema

Integração contínua: fluxo completo de segurança do schema

Um fluxo completo de integração contínua para segurança com schema-first: valide o schema → verifique alterações incompatíveis → execute a geração de código → verifique os tipos → execute os testes.

# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm test

Recapitulação: fluxo de trabalho com schema-first

TypeScript com schema-first: defina SDL → gere tipos de resolver do servidor → gere tipos de operação do cliente → detecte alterações incompatíveis na integração contínua. O schema é a única fonte de verdade para todas as camadas de segurança de tipos.

Verificação rápida

Qual é o papel do schema GraphQL em um fluxo de trabalho com schema-first?

O que você aprendeu

Os fluxos de trabalho TypeScript com schema-first derivam todos os tipos do schema GraphQL. Gere tipos de resolver para o servidor e tipos de operação para o cliente, detecte alterações incompatíveis na integração contínua e mantenha o schema como contrato entre todas as camadas.

Perguntas Frequentes

A aula “Segurança de tipos de ponta a ponta: fluxo orientado pelo esquema” é grátis?

Sim — o texto completo de “Segurança de tipos de ponta a ponta: fluxo orientado pelo esquema” é 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 “Segurança de tipos de ponta a ponta: fluxo orientado pelo esquema”?

Mantenha uma única fonte de verdade, do esquema ao cliente 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 4 de 4.

Quanto tempo leva a aula “Segurança de tipos de ponta a ponta: fluxo orientado pelo esquema”?

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