Modularizar los ficheros GraphQL para la definición de tipos (versión 2020)
Tags: graphql, schema
Published: 2020-08-18 12:18:52

---
title: Modularizar los ficheros GraphQL para la definición de tipos (versión 2020)
published: true
description: 
tags: graphql, schema
//cover_image: https://direct_url_to_image.jpg
---

<section data-field="body" class="e-content">
<section name="8c97" class="section section--body section--first"><div class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="ed32" id="ed32" class="graf graf--p graf-after--h3">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.</p><p name="4122" id="4122" class="graf graf--p graf-after--p">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.</p><p name="13d1" id="13d1" class="graf graf--p graf-after--p">En este caso, lo que vamos a aprender es a modularizar los ficheros con extensión <strong class="markup--strong markup--p-strong">graphql </strong>(*.graphql) que usamos para poder definir los tipos de definiciones en una <a href="https://www.udemy.com/course/graphql-angular-de-0-a-experto-jwt-socket-mongodb-heroku-anartz-mugika/?couponCode=MEDIUM_ANARTZ" data-href="https://www.udemy.com/course/graphql-angular-de-0-a-experto-jwt-socket-mongodb-heroku-anartz-mugika/?couponCode=MEDIUM_ANARTZ" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">API de GraphQL</a>.</p><p name="9323" id="9323" class="graf graf--p graf-after--p">Con esto lo que vamos a conseguir es tener el <strong class="markup--strong markup--p-strong">proyecto más limpio, más accesible a la hora de trabajar y más elegante</strong>, ya que <strong class="markup--strong markup--p-strong">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</strong>.</p><p name="59e1" id="59e1" class="graf graf--p graf-after--p graf--trailing">Para empezar, lo primero que <strong class="markup--strong markup--p-strong">necesitamos es tener un proyecto de GraphQL</strong> creado y listo para trabajar.</p></div></div></section><section name="175a" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="f340" id="f340" class="graf graf--p graf--leading">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.</p><p name="9e2b" id="9e2b" class="graf graf--p graf-after--p">Añadimos <strong class="markup--strong markup--p-strong">sudo</strong> por delante del comando <strong class="markup--strong markup--p-strong">“npm install…”</strong> en el caso de que estemos trabajando con alguna distribución de Linux o el sistema operativo MacOS.</p><p name="0b6f" id="0b6f" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">npm install -g mugan86/graphql-project-cli</code></p><p name="0bd5" id="0bd5" class="graf graf--p graf-after--p">Una vez instalado el <a href="https://github.com/mugan86/graphql-project-cli" data-href="https://github.com/mugan86/graphql-project-cli" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">CLI de generador de proyectos de GraphQL</a> en nuestro equipo, mediante el terminal nos ubicamos en el directorio donde vamos a querer crear el proyecto y ejecutamos el siguiente comando:</p><figure name="be50" id="be50" class="graf graf--figure graf--iframe graf-after--p"><script src="https://gist.github.com/mugan86/a4463c7362601de83744c30fbe4f0608.js"></script></figure><p name="5bdf" id="5bdf" class="graf graf--p graf-after--figure">Seleccionamos el primer proyecto <strong class="markup--strong markup--p-strong">“graphql-hello-world” </strong>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.</p><figure name="1f4f" id="1f4f" class="graf graf--figure graf--iframe graf-after--p"><script src="https://gist.github.com/mugan86/a3c50a78bcc90cbff92ff40f3eb718d5.js"></script></figure><p name="3513" id="3513" class="graf graf--p graf-after--figure">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:</p><ul class="postList"><li name="c5b3" id="c5b3" class="graf graf--li graf-after--p">Nombre del proyecto: El nombre que le daremos al proyecto. <strong class="markup--strong markup--li-strong">No puede contener mayúsculas ni empezar con un punto o guión bajo. El largo máximo del nombre es 214 caracteres</strong>.</li><li name="cb7a" id="cb7a" class="graf graf--li graf-after--li">Usuario de github.</li><li name="ccd7" id="ccd7" class="graf graf--li graf-after--li">Nombre y apellidos.</li><li name="249a" id="249a" class="graf graf--li graf-after--li">Correo electrónico.</li></ul><figure name="a1c3" id="a1c3" class="graf graf--figure graf--iframe graf-after--li"><script src="https://gist.github.com/mugan86/d52b5ffb51c72687f24781320b0e508d.js"></script><figcaption class="imageCaption">Asistente para crear nuestro proyecto mediante el CLI Generador de Proyectos GraphQL</figcaption></figure><p name="7305" id="7305" class="graf graf--p graf-after--figure">Con esto conseguiremos tener <strong class="markup--strong markup--p-strong">añadida esa información de manera personalizada dentro del package.json</strong> del proyecto que estamos generando con el <a href="https://github.com/mugan86/graphql-project-cli" data-href="https://github.com/mugan86/graphql-project-cli" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">CLI generador de proyectos de GraphQL</a>.</p><figure name="3410" id="3410" class="graf graf--figure graf--iframe graf-after--p graf--trailing"><script src="https://gist.github.com/mugan86/1f242027b5ced62536784aab1e41a63c.js"></script><figcaption class="imageCaption">Proceso de la creación de los ficheros del proyecto e instalación de las dependencias</figcaption></figure></div></div></section><section name="f71e" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="88a6" id="88a6" class="graf graf--p graf--leading">Una vez que ya tengamos el proyecto creado, tenemos esta estructura:</p><figure name="e85f" id="e85f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 508px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 72.6%;"></div><img class="graf-image" data-image-id="1*5d3NqyxWDwQEU3L3jox79w.png" data-width="741" data-height="538" data-is-featured="true" src="https://cdn-images-1.medium.com/max/800/1*5d3NqyxWDwQEU3L3jox79w.png"></div><figcaption class="imageCaption">Estructura general del proyecto creado con el generador</figcaption></figure><p name="4621" id="4621" class="graf graf--p graf-after--figure">Vamos a poner el proyecto en marcha y para trabajar en desarrollo tenemos que ejecutar el siguiente comando:</p><p name="155a" id="155a" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">npm run start:dev</code></p><p name="6434" id="6434" class="graf graf--p graf-after--p">Si todo va bien, nos debería de aparecer un mensaje en el terminal como el que véis a continuación:</p><figure name="7588" id="7588" class="graf graf--figure graf-after--p graf--trailing"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 202px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 28.799999999999997%;"></div><img class="graf-image" data-image-id="1*-IRzrL-Jqns7kPrazHGdUQ.png" data-width="1380" data-height="398" src="https://cdn-images-1.medium.com/max/800/1*-IRzrL-Jqns7kPrazHGdUQ.png"></div><figcaption class="imageCaption">Api de GraphQL en marcha</figcaption></figure></div></div></section><section name="c24b" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="e4b0" id="e4b0" class="graf graf--p graf--leading">Ahora que ya tenemos en marcha la API vamos a <strong class="markup--strong markup--p-strong">src/schema/schema.graphql</strong></p><p name="2e9e" id="2e9e" class="graf graf--p graf-after--p">Una vez que estemos en el fichero, <strong class="markup--strong markup--p-strong">vamos a añadir el tipo de objeto “Usuario” y una query para obtener la lista de todos los usuarios</strong>. Tendremos algo como lo que podéis ver a continuación:</p><figure name="61e4" id="61e4" class="graf graf--figure graf--iframe graf-after--p"><script src="https://gist.github.com/mugan86/fea979288a723e3d71029a4e7896f2a8.js"></script></figure><p name="48b1" id="48b1" class="graf graf--p graf-after--figure">Ahora que ya hemos definido la query <strong class="markup--strong markup--p-strong">“usuarios”</strong>, tenemos que resolverla en el fichero <strong class="markup--strong markup--p-strong">“query.ts”</strong> dentro del directorio <strong class="markup--strong markup--p-strong">“resolvers”. Accedemos al fichero y damos solución a la definición.</strong></p><figure name="e980" id="e980" class="graf graf--figure graf--iframe graf-after--p"><script src="https://gist.github.com/mugan86/0eb651d70549f511ef2615f8f465ad45.js"></script></figure><p name="4688" id="4688" class="graf graf--p graf-after--figure">Accedemos al playground de la API mediante la url: <a href="http://localhost:5000/graphql" data-href="http://localhost:5000/graphql" class="markup--anchor markup--p-anchor" target="_blank">http://localhost:5000/graphql</a> y escribimos la operación para <strong class="markup--strong markup--p-strong">obtener la lista de usuarios</strong> y le damos al botón de Play, obteniendo la siguiente información.</p><figure name="1c64" id="1c64" class="graf graf--figure graf-after--p graf--trailing"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 469px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 67%;"></div><img class="graf-image" data-image-id="1*IbrVCPLudyYXko3nG3LlHg.png" data-width="737" data-height="494" src="https://cdn-images-1.medium.com/max/800/1*IbrVCPLudyYXko3nG3LlHg.png"></div><figcaption class="imageCaption">Lista de usuarios después de ejecutar la operación</figcaption></figure></div></div></section><section name="fd2a" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="777f" id="777f" class="graf graf--p graf--leading">Ahora que ya hemos conseguido que funcione correctamente<strong class="markup--strong markup--p-strong"> 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.</strong></p><p name="5e01" id="5e01" class="graf graf--p graf-after--p">Vamos a <strong class="markup--strong markup--p-strong">src/schema</strong> y dentro vamos a<strong class="markup--strong markup--p-strong"> crear un directorio llamado “objects” y dentro</strong> de este nuevo directorio <strong class="markup--strong markup--p-strong">creamos un fichero llamado “user.graphql”</strong> donde vamos a añadir el tipo de objeto del usuario <strong class="markup--strong markup--p-strong">quitándolo del fichero schema.graphql.</strong></p><figure name="0a46" id="0a46" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 313px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.7%;"></div><img class="graf-image" data-image-id="1*bdBmzNXJKik9W3FOqDmnTg.png" data-width="1017" data-height="455" src="https://cdn-images-1.medium.com/max/800/1*bdBmzNXJKik9W3FOqDmnTg.png"></div><figcaption class="imageCaption">Tipo de objeto del usuario en el nuevo fichero</figcaption></figure><p name="1399" id="1399" class="graf graf--p graf-after--figure">Guardamos y si nos fijamos en el terminal ¡¡TENEMOS UN ERROR!! El error en resumen es el siguiente: <strong class="markup--strong markup--p-strong">Error: Unknown type “Usuario”</strong></p><p name="7483" id="7483" class="graf graf--p graf-after--p graf--trailing"><strong class="markup--strong markup--p-strong">Esto quiere decir que no encuentra el tipo de objeto de “Usuario”</strong>, por lo que para poder añadirlo en el ejecutable del schema que realizamos dentro d<strong class="markup--strong markup--p-strong">el fichero schema.ts en el directorio schema</strong> junto con los resolvers tenemos que añadirlo de alguna manera.</p></div></div></section><section name="67c4" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="c6ce" id="c6ce" class="graf graf--p graf--leading"><strong class="markup--strong markup--p-strong">Para hacer la mezcla de todos los ficheros con extensión *.graphql</strong>, tenemos que seguir los siguientes pasos:</p><ol class="postList"><li name="72ab" id="72ab" class="graf graf--li graf-after--p">Accedemos a los paquetes de NPM llamados</li><li name="14fa" id="14fa" class="graf graf--li graf-after--li">Dentro de la información tenemos el comando para instalar dicho paquete, ejecutamos la instalación:</li></ol><pre name="645e" id="645e" class="graf graf--pre graf-after--li">npm install @graphql-tools/load-files@6.0.3 @graphql-tools/merge@6.0.3</pre><p name="f03b" id="f03b" class="graf graf--p graf-after--pre">3. Siguiendo con las instrucciones, nos ubicamos en este <a href="https://www.graphql-tools.com/docs/merge-typedefs#import-everything-from-a-specified-folder" data-href="https://www.graphql-tools.com/docs/merge-typedefs#import-everything-from-a-specified-folder" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">punto</a> y seguimos las instrucciones.</p><p name="b16b" id="b16b" class="graf graf--p graf-after--p">4. Accedemos al fichero schema.ts dentro de la carpeta schema (<strong class="markup--strong markup--p-strong">src/schema/schema.ts</strong>) y añadimos</p><pre name="6b0e" id="6b0e" class="graf graf--pre graf-after--p">import { mergeTypeDefs } from &#39;@graphql-tools/merge&#39;;</pre><pre name="0b0e" id="0b0e" class="graf graf--pre graf-after--pre">import { loadFilesSync } from &#39;@graphql-tools/load-files&#39;;</pre><pre name="e67c" id="e67c" class="graf graf--pre graf-after--pre">const typeDefs = mergeTypeDefs(loadFilesSync(`${__dirname}/**/*.graphql`));</pre><pre name="43a7" id="43a7" class="graf graf--pre graf-after--pre">// Y quitamos<br>import typeDefs from &#39;./schema.graphql&#39;;</pre><p name="a07f" id="a07f" class="graf graf--p graf-after--pre">Analizamos la línea:</p><pre name="98b1" id="98b1" class="graf graf--pre graf-after--p">const typeDefs = mergeTypeDefs(loadFilesSync(`${__dirname}/**/*.graphql`));</pre><ul class="postList"><li name="9a63" id="9a63" class="graf graf--li graf-after--pre"><strong class="markup--strong markup--li-strong">mergeTypesDefs</strong>: Esto lo usamos para mezclar todos los ficheros de extensión graphql que cargamos en el path que especificamos.</li><li name="707f" id="707f" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">loadesFileSync</strong>: Para cargar todos los ficheros en la ubicación definida y la extensión.</li><li name="fbbb" id="fbbb" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">`${__dirname}/**/*.graphql`</strong>: Para buscar los ficheros con extensión graphql que están en el directorio que estamos trabajando.</li></ul><p name="e618" id="e618" class="graf graf--p graf-after--li">5. Quedará de la siguiente manera:</p><figure name="308e" id="308e" class="graf graf--figure graf--iframe graf-after--p graf--trailing"><script src="https://gist.github.com/mugan86/c743b0c4a52cf5d88a625a81ab7f0983.js"></script><figcaption class="imageCaption">Carga de los ficheros con los nuevos paquetes</figcaption></figure></div></div></section><section name="9e9a" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="1bb8" id="1bb8" class="graf graf--p graf--leading">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 <strong class="markup--strong markup--p-strong">“Usuario”</strong></p><figure name="9bdc" id="9bdc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 194px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 27.700000000000003%;"></div><img class="graf-image" data-image-id="1*JV5OQYYNI_XAM0i2rFrW3w.png" data-width="905" data-height="251" src="https://cdn-images-1.medium.com/max/800/1*JV5OQYYNI_XAM0i2rFrW3w.png"></div><figcaption class="imageCaption">El terminal con la API en marcha, sin errores</figcaption></figure><p name="4d68" id="4d68" class="graf graf--p graf-after--figure">Como véis, no hay ningún error y en teoría está añadiendo el tipo de objeto <strong class="markup--strong markup--p-strong">“Usuario” </strong>como un tipo de definición junto con el tipo de raíz Query.</p><p name="7019" id="7019" class="graf graf--p graf-after--p">Vamos al playground y ejecutamos de nuevo la operación para obtener todos los usuarios.</p><figure name="9b45" id="9b45" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 346px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.5%;"></div><img class="graf-image" data-image-id="1*5OOC7X8diLt9mTRCGdpzKA.png" data-width="776" data-height="384" src="https://cdn-images-1.medium.com/max/800/1*5OOC7X8diLt9mTRCGdpzKA.png"></div><figcaption class="imageCaption">Resultado de la ejecución para obtener la lista de usuarios.</figcaption></figure><p name="e018" id="e018" class="graf graf--p graf-after--figure">El resultado como se puede apreciar es satisfactorio. <strong class="markup--strong markup--p-strong">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</strong>.</p><p name="9783" id="9783" class="graf graf--p graf-after--p">Os dejo el enlace al respositorio con lo trabajado y un poco más: <a href="https://github.com/graphql-course/2-academia-online/tree/modularize-schema-new" data-href="https://github.com/graphql-course/2-academia-online/tree/modularize-schema-new" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://github.com/graphql-course/modularize-graphql-schema</a></p><p name="3ab7" id="3ab7" class="graf graf--p graf-after--p graf--trailing">Con esto finalizo este tutorial y si tenéis preferencia sobre algún tema podéis hacer propuestas mediante Twitter, Facebook, Udemy,…</p></div></div></section><section name="1518" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="1d07" id="1d07" class="graf graf--p graf--leading">Toda la información para que podáis contactarme la tenéis a continuación:</p><div name="77ab" id="77ab" class="graf graf--mixtapeEmbed graf-after--p"><a href="https://anartz-mugika.com/" data-href="https://anartz-mugika.com/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://anartz-mugika.com/"><strong class="markup--strong markup--mixtapeEmbed-strong">Anartz Mugika Ledo — Desarrollador Web / Móvil e Instructor On Line</strong><br><em class="markup--em markup--mixtapeEmbed-em">Página persona de Anartz Mugika donde se podrá encontrar contenido relacionado al desarrollo. Encontraremos artículo…</em>anartz-mugika.com</a><a href="https://anartz-mugika.com/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock" data-media-id="b46e88584727d7bfae77ade66a59f8fb"></a></div><p name="ac8c" id="ac8c" class="graf graf--p graf-after--mixtapeEmbed">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.</p><ul class="postList"><li name="8363" id="8363" class="graf graf--li graf-after--p">Crear el Generador de Proyectos GraphQL mediante el CLI: <a href="https://cursos.anartz-mugika.com/librerias-js-ts-angular-npm" data-href="https://cursos.anartz-mugika.com/librerias-js-ts-angular-npm" class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">NPM.Desarrollo y publicación de librerias en JS, TS, Angular</a></li><li name="0e54" id="0e54" class="graf graf--li graf-after--li">Desarrollo de APIs en GraphQL: <a href="https://cursos.anartz-mugika.com/graphql-de-0-a-deploy" data-href="https://cursos.anartz-mugika.com/graphql-de-0-a-deploy" class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">GraphQL con Angular de 0 a Experto. JWT, Sockets, MongoDB</a></li></ul><p name="4f43" id="4f43" class="graf graf--p graf-after--li graf--trailing">Todos los cursos al mejor precio <a href="https://anartz-mugika.com/#/courses" data-href="https://anartz-mugika.com/#/courses" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">SIEMPRE en mi web</a></p></div></div></section>
</section>
<footer><p>By <a href="https://medium.com/@mugan86" class="p-author h-card">Anartz Mugika Ledo🤗</a> on <a href="https://medium.com/p/7ec25705f3"><time class="dt-published" datetime="2020-05-28T09:29:16.385Z">May 28, 2020</time></a>.</p><p><a href="https://medium.com/@mugan86/modularizar-los-ficheros-graphql-para-la-definici%C3%B3n-de-tipos-versi%C3%B3n-2020-7ec25705f3" class="p-canonical">Canonical link</a></p><p>Exported from <a href="https://medium.com">Medium</a> on August 18, 2020.</p></footer></article></body></html>