GraphQL API com TypeScript: tutorial passo a passo para iniciantes

Introdução ao GraphQL e TypeScript

GraphQL é uma linguagem de consulta para APIs que permite aos clientes solicitar apenas os dados de que realmente precisam. Combinado com TypeScript, que adiciona tipagem estática ao JavaScript, você obtém uma ferramenta poderosa para criar APIs confiáveis e escaláveis. Neste tutorial, criaremos passo a passo uma API GraphQL simples em TypeScript. Você aprenderá como configurar o projeto, definir o esquema, escrever resolvers e executar consultas.

Este material é voltado para desenvolvedores iniciantes que conhecem os fundamentos do JavaScript e desejam aprender tecnologias modernas. Ao final do artigo, você será capaz de implantar um servidor GraphQL básico por conta própria.

Passo 1: Configuração do projeto

Antes de escrever código, é necessário inicializar o projeto e instalar as dependências. Usaremos o Apollo Server — uma das bibliotecas mais populares para trabalhar com GraphQL em Node.js.

Inicialização do npm

Crie um novo diretório e execute a inicialização:

mkdir graphql-typescript-tutorialcd graphql-typescript-tutorialnpm init -y

Instalação das dependências

Instale os pacotes necessários:

npm install apollo-server graphqlnpm install typescript ts-node @types/node --save-dev

• apollo-server — servidor para processar consultas GraphQL.
• graphql — núcleo da linguagem GraphQL.
• typescript e ts-node — para compilar e executar TypeScript.

Configuração do TypeScript

Crie o arquivo tsconfig.json na raiz do projeto:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "outDir": "./dist",    "rootDir": "./src"  },  "include": ["src/**/*"],  "exclude": ["node_modules"]}

Crie a pasta src e o arquivo index.ts — ele conterá o código principal do servidor.

Passo 2: Definição do esquema e tipos

O esquema GraphQL descreve quais dados estão disponíveis e como podem ser consultados. Em TypeScript, usaremos uma string com a sintaxe gql para definir os tipos.

Esquema básico

Abra src/index.ts e adicione o seguinte código:

import { ApolloServer, gql } from 'apollo-server';

const typeDefs = gql`  type Book {    id: ID!    title: String!    author: String!  }

  type Query {    books: [Book]    book(id: ID!): Book  }`;

Aqui definimos o tipo Book com os campos id, title e author. Query contém duas consultas: obter todos os livros e um livro por ID.

Dados mockados

Para teste, adicionaremos um array de livros:

const books = [  { id: '1', title: 'Guerra e Paz', author: 'Liev Tolstói' },  { id: '2', title: 'Crime e Castigo', author: 'Fiódor Dostoiévski' },];

Passo 3: Escrita dos resolvers

Resolvers são funções que retornam dados para cada campo do esquema. Eles conectam o esquema aos dados reais.

Implementação dos resolvers

Adicione o objeto resolvers:

const resolvers = {  Query: {    books: () => books,    book: (_: any, args: { id: string }) => {      return books.find(book => book.id === args.id);    },  },};

O primeiro argumento _ é o objeto pai (não usado neste caso). O segundo argumento args contém os parâmetros da consulta, como id.

Montagem do servidor

Agora criaremos uma instância do servidor e o iniciaremos:

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {  console.log(`🚀 Servidor iniciado em ${url}`);});

Com