GraphQL API com JavaScript: tutorial passo a passo para Node.js

GraphQL API com JavaScript: Tutorial Passo a Passo para Node.js

GraphQL é uma poderosa linguagem de consulta para APIs, desenvolvida pelo Facebook. Diferente do REST, onde você recebe estruturas de dados fixas, o GraphQL permite que o cliente solicite apenas o que precisa. Neste tutorial, criaremos uma API GraphQL completa em JavaScript usando Node.js e Apollo Server. Você aprenderá como configurar o servidor, definir o esquema, escrever resolvers e executar consultas e mutações.

O que é GraphQL e por que usá-lo?

GraphQL resolve vários problemas das APIs REST:

• Excesso de dados: o cliente recebe apenas os campos que solicitou.
• Múltiplas requisições: uma única consulta GraphQL pode substituir vários endpoints REST.
• Tipagem forte: o esquema define os tipos de dados e as relações entre eles.

JavaScript (Node.js) é a escolha ideal para criar APIs GraphQL devido ao seu enorme ecossistema de pacotes e natureza assíncrona.

Passo 1: Instalação e configuração do projeto

Crie um novo diretório e inicialize o projeto:

mkdir graphql-api-tutorialcd graphql-api-tutorialnpm init -y

Instale as dependências necessárias:

npm install apollo-server graphql

Crie o arquivo index.js — este será o ponto de entrada da nossa aplicação.

Passo 2: Definição do esquema GraphQL

O esquema é o núcleo da API GraphQL. Ele descreve os tipos de dados e as operações disponíveis (consultas, mutações, assinaturas). Vamos criar um esquema simples para gerenciar livros.

const { ApolloServer, gql } = require('apollo-server');

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

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

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

Aqui definimos:

• Book — tipo objeto com campos id, title, author, year.
• Query — ponto de entrada para leitura de dados (lista de livros e livro por ID).
• Mutation — operações de alteração de dados (adicionar e remover livro).

Passo 3: Escrevendo os resolvers

Resolvers são funções que retornam dados para cada campo do esquema. Vamos criar um banco de dados fictício (array de objetos) e implementar os resolvers.

let books = [  { id: '1', title: '1984', author: 'George Orwell', year: 1949 },  { id: '2', title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 },];

const resolvers = {  Query: {    books: () => books,    book: (parent, args) => books.find(book => book.id === args.id),  },  Mutation: {    addBook: (parent, args) => {      const newBook = {        id: String(books.length + 1),        title: args.title,        author: args.author,        year: args.year,      };      books.push(newBook);      return newBook;    },    deleteBook: (parent, args) => {      const index = books.findIndex(book => book.id === args.id);      if (index === -1) return null;      const deletedBook = books.splice(index, 1)[0];      return deletedBook;    },  },};

Observe a estrutura: Query e Mutation são objetos que contêm métodos resolvers. Cada resolver recebe três argumentos: parent (resultado do resolver pai), args (argumentos da consulta) e context (objeto de contexto, por exemplo, para autenticação).

Passo 4: Iniciando o servidor e testando

Agora vamos conectar o esquema e os resolvers no Apollo Server:

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

server.listen().then(({ url }) => {  console.log(`🚀 Server ready at ${url}`);});