API GraphQL con JavaScript: tutorial paso a paso para principiantes

Introducción a GraphQL y sus ventajas

GraphQL es un lenguaje de consulta 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 hace que la API sea más flexible y eficiente.

En este tutorial crearemos un servidor GraphQL simple en Node.js utilizando la biblioteca Apollo Server, configuraremos el esquema, implementaremos consultas y mutaciones. Aprenderás:

• Cómo instalar y configurar Apollo Server
• Cómo definir un esquema con tipos de datos
• Cómo escribir resolvers para consultas y mutaciones
• Cómo probar la API a través de GraphQL Playground

Para trabajar necesitarás Node.js (versión 16+) y conocimientos básicos de JavaScript. ¡Empecemos!

Paso 1: Configuración del proyecto e instalación de dependencias

Crea un nuevo directorio para el proyecto e inicializa package.json:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Instala los paquetes necesarios:

npm install apollo-server graphql

El paquete apollo-server proporciona un servidor HTTP listo para GraphQL, y graphql es el núcleo para trabajar con esquemas y consultas.

Paso 2: Creación del esquema básico y los resolvers

Crea el archivo index.js e importa Apollo Server:

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

// Datos en memoria (simulación de base de datos)const 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 }];

Ahora definimos el esquema con la etiqueta 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  }`;

Crea los resolvers — funciones que devuelven datos para cada campo de 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;    }  }};

Paso 3: Inicio del servidor y pruebas

Crea una instancia del servidor e inícialo:

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

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

Inicia el servidor con el comando node index.js. Por defecto, Apollo Server se ejecuta en el puerto 4000 y abre GraphQL Playground, un entorno interactivo para probar consultas.

Prueba a ejecutar una consulta simple:

query {  books {    title    author  }}

La respuesta debe contener un array de libros con los campos seleccionados:

{  "data": {    "books": [      { "title": "Guerra y paz", "author": "León Tolstói" },      { "title": "Crimen y castigo", "author": "Fiódor Dostoyevski" },      { "title": "El Maestro y Margarita", "author": "Mijaíl Bulgákov" }    ]  }}

Ahora probemos la mutación para agregar un nuevo libro:

mutation {  addBook(title: "Ana Karénina", author: "León Tolstói", year: 1877) {    id    title    author  }}

Después de ejecutar la mutación, el servidor devolverá el objeto del nuevo libro con el ID asignado.

Paso 4: Ampliación del esquema — relaciones