GraphQL con Node.js y MongoDB

GraphQL es un lenguaje de consultas creado por facebook al comprender los problemas que tenian cuando las apps crecen en data, por lo que los servicios que consumian empezaban a ser deficientes en cuanto a desarrollo, mantenimiento y rendimiento de las apps. Entonces, ellos crearon la forma en interactuar entre apps óptimamente. Es decir, enviar y recibir los datos que solamente necesito.

Esta práctica es genial cuando queremos envíar datos a apps móviles, debido a que los mismos consumen los datos que solo necesitan. Imaginen un endpoint implementado con REST donde tenga que obtener solo el name y la url del picture del usuario y recibo todos sus datos asociados, esto lo evita GraphQL.

Vamos a desarrollar un backend con node.js, express.js, una configuración de babel para poder usar js moderno, MongoDB y GraphQL.

Lo primero que tenemos que hacer es instalar los paquetes que vamos a necesitar. En este caso, dentro de scripts desarrollamos una configuración para levantar js moderno a través de babel con nodemon. Babel permite ejecutar las últimas versiones de javascript cuando usamos versiones anteriores a la más recientes de node.js. En mi caso estoy usando la versión 10.19.0

Luego creamos el archivo .babelrc la cual nos permite indicar cuales presets de babel vamos a usar, en este caso solamente necesitamos @babel/preset-env

Después, creamos un folder src para organizar nuestros archivos y también nuestro server, aquí vamos a llamar los paquetes de GraphQL para configurar el backend. En paralelo a eso, vamos a llamar a una función connect que va ser la encargada de conectarse con nuestra DB en mongo. Cabe destacar que vamos a configurar un endpoint (graphql) el cual le va dar vida a una interfaz de testing para peticiones http, es decir, un cliente similar a postman que viene integrado con los paquetes de GraphQL. Ejecutamos npm start y nodemon va quedar activo.

De ir todo bien, podemos visitar el endpoint graphql en nuestro navegador para visualizar la herramienta de consultas.

Antes de continuar debemos configurar la conexión a nuestra base de datos:

Ahora, vamos a explicar dos conceptos fundamentales para trabajar con GraphQL.

Schemas: Funcionan como los endpoints de un API REST, sumado a la definición de los tipos de datos. Cuando definimos los tipos de datos en GraphQL nos referimos a configurar las características de cada objeto, es decir, si queremos manejar usuarios: ¿Cuáles serían los datos que maneja? ¿cuáles son obligatorios o no? Básicamente, a eso nos referimos. Cuando nos enfocamos en la funcionalidad de "endpoints" nos referimos a configurar con qué names vamos acceder a dichos objetos o recursos. En este caso vamos a desarrollar un schema para el módulo USERS.

type Query sirve para configurar todas las consultas, o todos los GET de un API REST. type Mutation sirve para configurar el envío de datos que afecta los recursos, lo que sería POST, PATCH AND DELELTE de un REST API. input sirve para indicar que el tipo de dato a configurar va funcionar para envíar datos. Todo esto lo podemos ver entre las lineas 5 y 25 de la imágen anterior.

Cabe destacar que, en type Query y type Mutation configuramos nuestros "endpoints" y le indicamos qué tipo de dato va consultar y qué tipo de dato va responder. Por ejemplo, en la linea 17 escribimos nuestra mutation createUser, el tipo de dato que se va enviar será un UserInput que contiene name y email. A su vez, está mutation va responder con un tipo de dato User qué configuramos en la linea 10 y que contiene name, email y el ID que se obtiene en MongoDB.

Si, suele ser un poco complicado de entender al principio pero solo necesitas practicar un poco para comprender el proceso.

Para culminar nuestro Schema, configuramos makeExecutableSchema de graphql-tools y así quedan disponibles nuestras configuraciones. en makeExecutableSchema integramos el schema y los resolvers. Los resolvers es el otro concepto que necesitamos comprender.

Resolvers: Funciones que se ejecutan como un "controlador" en GraphQL Los resolvers funcionan para ejecutar los procesos dentro de nuestro backend, aquí interactuamos con nuestra DB, APIS o servicios. En este caso vamos a llamar a nuestro modelo Users, que no es más que un modelo de Mongoose para MongoDB y ejecutamos las funciones que necesitamos para cada proceso. Recordemos que Query se ejecuta para los "endpoints" de consulta y Mutation para los "endpoints" que alteran los recursos. Los procesos internos son interacción con mongoDB aplicando async await.

También podemos ver nuestro modelo Users por si tienen alguna duda de su configuración.

Ya tenemos nuestro backend configurado, ahora vamos a realizar nuestras pruebas. Primero, vamos a guardar datos a través de la herramienta que nos ofrece graphql. Al lado derecho de frente a nuestra pantalla podemos ver la documentación que nos da la herramienta y podemos observar todas las funciones que tenemos disponible:

Ahora bien, vamos a ejecutar una mutation para usar la función createUser, la forma de escribir esto en la herramienta es la siguiente: Primero llamamos la función a createUser, le pasamos los parámetros y configuramos la respuesta. La respuesta y los datos que envíamos se pueden manipular, es decir, podemos envíar y recibir lo que necesitemos. En la primera pantalla envíamos y recibimos todos los datos, pero en la segunda solo vamos a recibir el name.

Ahora, vamos a listar todos los usuarios registrados, en la primera pantalla recibimos todos los datos, en la segunda solo el name y el ID.

Y esa es justamente la finalidad de GraphQL, cabe destacar que esta tecnología se puede implementar con varios lenguajes de programación.

Pueden clonar el proyecto AQUÍ

Espero que les sirva, saludos!