Anartz Mugika Ledo

Posted on Aug 18, 2020

Modularizar los ficheros GraphQL para la definición de tipos (versión 2020)

#graphql #schema

En GraphQL, como en otros tipos de implementaciones, hay momentos en el que vamos implementando más código para las nuevas funcionalidades, “causando” de manera inconsciente un pequeño “caos”, que si no le damos remedio lo antes posible, puede que se nos vaya de la manos.

Para mejorar este aspecto, siempre podemos modularizar nuestros ficheros haciendo que el proyecto sea más controlable y menos cáotico aunque siga funcionando igual.

En este caso, lo que vamos a aprender es a modularizar los ficheros con extensión graphql (*.graphql) que usamos para poder definir los tipos de definiciones en una API de GraphQL.

Con esto lo que vamos a conseguir es tener el proyecto más limpio, más accesible a la hora de trabajar y más elegante, ya que no vamos a tener cientos de líneas en un solo fichero, tendremos menos código por fichero y más ficheros pero mejor distribuidos.

Para empezar, lo primero que necesitamos es tener un proyecto de GraphQL creado y listo para trabajar.

Para crear el proyecto más rápido y con la estructura que me parece la más correcta y cómoda para trabajar, necesitamos instalar de manera global el CLI generador de proyectos de GraphQL.

Añadimos sudo por delante del comando “npm install…” en el caso de que estemos trabajando con alguna distribución de Linux o el sistema operativo MacOS.

npm install -g mugan86/graphql-project-cli

Una vez instalado el CLI de generador de proyectos de GraphQL en nuestro equipo, mediante el terminal nos ubicamos en el directorio donde vamos a querer crear el proyecto y ejecutamos el siguiente comando:

Seleccionamos el primer proyecto “graphql-hello-world” que será un proyecto muy sencillo con lo básico para empezar a trabajar en un proyecto de una API de GraphQL. Simplemente encontramos definidas tres queries que nos devuelven un mensaje de tipo string, nada destacable.

Una vez seleccionemos el tipo de proyecto, tenemos que ir contestando las preguntas que se nos hacen para añadir las configuraciones en el proyecto. Entre las cuales tenemos las siguientes:

Nombre del proyecto: El nombre que le daremos al proyecto. No puede contener mayúsculas ni empezar con un punto o guión bajo. El largo máximo del nombre es 214 caracteres.
Usuario de github.
Nombre y apellidos.
Correo electrónico.

Asistente para crear nuestro proyecto mediante el CLI Generador de Proyectos GraphQL

Con esto conseguiremos tener añadida esa información de manera personalizada dentro del package.json del proyecto que estamos generando con el CLI generador de proyectos de GraphQL.

Proceso de la creación de los ficheros del proyecto e instalación de las dependencias

Una vez que ya tengamos el proyecto creado, tenemos esta estructura:

Estructura general del proyecto creado con el generador

Vamos a poner el proyecto en marcha y para trabajar en desarrollo tenemos que ejecutar el siguiente comando:

npm run start:dev

Si todo va bien, nos debería de aparecer un mensaje en el terminal como el que véis a continuación:

Ahora que ya tenemos en marcha la API vamos a src/schema/schema.graphql

Una vez que estemos en el fichero, vamos a añadir el tipo de objeto “Usuario” y una query para obtener la lista de todos los usuarios. Tendremos algo como lo que podéis ver a continuación:

Ahora que ya hemos definido la query “usuarios”, tenemos que resolverla en el fichero “query.ts” dentro del directorio “resolvers”. Accedemos al fichero y damos solución a la definición.

Accedemos al playground de la API mediante la url: http://localhost:5000/graphql y escribimos la operación para obtener la lista de usuarios y le damos al botón de Play, obteniendo la siguiente información.

Lista de usuarios después de ejecutar la operación

