Como Crear Una API Con GraphQL

Nube Colectiva

hace 1 año

En esta página:

Demo Github

Las API en la mayoría de casos se suelen desarrollar siguiendo los patrones habituales como la llamada de datos mediante un controlador que hace uso de los modelos con los campos de una tabla o documento, los cuales queremos mostrar en un endpoint o punto final de nuestra API REST. Con GraphQL las cosas cambian un poco, la configuración que necesitamos realizar suele tomarnos más tiempo, pero valdrá la pena, ya que GraphQL nos permite realizar consultas de manera flexible y dinámica, que hacen que una API sea más rápida. En este tutorial te enseñare a Como Crear Una API Con GraphQL, vamos con ello.

GraphQL permite realizar consultas sobre la misma estructura de código

Antes de continuar, te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación” y “ChatGPT ¿ Dejará sin empleo a los Desarrolladores ?” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Crear Una API Con GraphQL.

Como Crear Una API Con GraphQL

Ya que usaremos Node JS, es importante que debas tenerlo instalado y configurado correctamente en tu computadora. Si estas usando windows te recomiendo leer el post Que es y Como instalar Node JS (Windows), si ya tienes Node JS, puedes saltar ese paso.

Creación de Nuevo Proyecto

Primero creo un directorio llamado api-graphql para este proyecto, tu le puedes poner el nombre que desees. Ingreso al directorio y adentro de el abro la consola de comandos y ejecuto el siguiente comando:


# Comando para crear un nuevo proyecto en Node JS 
npm init

# Comando para crear un nuevo proyecto en Node JS

npm init

Me hará ciertas preguntas durante el proceso de creación del proyecto, tu le debes poner los datos que desees, para este ejemplo los datos que le puse son los siguientes:


Press ^C at any time to quit.
package name: (blog) api-graphql
version: (1.0.0)
description:
entry point: (index.js) app.js
test command:
git repository:
keywords:
author: Nube Colectiva
license: (ISC)
About to write to D:\xampp\htdocs\xampp\nc\tutoriales\api-graphql\package.json:

{
  "name": "api-graphql",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "asynckit": "^0.4.0",
    "axios": "^0.26.1",
    "combined-stream": "^1.0.8",
    "delayed-stream": "^1.0.0",
    "follow-redirects": "^1.15.2",
    "form-data": "^4.0.0",
    "mime-db": "^1.52.0",
    "mime-types": "^2.1.35",
    "openai": "^3.1.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Nube Colectiva",
  "license": "ISC"
}


Is this OK? (yes) 

# Escribo 'y' para continuar 
y

Press ^C at any time to quit.

package name: (blog) api-graphql

version: (1.0.0)

description:

entry point: (index.js) app.js

test command:

git repository:

keywords:

author: Nube Colectiva

license: (ISC)

About to write to D:\xampp\htdocs\xampp\nc\tutoriales\api-graphql\package.json:

{

"name": "api-graphql",

"version": "1.0.0",

"description": "",

"main": "app.js",

"dependencies": {

"asynckit": "^0.4.0",

"axios": "^0.26.1",

"combined-stream": "^1.0.8",

"delayed-stream": "^1.0.0",

"follow-redirects": "^1.15.2",

"form-data": "^4.0.0",

"mime-db": "^1.52.0",

"mime-types": "^2.1.35",

"openai": "^3.1.0"

"devDependencies": {},

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "Nube Colectiva",

"license": "ISC"

}

Is this OK? (yes)

# Escribo 'y' para continuar

En el comando anterior al final debemos escribir y para confirmar que todo esta bien y crear el proyecto.

Si verificamos dentro del directorio del proyecto, se ha creado un archivo llamado package.json:


/api-graphql
  ├── package.json

/api-graphql

├── package.json

Dentro del archivo package.json hay una serie de dependencias que debemos instalar para que el proyecto funcione correctamente, instalamos esas dependencias ejecutando el siguiente comando en nuestra consola de comandos:


npm install

added 9 packages, and audited 10 packages in 2s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm install

added 9 packages, and audited 10 packages in 2s

1 package is looking for funding

run `npm fund` for details

found 0 vulnerabilities

Luego de ejecutar el comando anterior, ahora la estructura de nuestro proyecto se ve así:


/api-graphql
  ├── node_modules 
  ├── package.json 
  ├── package-lock.json

/api-graphql

├── node_modules

├── package.json

├── package-lock.json

Para probar que nuestro proyecto con Node JS funciona correctamente, creamos un archivo llamado app.js


/api-graphql
  ├── node_modules 
  ├── app.js // Creamos y abrimos este archivo 
  ├── package.json 
  ├── package-lock.json

/api-graphql

├── node_modules

├── app.js // Creamos y abrimos este archivo

├── package.json

├── package-lock.json

Abrimos el archivo app.js y le agregamos lo siguiente:


const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Servidor Node JS OK !');
});

server.listen(port, hostname, () => {
  console.log(`Servidor ejecutandose en http://${hostname}:${port}/`);
});

const http = require('http');

const hostname = '127.0.0.1';

const port = 3000;

const server = http.createServer((req, res) => {

res.statusCode = 200;

res.setHeader('Content-Type', 'text/plain');

res.end('Servidor Node JS OK !');

});

