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

Introducción a GraphQL y sus ventajas

GraphQL es un lenguaje de consultas y un entorno de ejecución para API, desarrollado por Facebook. A diferencia de REST, donde se obtienen estructuras de datos fijas, GraphQL permite al cliente solicitar solo lo que necesita. Esto hace que las API sean más flexibles y eficientes.

En este tutorial paso a paso crearemos una API GraphQL completa con JavaScript usando Node.js. Aprenderás a configurar el servidor, definir esquemas, manejar consultas y mutaciones. Al final del artículo tendrás una API funcional lista para integrar en cualquier proyecto.

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

Para empezar, crearemos un nuevo proyecto Node.js e instalaremos los paquetes necesarios. Usaremos apollo-server, una biblioteca popular para crear servidores GraphQL.

Paso 1: Inicialización del proyecto

mkdir graphql-tutorial\ncd graphql-tutorial\nnpm init -y

Paso 2: Instalación de Apollo Server y GraphQL

npm install apollo-server graphql

Después de la instalación, crearemos el archivo principal index.js, donde estará nuestro servidor.

2. Creación de un servidor GraphQL básico

Ahora escribiremos un servidor mínimo que acepte consultas y devuelva respuestas. Para ello, definiremos el esquema (schema) y los resolutores (resolvers).

Paso 1: Definición del tipo de dato

Crearemos un tipo simple Book con los campos id, title y author.

const { ApolloServer, gql } = require('apollo-server');\n\n// Esquema GraphQL\nconst typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n`;\n\n// Datos de ejemplo (en un proyecto real — base de datos)\nconst books = [\n  { id: '1', title: 'Guerra y paz', author: 'León Tolstói' },\n  { id: '2', title: 'Crimen y castigo', author: 'Fiódor Dostoyevski' },\n  { id: '3', title: 'El maestro y Margarita', author: 'Mijaíl Bulgákov' }\n];\n\n// Resolutores — funciones que devuelven datos\nconst resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  }\n};\n\n// Creación del servidor\nconst server = new ApolloServer({ typeDefs, resolvers });\n\n// Inicio del servidor\nserver.listen().then(({ url }) => {\n  console.log(`🚀  Servidor listo en: ${url}`);\n});

Paso 2: Inicio y prueba

Ejecuta el comando node index.js y abre http://localhost:4000 en el navegador. Verás GraphQL Playground, una herramienta para probar consultas.

Prueba a ejecutar una consulta simple:

{\n  books {\n    title\n    author\n  }\n}

La respuesta debe contener una lista de libros con los campos especificados.

3. Adición de mutaciones y ampliación del esquema

Ahora añadiremos la posibilidad de modificar datos mediante mutaciones. Esto permitirá crear, actualizar y eliminar registros.

Paso 1: Definición de mutaciones en el esquema

const typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  input BookInput {\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n\n  type Mutation {\n    addBook(input: BookInput!): Book\n    deleteBook(id: ID!): Book\n  }\n`;

Paso 2: Implementación de resolutores para mutaciones

const resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  },\n  Mutation: {\n    addBook: (parent, args) => {\n      const newBook = {\n        id: String(books.length + 1),\n        title: args.input.title,\n        author: args.input.author\n      };\n      books.push(newBook);\n      return newBook;\n    },\n    deleteBook: (parent, args) => {\n      const index = books.findIndex(book => book.id