Ahora que ya hemos conseguido que funcione correctamente vamos a separar la definición del tipo de objeto a otro fichero para poder ir modularizándolo y así podremos evitar tener todos los tipos de definiciones que tendrá nuestra API en un fichero.

Vamos a src/schema y dentro vamos a crear un directorio llamado “objects” y dentro de este nuevo directorio creamos un fichero llamado “user.graphql” donde vamos a añadir el tipo de objeto del usuario quitándolo del fichero schema.graphql.

Tipo de objeto del usuario en el nuevo fichero

Guardamos y si nos fijamos en el terminal ¡¡TENEMOS UN ERROR!! El error en resumen es el siguiente: Error: Unknown type “Usuario”

Esto quiere decir que no encuentra el tipo de objeto de “Usuario”, por lo que para poder añadirlo en el ejecutable del schema que realizamos dentro del fichero schema.ts en el directorio schema junto con los resolvers tenemos que añadirlo de alguna manera.

Para hacer la mezcla de todos los ficheros con extensión *.graphql, tenemos que seguir los siguientes pasos:

Accedemos a los paquetes de NPM llamados
Dentro de la información tenemos el comando para instalar dicho paquete, ejecutamos la instalación:

npm install @graphql-tools/load-files@6.0.3 @graphql-tools/merge@6.0.3

3. Siguiendo con las instrucciones, nos ubicamos en este punto y seguimos las instrucciones.

4. Accedemos al fichero schema.ts dentro de la carpeta schema (src/schema/schema.ts) y añadimos

import { mergeTypeDefs } from '@graphql-tools/merge';

import { loadFilesSync } from '@graphql-tools/load-files';

const typeDefs = mergeTypeDefs(loadFilesSync(`${__dirname}/**/*.graphql`));

// Y quitamos
import typeDefs from './schema.graphql';

Analizamos la línea:

const typeDefs = mergeTypeDefs(loadFilesSync(`${__dirname}/**/*.graphql`));

mergeTypesDefs: Esto lo usamos para mezclar todos los ficheros de extensión graphql que cargamos en el path que especificamos.
loadesFileSync: Para cargar todos los ficheros en la ubicación definida y la extensión.
`${__dirname}/**/*.graphql`: Para buscar los ficheros con extensión graphql que están en el directorio que estamos trabajando.

5. Quedará de la siguiente manera:

Carga de los ficheros con los nuevos paquetes

Una vez que ya hemos seguido los pasos para mezclar todos los ficheros con la extensión graphql, guardamos y comprobamos que no tenemos el error que nos aparecía anteriormente sobre el tipo desconocido con “Usuario”

El terminal con la API en marcha, sin errores

Como véis, no hay ningún error y en teoría está añadiendo el tipo de objeto “Usuario” como un tipo de definición junto con el tipo de raíz Query.

Vamos al playground y ejecutamos de nuevo la operación para obtener todos los usuarios.

Resultado de la ejecución para obtener la lista de usuarios.

El resultado como se puede apreciar es satisfactorio. Hemos conseguido que funcione la API de la misma manera pero aplicando una modularización para tener mejor distribuidas nuestras definiciones de los tipos y así evitar que un fichero se vuelva incontrolable a medida que crece la API.

Os dejo el enlace al respositorio con lo trabajado y un poco más: https://github.com/graphql-course/modularize-graphql-schema

Con esto finalizo este tutorial y si tenéis preferencia sobre algún tema podéis hacer propuestas mediante Twitter, Facebook, Udemy,…

Toda la información para que podáis contactarme la tenéis a continuación:

Anartz Mugika Ledo — Desarrollador Web / Móvil e Instructor On Line
Página persona de Anartz Mugika donde se podrá encontrar contenido relacionado al desarrollo. Encontraremos artículo…anartz-mugika.com

En relación con este artículo, he utilizado los conocimientos adquiridos en estos cursos que los podéis adquirir al precio más bajo siempre desde los enlaces que os proporciono.