API GraphQL con JavaScript: tutorial paso a paso para Node.js

API GraphQL con JavaScript: Tutorial paso a paso

GraphQL es un lenguaje de consulta para APIs que permite a los clientes solicitar solo los datos que realmente necesitan. A diferencia de REST, donde la estructura de la respuesta es fija, GraphQL brinda flexibilidad y control. En este tutorial crearemos una API GraphQL simple en Node.js utilizando la popular librería Apollo Server.

Aprenderás a configurar el servidor, definir tipos de datos, escribir resolvers y ejecutar consultas y mutaciones. Todos los ejemplos de código se pueden ejecutar localmente.

1. Configuración del entorno e instalación de dependencias

Antes de escribir código, asegúrate de tener Node.js instalado (versión 14 o superior). Crea una nueva carpeta para el proyecto e inicializa npm:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Ahora instala los paquetes necesarios. Las dependencias principales son: express (framework web), @apollo/server (servidor GraphQL), graphql (núcleo de GraphQL) y cors (para solicitudes entre dominios).

npm install express @apollo/server graphql cors

Crea el archivo index.js — allí estará todo el código del servidor.

2. Creación del esquema GraphQL y los resolvers

El esquema es la descripción de los tipos de datos y las operaciones (consultas, mutaciones). Los resolvers son funciones que devuelven datos para cada campo.

Agreguemos un modelo de datos simple: una lista de libros. Cada libro tiene id, title, author y year.

Abre index.js y escribe el siguiente código:

const { ApolloServer } = require('@apollo/server');const { startStandaloneServer } = require('@apollo/server/standalone');const express = require('express');const cors = require('cors');

// Simulación de base de datoslet books = [  { id: '1', title: 'Guerra y Paz', author: 'León Tolstói', year: 1869 },  { id: '2', title: 'Crimen y Castigo', author: 'Fiódor Dostoyevski', year: 1866 },  { id: '3', title: 'El Maestro y Margarita', author: 'Mijaíl Bulgákov', year: 1967 }];

// Definición del esquema (Type Definitions)const typeDefs = `#graphql  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  }`;

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

// Inicio del servidorasync function startServer() {  const app = express();  app.use(cors());

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

  const { url } = await startStandaloneServer(server, {    listen: { port: 4000 },  });

  console.log(`Servidor GraphQL iniciado en ${url}`);}

startServer();

Analicemos el código:

• typeDefs — define los tipos Book, Query (consultas) y Mutation (modificaciones).
• resolvers — contiene las funciones para cada campo. Para books devuelve todo el array, para book — filtra por id.
• startStandaloneServer — inicia el servidor en el puerto 4000.

3. Prueba de la API a través de GraphQL Playground