GraphQL API con JavaScript: tutorial práctico paso a paso

Introducción a GraphQL API con JavaScript

GraphQL es un lenguaje de consultas para API, desarrollado por Facebook. A diferencia de REST, donde cada endpoint devuelve una estructura de datos fija, GraphQL permite al cliente solicitar solo los campos que necesita. Esto reduce el volumen de datos transferidos y simplifica el desarrollo de aplicaciones complejas.

En este tutorial crearemos una API GraphQL completa en Node.js utilizando Apollo Server. Aprenderá a definir esquemas, escribir resolvers, ejecutar consultas y mutaciones. Todos los ejemplos de código están listos para ejecutarse y probados en la práctica.

Para trabajar necesitará Node.js versión 14 o superior y conocimiento básico de JavaScript. Si está familiarizado con Express.js, Apollo Server le resultará muy similar — también utiliza middleware y funciona con HTTP.

Instalación y configuración del proyecto

Cree un nuevo directorio e inicialice el proyecto:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Instale las dependencias necesarias:

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

Cree el archivo index.js — este será el punto de entrada de nuestra aplicación.

La estructura básica del proyecto se verá así:

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

Creación del primer servidor GraphQL

Comencemos con un servidor mínimo que devuelve un mensaje simple. Abra index.js y agregue el siguiente código:

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

// Definimos el esquema GraphQLconst typeDefs = `#graphql  type Query {    hello: String  }`;

// Resolver para la consulta helloconst resolvers = {  Query: {    hello: () => '¡Hola, mundo! ¡Esta es la primera consulta GraphQL!',  },};

// Creamos la instancia del servidorconst server = new ApolloServer({  typeDefs,  resolvers,});

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

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

Ejecute el servidor con el comando node index.js. Abra el navegador y vaya a http://localhost:4000. Verá la interfaz de Apollo Sandbox, donde podrá ejecutar consultas.

Ingrese en el panel izquierdo:

query {  hello}

Y presione el botón "Run". En respuesta obtendrá:

{  "data": {    "hello": "¡Hola, mundo! ¡Esta es la primera consulta GraphQL!"  }}

Trabajo con tipos de datos y consultas complejas

GraphQL permite definir tipos de datos personalizados. Creemos un modelo de usuario y libros para nuestra API.

Actualice el archivo index.js:

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

// Definimos los 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  }`;

// Datos de pruebaconst books = [  { id: '1', title: 'Harry Potter', author: 'J.K. Rowling', publishedYear: 1997 },  { id: '2', title: 'El Señor de los Anillos', author: 'J.R.R. Tolkien', publishedYear: 1954 },  { id: '3', title: '1984', author: 'George Orwell', publishedYear: 1949 },];

const users = [  { id: '1', name: 'Iván Ivanov', email: 'ivan@example.com', bookIds: ['1', '2'] },  { id: '2', name: 'Ana Petrova', email: 'anna@example.com', bookIds: ['3'] },];

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