API GraphQL com JavaScript: tutorial passo a passo para iniciantes

Introdução ao GraphQL e suas vantagens

GraphQL é uma linguagem de consulta para APIs, desenvolvida pelo Facebook. Ao contrário do REST, onde cada endpoint retorna uma estrutura de dados fixa, o GraphQL permite que o cliente solicite apenas os campos necessários. Isso torna a API mais flexível e eficiente.

Neste tutorial, criaremos um servidor GraphQL simples em Node.js usando a biblioteca Apollo Server, configuraremos o schema, implementaremos consultas e mutações. Você aprenderá:

• Como instalar e configurar o Apollo Server
• Como definir um schema com tipos de dados
• Como escrever resolvers para consultas e mutações
• Como testar a API através do GraphQL Playground

Para trabalhar, você precisará do Node.js (versão 16+) e conhecimento básico de JavaScript. Vamos começar!

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

Crie um novo diretório para o projeto e inicialize o package.json:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Instale os pacotes necessários:

npm install apollo-server graphql

O pacote apollo-server fornece um servidor HTTP pronto para GraphQL, e o graphql é o núcleo para trabalhar com schemas e consultas.

Passo 2: Criação do schema básico e resolvers

Crie o arquivo index.js e importe o Apollo Server:

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

// Dados em memória (simulação de banco de dados)const books = [  { id: '1', title: 'Guerra e Paz', author: 'Liev Tolstói', year: 1869 },  { id: '2', title: 'Crime e Castigo', author: 'Fiódor Dostoiévski', year: 1866 },  { id: '3', title: 'O Mestre e a Margarida', author: 'Mikhail Bulgákov', year: 1967 }];

Agora vamos definir o schema usando a tag gql:

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  }`;

Crie os resolvers — funções que retornam os dados para cada campo da consulta:

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;    }  }};

Passo 3: Iniciar o servidor e testar

Crie uma instância do servidor e inicie-o:

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

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

Inicie o servidor com o comando node index.js. Por padrão, o Apollo Server é executado na porta 4000 e abre o GraphQL Playground — um ambiente interativo para testar consultas.

Tente executar uma consulta simples:

query {  books {    title    author  }}

A resposta deve conter um array de livros com os campos selecionados:

{  "data": {    "books": [      { "title": "Guerra e Paz", "author": "Liev Tolstói" },      { "title": "Crime e Castigo", "author": "Fiódor Dostoiévski" },      { "title": "O Mestre e a Margarida", "author": "Mikhail Bulgákov" }    ]  }}

Agora vamos testar a mutação para adicionar um novo livro:

mutation {  addBook(title: "Anna Karenina", author: "Liev Tolstói", year: 1877) {    id    title    author  }}

Após executar a mutação, o servidor retornará o objeto do novo livro com o ID atribuído.

Passo 4: Expandindo o schema — relacionamentos