El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

GraphiQL y Playground

Siguiente ►
►

Introducción

GraphiQL y Playground son herramientas interactivas que permiten a los desarrolladores explorar y probar sus APIs GraphQL de manera eficiente. Estas herramientas proporcionan una interfaz gráfica para escribir, ejecutar y depurar consultas y mutaciones de GraphQL.

¿Qué es GraphiQL?

GraphiQL es un IDE (Entorno de Desarrollo Integrado) de código abierto para GraphQL. Fue desarrollado por Facebook y es ampliamente utilizado para interactuar con APIs GraphQL. Algunas de sus características clave incluyen:

  • Autocompletado de consultas: Ayuda a escribir consultas más rápido y con menos errores.
  • Documentación en línea: Proporciona acceso a la documentación del esquema GraphQL directamente en la interfaz.
  • Historial de consultas: Permite revisar y reutilizar consultas anteriores.

Instalación y Configuración de GraphiQL

Para utilizar GraphiQL, primero necesitas tener un servidor GraphQL en funcionamiento. Aquí hay un ejemplo de cómo configurar GraphiQL en un servidor Express con express-graphql:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const app = express();

// Definir el esquema
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// Definir los resolvers
const root = {
  hello: () => 'Hello, world!',
};

// Configurar GraphiQL
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(4000, () => console.log('Servidor GraphQL ejecutándose en http://localhost:4000/graphql'));

Uso de GraphiQL

  1. Abrir GraphiQL: Una vez que el servidor esté en funcionamiento, abre tu navegador y navega a http://localhost:4000/graphql.
  2. Escribir una consulta: En el editor de GraphiQL, escribe una consulta como la siguiente: 
    {
  hello
}
  3. Ejecutar la consulta: Haz clic en el botón de "Play" para ejecutar la consulta y ver la respuesta en el panel de resultados.

¿Qué es GraphQL Playground?

GraphQL Playground es otra herramienta popular para interactuar con APIs GraphQL. Fue desarrollada por Prisma y ofrece una experiencia de usuario mejorada con características adicionales como:

  • Múltiples pestañas: Permite trabajar con varias consultas al mismo tiempo.
  • Configuración avanzada: Soporta configuraciones avanzadas como encabezados HTTP personalizados.
  • Temas personalizables: Ofrece opciones de personalización de la interfaz.

Instalación y Configuración de GraphQL Playground

GraphQL Playground puede ser utilizado de manera similar a GraphiQL. Aquí hay un ejemplo de cómo configurarlo en un servidor Express:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const { express: playground } = require('graphql-playground/middleware');
const app = express();

// Definir el esquema
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// Definir los resolvers
const root = {
  hello: () => 'Hello, world!',
};

// Configurar GraphQL Playground
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: false, // Desactivar GraphiQL
}));

app.get('/playground', playground({ endpoint: '/graphql' }));

app.listen(4000, () => console.log('Servidor GraphQL ejecutándose en http://localhost:4000/playground'));

Uso de GraphQL Playground

  1. Abrir GraphQL Playground: Una vez que el servidor esté en funcionamiento, abre tu navegador y navega a http://localhost:4000/playground.
  2. Escribir una consulta: En el editor de GraphQL Playground, escribe una consulta como la siguiente: 
    {
  hello
}
  3. Ejecutar la consulta: Haz clic en el botón de "Play" para ejecutar la consulta y ver la respuesta en el panel de resultados.

Comparación entre GraphiQL y GraphQL Playground

Característica GraphiQL GraphQL Playground
Autocompletado Sí Sí
Documentación en línea Sí Sí
Historial de consultas Sí Sí
Múltiples pestañas No Sí
Configuración avanzada Limitada Sí
Temas personalizables No Sí
Desarrollador Facebook Prisma

Ejercicio Práctico

Ejercicio 1: Configurar y Usar GraphiQL

  1. Configura un servidor GraphQL utilizando express-graphql.
  2. Habilita GraphiQL en tu servidor.
  3. Escribe y ejecuta una consulta simple en GraphiQL.

Ejercicio 2: Configurar y Usar GraphQL Playground

  1. Configura un servidor GraphQL utilizando express-graphql.
  2. Habilita GraphQL Playground en tu servidor.
  3. Escribe y ejecuta una consulta simple en GraphQL Playground.

Soluciones

Solución al Ejercicio 1

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const app = express();

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

const root = {
  hello: () => 'Hello, world!',
};

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(4000, () => console.log('Servidor GraphQL ejecutándose en http://localhost:4000/graphql'));

Solución al Ejercicio 2

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
const { express: playground } = require('graphql-playground/middleware');
const app = express();

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

const root = {
  hello: () => 'Hello, world!',
};

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: false,
}));

app.get('/playground', playground({ endpoint: '/graphql' }));

app.listen(4000, () => console.log('Servidor GraphQL ejecutándose en http://localhost:4000/playground'));

Conclusión

GraphiQL y GraphQL Playground son herramientas esenciales para cualquier desarrollador que trabaje con GraphQL. Ambas ofrecen características robustas para escribir, ejecutar y depurar consultas y mutaciones de GraphQL. La elección entre una y otra dependerá de tus necesidades específicas y preferencias personales. Con estas herramientas, puedes mejorar significativamente tu flujo de trabajo y eficiencia al desarrollar APIs GraphQL.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2026. Todos los derechos reservados