GraphQL API com TypeScript: tutorial prático passo a passo

Introdução à API GraphQL com TypeScript

GraphQL é uma linguagem de consulta para sua API que permite que os clientes solicitem apenas os dados de que realmente precisam. Em combinação com TypeScript, você obtém tipagem estática, autocompletar na IDE e menos erros em tempo de compilação. Neste tutorial, criaremos uma API GraphQL completa do zero, usando TypeScript e Apollo Server.

Este guia é adequado para desenvolvedores familiarizados com os fundamentos de JavaScript e Node.js. Percorreremos o caminho desde a instalação das dependências até o teste da API pronta.

1. Configuração do projeto e instalação das dependências

Primeiramente, criaremos um novo projeto e instalaremos os pacotes necessários. Abra o terminal e execute:

mkdir graphql-ts-tutorialcd graphql-ts-tutorialnpm init -y

Instale TypeScript, Apollo Server e GraphQL:

npm install apollo-server graphqlnpm install -D typescript @types/node ts-node nodemon

Crie o arquivo tsconfig.json para configuração do TypeScript:

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

Crie a pasta src e o arquivo src/index.ts — este será o ponto de entrada da nossa aplicação.

2. Criação do schema GraphQL e tipos TypeScript

No GraphQL, o schema define os tipos de dados e operações disponíveis para o cliente. Vamos criar um schema simples para gerenciar livros.

Arquivo src/schema.ts:

import { gql } from 'apollo-server';

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

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

  type Mutation {    addBook(title: String!, author: String!, publishedYear: Int): Book    deleteBook(id: ID!): Book  }`;

Agora, vamos definir as interfaces TypeScript para nossos dados. Crie src/types.ts:

export interface Book {  id: string;  title: string;  author: string;  publishedYear?: number;}

Observe: as interfaces TypeScript são necessárias para a lógica interna, enquanto os tipos GraphQL são para a comunicação cliente-servidor. Eles devem estar alinhados.

3. Implementação dos resolvers e do servidor

Resolvers são funções que retornam dados para cada campo do schema. Vamos criar o arquivo src/resolvers.ts com uma simulação de banco de dados:

import { Book } from './types';

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

export const resolvers = {  Query: {    books: (): Book[] => books,    book: (_: any, args: { id: string }): Book | undefined => {      return books.find(book => book.id === args.id);    },  },  Mutation: {    addBook: (_: any, args: { title: string; author: string; publishedYear?: number }): Book => {      const newBook: Book = {        id: String(books.length + 1),        title: args.title,        author: args.author,        publishedYear: args.publishedYear,      };      books.push(newBook);      return newBook;    },    deleteBook: (_: any, args: { id: string }): Book | null => {      const index = books.findIndex(book => book.id === args.id);      if (index === -1) return null;      const deletedBook = books.splice(index, 1)[0];      return deletedBook;    },  },};

Agora, vamos conectar tudo no arquivo principal src/index.ts:

import { ApolloServer } from 'apollo-server';import { typeDefs } from './schema';import { r
```