server.listen(port, hostname, () => {

console.log(`Servidor ejecutandose en http://${hostname}:${port}/`);

});

Paso seguido ejecutamos el siguiente comando en la consola de comandos:


node app

Servidor ejecutandose en http://127.0.0.1:3000/

node app

Servidor ejecutandose en http://127.0.0.1:3000/

Nos indica que el servidor esta ejecutandose en la ruta local http://127.0.0.1:3000/, si abrimos esta ruta en el navegador, podemos ver que nuestro servidor esta funcionando y por ende el proyecto inicial se ha creado correctamente:

Proyecto Node JS funcionando en la ruta http://127.0.0.1:3000/

Ahora pasemos a crear la API con GraphQL.

Creación de API Con GraphQL

Para poder usar GraphQL necesitamos instalar el paquete graphql, para instalarlo ejecutamos el siguiente comando en nuestra consola de comandos:


npm install graphql --save

added 1 package, and audited 2 packages in 2s

found 0 vulnerabilities

npm install graphql --save

added 1 package, and audited 2 packages in 2s

found 0 vulnerabilities

Paso seguido abrimos nuestro archivo app.js el cual creamos anteriormente y le agregamos lo siguiente al final del código (he colocado comentarios para explicar que hace cada sección del código):


//***** API con GraphQL *****// 
var { graphql, buildSchema } = require("graphql")

// Construimos un esquema, usando lenguaje GraphQL 
var schema = buildSchema(`
  type Query {
    hola: String
  }
`)

// La variable rootValue provee una función resolver para cada endpoint de la API
var rootValue = {
  hola: () => {
    return "Hora Crack de la Programación !"
  },
}

// Ejecutamos la consulato GraphQL '{ hola }' e imprimimos la respuesta 
graphql({
  schema,
  source: "{ hola }",
  rootValue,
}).then(response => {
  console.log(response)
})

//***** API con GraphQL *****//

var { graphql, buildSchema } = require("graphql")

// Construimos un esquema, usando lenguaje GraphQL

var schema = buildSchema(`

type Query {

hola: String

}

// La variable rootValue provee una función resolver para cada endpoint de la API

var rootValue = {

hola: () => {

return "Hora Crack de la Programación !"

}

// Ejecutamos la consulato GraphQL '{ hola }' e imprimimos la respuesta

graphql({

schema,

source: "{ hola }",

rootValue,

}).then(response => {

console.log(response)

})

Entonces nuestro archivo app.js se veria de la siguiente manera:


const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Servidor Node JS OK !');
});

server.listen(port, hostname, () => {
  console.log(`Servidor ejecutandose en http://${hostname}:${port}/`);
});

//***** API con GraphQL *****// 
var { graphql, buildSchema } = require("graphql")

// Construimos un esquema, usando lenguaje GraphQL 
var schema = buildSchema(`
  type Query {
    hola: String
  }
`)

// La variable rootValue provee una función resolver para cada endpoint de la API
var rootValue = {
  hola: () => {
    return "Hora Crack de la Programación !"
  },
}

// Ejecutamos la consulato GraphQL '{ hola }' e imprimimos la respuesta 
graphql({
  schema,
  source: "{ hola }",
  rootValue,
}).then(response => {
  console.log(response)
})

const http = require('http');

const hostname = '127.0.0.1';

const port = 3000;

const server = http.createServer((req, res) => {

res.statusCode = 200;

res.setHeader('Content-Type', 'text/plain');

res.end('Servidor Node JS OK !');

});

server.listen(port, hostname, () => {

console.log(`Servidor ejecutandose en http://${hostname}:${port}/`);

});

//***** API con GraphQL *****//

var { graphql, buildSchema } = require("graphql")

// Construimos un esquema, usando lenguaje GraphQL

var schema = buildSchema(`

type Query {

hola: String

}

// La variable rootValue provee una función resolver para cada endpoint de la API

var rootValue = {

hola: () => {

return "Hora Crack de la Programación !"

}

// Ejecutamos la consulato GraphQL '{ hola }' e imprimimos la respuesta

graphql({

schema,

source: "{ hola }",

rootValue,

}).then(response => {

console.log(response)

})

Ejecutamos el siguiente comando en nuestra consola de comandos y podemos ver que nuestra API esta devolviendo un mensaje mediante GraphQL:


node app

Servidor ejecutandose en http://127.0.0.1:3000/
{
  data: [Object: null prototype] { hola: 'Hora Crack de la Programación !' }
}

node app

Servidor ejecutandose en http://127.0.0.1:3000/

{

data: [Object: null prototype] { hola: 'Hora Crack de la Programación !' }

}

Con ello hemos creado nuestro primera API con GraphQL, si bien el servidor Node JS no lo estamos utilizando all 100%, pero lo puedes usar para devolver datos a tu vista mediante Express JS y hacer muchas cosas en el.

Conclusión

En este tutorial has aprendido a Como Crear Una API Con GraphQL, si bien esta es un ejemplo sencillo, te servirá como base para crear APIs más complejas. En otro tutorial veremos como crear APIs más avanzadas, ya que GraphQL puede ser usado en Python, PHP, Java, C#, Node JS, etc. Puedes ver la lista completa en este enlace.

Nota

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.