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

Introdução ao GraphQL API com JavaScript

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 de que precisa. Isso reduz o volume de dados transferidos e simplifica o desenvolvimento de aplicações complexas.

Neste tutorial, criaremos uma API GraphQL completa em Node.js usando Apollo Server. Você aprenderá a definir schemas, escrever resolvers, executar queries e mutations. Todos os exemplos de código estão prontos para execução e testados na prática.

Para trabalhar, você precisará do Node.js versão 14 ou superior e conhecimento básico de JavaScript. Se você conhece Express.js, o Apollo Server lhe parecerá muito familiar — ele também usa middleware e funciona com HTTP.

Instalação e configuração do projeto

Crie um novo diretório e inicialize o projeto:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Instale as dependências necessárias:

npm install @apollo/server graphqlnpm install nodemon --save-dev

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

A estrutura básica do projeto será assim:

graphql-tutorial/├── node_modules/├── index.js├── package.json└── package-lock.json

Criando o primeiro servidor GraphQL

Vamos começar com um servidor mínimo que retorna uma mensagem simples. Abra index.js e adicione o seguinte código:

import { ApolloServer } from '@apollo/server';import { startStandaloneServer } from '@apollo/server/standalone';

// Define o schema GraphQLconst typeDefs = `#graphql  type Query {    hello: String  }`;

// Resolver para a query helloconst resolvers = {  Query: {    hello: () => 'Olá, mundo! Esta é a primeira query GraphQL!',  },};

// Cria a instância do servidorconst server = new ApolloServer({  typeDefs,  resolvers,});

// Inicia o servidorconst { url } = await startStandaloneServer(server, {  listen: { port: 4000 },});

console.log(`🚀 Servidor iniciado em: ${url}`);

Inicie o servidor com o comando node index.js. Abra o navegador e acesse http://localhost:4000. Você verá a interface Apollo Sandbox, onde poderá executar queries.

Digite no painel esquerdo:

query {  hello}

E clique no botão "Run". Em resposta, você receberá:

{  "data": {    "hello": "Olá, mundo! Esta é a primeira query GraphQL!"  }}

Trabalhando com tipos de dados e queries complexas

GraphQL permite definir tipos de dados personalizados. Vamos criar um modelo de usuário e livros para nossa API.

Atualize o arquivo index.js:

import { ApolloServer } from '@apollo/server';import { startStandaloneServer } from '@apollo/server/standalone';

// Define os tiposconst typeDefs = `#graphql  type Book {    id: ID!    title: String!    author: String!    publishedYear: Int  }

  type User {    id: ID!    name: String!    email: String!    books: [Book]  }

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

// Dados de testeconst books = [  { id: '1', title: 'Harry Potter', author: 'J.K. Rowling', publishedYear: 1997 },  { id: '2', title: 'O Senhor dos Anéis', author: 'J.R.R. Tolkien', publishedYear: 1954 },  { id: '3', title: '1984', author: 'George Orwell', publishedYear: 1949 },];

const users = [  { id: '1', name: 'João Silva', email: 'joao@example.com', bookIds: ['1', '2'] },  { id: '2', name: 'Ana Pereira', email: 'ana@example.com', bookIds: ['3'] },];

// Resolversconst resolvers = {  Query: {    books: () => books,    book: (_, { id }) => books.find(book => book.id === id),    users: () => users,    user: (_, { i