GraphiQL i Playground són dues eines essencials per treballar amb GraphQL. Aquestes eines proporcionen una interfície gràfica per explorar, provar i documentar les API de GraphQL. En aquest tema, aprendrem què són aquestes eines, com utilitzar-les i quins avantatges ofereixen.

GraphiQL és un IDE (Entorn de Desenvolupament Integrat) de codi obert per a GraphQL. Proporciona una interfície gràfica per escriure, provar i depurar consultes de GraphQL. Algunes de les seves característiques clau inclouen:

• Autocompletat: Suggeriments automàtics mentre escrius consultes.
• Documentació integrada: Accés fàcil a la documentació de l'esquema de GraphQL.
• Historial de consultes: Guarda les consultes anteriors per a un accés ràpid.

Per utilitzar GraphiQL, primer hem de configurar un servidor GraphQL. Suposant que ja tens un servidor GraphQL en funcionament, pots integrar GraphiQL de la següent manera:

1. Instal·lació de dependències:

   npm install express express-graphql graphiql
   

2. Configuració del servidor:

   const express = require('express');
   const { graphqlHTTP } = require('express-graphql');
   const { buildSchema } = require('graphql');
   const { graphiqlExpress } = require('graphql-server-express');
   
   // Definició de l'esquema
   const schema = buildSchema(`
     type Query {
       hello: String
     }
   `);
   
   // Definició dels resolvers
   const root = {
     hello: () => 'Hello world!',
   };
   
   const app = express();
   
   // Configuració de GraphQL
   app.use('/graphql', graphqlHTTP({
     schema: schema,
     rootValue: root,
     graphiql: true,
   }));
   
   // Inici del servidor
   app.listen(4000, () => console.log('Servidor GraphQL en funcionament a http://localhost:4000/graphql'));
   

3. Accés a GraphiQL: Un cop el servidor estigui en funcionament, pots accedir a GraphiQL navegant a http://localhost:4000/graphql en el teu navegador.

Aquest exemple simple retornarà:

GraphQL Playground és una altra eina popular per interactuar amb API de GraphQL. És similar a GraphiQL però amb algunes característiques addicionals:

• Interfície d'usuari moderna: Una interfície més polida i moderna.
• Suport per a múltiples pestanyes: Permet treballar amb diverses consultes alhora.
• Configuració avançada: Opcions de configuració més avançades per a l'autenticació, capçaleres, etc.

1. Instal·lació de dependències:

   npm install graphql-playground-middleware-express
   

2. Configuració del servidor:

   const express = require('express');
   const { graphqlHTTP } = require('express-graphql');
   const { buildSchema } = require('graphql');
   const { express: playground } = require('graphql-playground-middleware');
   
   // Definició de l'esquema
   const schema = buildSchema(`
     type Query {
       hello: String
     }
   `);
   
   // Definició dels resolvers
   const root = {
     hello: () => 'Hello world!',
   };
   
   const app = express();
   
   // Configuració de GraphQL
   app.use('/graphql', graphqlHTTP({
     schema: schema,
     rootValue: root,
     graphiql: false, // Desactivem GraphiQL
   }));
   
   // Configuració de GraphQL Playground
   app.get('/playground', playground({ endpoint: '/graphql' }));
   
   // Inici del servidor
   app.listen(4000, () => console.log('Servidor GraphQL en funcionament a http://localhost:4000/playground'));
   

3. Accés a GraphQL Playground: Un cop el servidor estigui en funcionament, pots accedir a GraphQL Playground navegant a http://localhost:4000/playground en el teu navegador.

Aquest exemple simple retornarà:

Configurar un servidor GraphQL amb GraphiQL i GraphQL Playground, i realitzar una consulta simple.

1. Configura un servidor GraphQL seguint les instruccions anteriors.
2. Integra GraphiQL i GraphQL Playground.
3. Realitza una consulta simple (hello) en ambdues eines.

1. Configuració del servidor:

   const express = require('express');
   const { graphqlHTTP } = require('express-graphql');
   const { buildSchema } = require('graphql');
   const { graphiqlExpress } = require('graphql-server-express');
   const { express: playground } = require('graphql-playground-middleware');
   
   const schema = buildSchema(`
     type Query {
       hello: String
     }
   `);
   
   const root = {
     hello: () => 'Hello world!',
   };
   
   const app = express();
   
   app.use('/graphql', graphqlHTTP({
     schema: schema,
     rootValue: root,
     graphiql: true,
   }));
   
   app.get('/playground', playground({ endpoint: '/graphql' }));
   
   app.listen(4000, () => console.log('Servidor GraphQL en funcionament a http://localhost:4000/graphql i http://localhost:4000/playground'));
   

2. Realització de la consulta:

   • Navega a http://localhost:4000/graphql per accedir a GraphiQL i realitza la consulta:

     query {
       hello
     }
     

   • Navega a http://localhost:4000/playground per accedir a GraphQL Playground i realitza la mateixa consulta.

GraphiQL i GraphQL Playground són eines poderoses per treballar amb API de GraphQL. Proporcionen una interfície gràfica intuïtiva per explorar, provar i documentar les API, facilitant el desenvolupament i la depuració. En aquest tema, hem après a configurar i utilitzar ambdues eines, així com les seves diferències i avantatges.