Get it on Google Play
Mas de 22 años en el mundo del IT corporativo

API GraphQL con Javascript

03-01-2020
Javascript GraphQL 1

Javascript GraphQL 1

Sin duda, Javascript es el lenguaje idóneo para implementar APIs con GraphQL y una arquitectura de microservicios nos permite usar el stack tecnológico mas adecuado para cada ocasión.

Hoy vamos a ver como implementamos una API GraphQL con Javascript:

Introducción a GraphQL

GraphQL es un lenguage para hacer peticiones a nuestra API, mas complejo que una API Rest, pero mucho mas robusto y con un rendimiento mucho mas alto.

Básicamente partimos de un fichero de definición de nuestra API donde definiremos tipos y campos. La API de nuestro proyecto será la siguiente:

  type Cliente {
	id: Int
	nombre: String
            telefono: String
	}

  type Query {
    	clientes: [Cliente]
    	cliente(id: Int): Cliente
  	}

  type Mutation {
    	addCliente(nombre: String, telefono: String): Cliente
  	}

Creación del proyecto GraphQL API

Crearemos una nueva carpeta e iniciamos el proyecto ejecutando:

npm install express express-graphql graphql --save

Esto nos inicializa el proyecto con las siguientes dependencias: ‘express’, ‘express-graphql’ y ‘graphql’

Ahora a implementar nuestra API

Crearemos un fichero llamado ‘server.js’ con el siguiente contenido:

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

// Construimos el schema
var schema = buildSchema(`

  type Cliente {
	id: Int
	nombre: String
        telefono: String
	}

  type Query {
    	clientes: [Cliente]
    	cliente(id: Int): Cliente
  	}

  type Mutation {
    	addCliente(nombre: String, telefono: String): Cliente
  	}

`);

var clientes = [];
var counter=1;

// Función para resolver las peticiones
var root = {
  clientes: () => { return clientes; },

  cliente: ( data ) => { 
	for ( var i=0; i<clientes.length; i++ ) 
		if ( clientes[i].id==data.id ) 
			return clientes[i]; 

	return null; 
	},

  addCliente: ( data ) => { 
	var c={ 'id': counter, 'nombre':data.nombre, 'telefono':data.telefono }; 
	clientes.push( c ); 
	counter++; 
	return c; 
	},
};

// Arrancamos el servidor web
var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(4000);
console.log('GraphQL API en http://localhost:4000/graphql');

Para arrancar la aplicación ejecutaremos:

node server.js

Y como le hemos indicado a la librería el parámetro ‘graphiql: true’ solo tenemos que acceder a ‘http://localhost:4000/graphql’ para acceder a un editor visual para probar nuestras peticiones:

Javascript GraphQL 2

Javascript GraphQL 2

Como veis el código es súper fácil de analizar y entender. Ahora si queréis jugar podéis probar a insertar un par de clientes y consultarlos después:

# Insertamos al cliente Pepe
mutation {
  addCliente( nombre:"Pepe", telefono:"666 666 666") {
    id
    nombre
    telefono
  }
}

# Insertamos al cliente Juan
mutation {
  addCliente( nombre:"Juan", telefono:"356 356 356") {
    id
    nombre
    telefono
  }
}

# Consultamos el listado de clientes
{
  clientes {
    id
    nombre
    telefono
  }
}

# Consultamos el cliente 1
{
  cliente(id: 1) {
    id
    nombre
    telefono
  }
}

Si te ha servido, por favor comparte
 

Leave a Reply