graphql https://drupaladicto.com/ es Graphql Drupal | Consultas personalizadas (Parte 1) https://drupaladicto.com/curso/graphql/graphql-drupal-consultas-personalizadas-parte-1 <span class="field field--name-title field--type-string field--label-hidden">Graphql Drupal | Consultas personalizadas (Parte 1)</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-923 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-923 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-923 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-923"> <section id="video-only-923" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-643-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-643-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-643-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/YuvQrOx2lzE&amp;max_width=0&amp;max_height=0&amp;hash=UavHXB6O-qznKlA42_UHPJ8IGxFFzQqlfiEKgFM_pAY" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-643-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><h2><strong>Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5) o visitarlo directamente en el canal de Youtube... <a href="https://youtu.be/YuvQrOx2lzE" target="_blank">HAZ CLIC AQUÍ</a></strong></h2> <p>     Ahora que ya hemos aprendido a descargar e instalar el módulo Grapql, y que hemos explorado un poco su interfaz, es el momento de comenza a sacarle provecho; es decir, a configurarlo para que podamos extraer la información desde nuestro proyecto Drupal. </p> <p>     He de confesar que no conocía nada de este módulo en concreto hasta hace poco tiempo, ya que en la mayoría de los casos, solía utilizar Graphql, integrado en otro tipo de soluciones como Gatsby, si quieres aprender a utilizar Graphql con Gatsby, te dejo aquí en enlace del curso:</p> <h3><a href="https://www.drupaladicto.com/curso-drupal-9-headless-con-gatsby" target="_blank">CURSO DRUPAL 9 HEADLESS CON GATSBY</a></h3> <p>     En esta ocasión, tuve que investigar acerca de cómo extraer desde Drupal, utilizando solamente Graphql; para mi sorpresa, en la versión actual de <a href="https://www.drupal.org/project/graphql" target="_blank">Grapql Drupal <strong>8.x-4.4</strong></a>, se han realizado innumerables cambios, algunos de ellos bastante drásticos, con respecto a las versiones anteriores, entre las cuáles está la eliminación del sub-modulo <strong>graphql_core</strong>, esto supone que ya no es compatible con otros que facilitaban bastante el trabajo, me refiero a los módulos:</p> <ul><li><a href="https://www.drupal.org/project/graphql_views" target="_blank">GraphQL Views</a></li> <li><a href="https://www.drupal.org/project/graphql_metatag" target="_blank">GraphQL Metatag</a></li> </ul><p>     Otro de los problemas con los que me encontré durante mi investigación, es la poca información disponible en la <a href="https://joao-garin.gitbook.io/graphql-docs-update/v/graphql_4x_docs/" target="_blank">página con la documentación oficial del módulo</a>, ya que, además de ser muy poca, tiene varios ejemplos desactualizados y enlaces a documentación que ya no está disponible, o que además sólo se muestran muy pocos ejemplos, y ninguno de ellos, trata de lo que debería ser lo más importante, en mi opnión, refiriéndose a cómo creamos esquemas o producers, para extraer datos desde campos personalizados en Drupal.</p> <p>     Por todo esto, he decidido compartir contigo, los pasos más importantes a tomar en cuenta, para que puedas configurar, tus esquemas, producers y resolvers, a partir de los módulos de ejemplo, incluidos dentro Grapql Drupal, sin que tengas que invertir todo el tiempo que he necesitado, hasta comprender y poder utilizar esta información.</p> <h2>   Cómo comenzar a configurar tu Graphql en Drupal</h2> <p>       Paso 1 - Activar los módulos de ejemplo</p> <p>        Como he dicho antes, una vez hayamos descargado el módulo de Graphql Drupal, el siguiente paso debería ser, activar los módulos de ejemplo que podrá encontrar dentro del propio módulo Grapql Drupal.</p> <p>        Podrás encontrarlos dentro del a carpeta <strong>Examples</strong>, dentro del módulo Graphql</p> <p>        Lo que tendremos que hacer, es copiarlos dentro de la carpeta modules/custom, para que podamos activarlos e interactuar con su configuración a partir de ese momento.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 38.5%;" data-ratio="38.5" data-b-token="b-fd9003695ad" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-639c885cdb5e8.jpg?itok=AGpxO7gr" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="308" typeof="foaf:Image" /></div></div> <p>     Recuerda, que la carpeta Custom no se genera por defecto, así que si no la tienes, deberías crearla y dentro colocar los dos módulos de ejemplo, tal como te muestro en la imagen, a continuación podrás activarlos desde la interfaz de usuario de Drupal, sin hacer ningún cambio adicional todavía.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 28.88%;" data-ratio="28.88" data-b-token="b-7dbe81a2fa6" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-639c8981d31af.jpg?itok=aOEAMwoZ" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="231" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 58%;" data-ratio="58" data-b-token="b-5d81c6fe942" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-639c8af8221fb.jpg?itok=XmSIZoq9" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="464" typeof="foaf:Image" /></div></div> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 22.63%;" data-ratio="22.63" data-b-token="b-36fd919e5e6" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-639c8b0a9b669.jpg?itok=5DUgg8oZ" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="181" typeof="foaf:Image" /></div></div> <p>     Recuerda, que en el capítulo anterior ya creamos nuestro servidor de Grapql, desde donde pudimos visitar el explorador y que, además, será desde dónde realizaremos todas nuestras consultas, para extraer los datos que se alojan en nuestro proyecto Drupal.</p> <p>     Así, que lo siguiente que haremos, será asegurarnos de que esta vez, estamos utilizando nuestros módulos recién activados., para ello, haremos clic en el botón editar de nuestro servidor y nos aseguraremos de tener seleccionado el <strong>Example schema</strong> y <strong>Example extension</strong>.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 49.88%;" data-ratio="49.88" data-b-token="b-90ec3e76ec6" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-639c8dc1589c1.jpg?itok=U6sbtpPX" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="399" typeof="foaf:Image" /></div></div> <p>     Otras de las opciones que deberíamos tener activadas, y que nos ayudarán durante todo el proceso de desarrollo, son las que encontraremos en la parte inferior de la página de configuración del servidor, destinadas a los mensajes de depuración. </p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 30.75%;" data-ratio="30.75" data-b-token="b-e36966ae963" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-639c8ec19844e.jpg?itok=-kyaGD6X" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="246" typeof="foaf:Image" /></div></div> <p>     Tan pronto como hayamos confirmado que tenemos todo lo necesario para continuar, podremos volver a la pestaña del explorador del servidor y comprobar que no tenemos ningún fallo, previo comenzar con nuestro desarrollo.</p> <p>     Para comprobar que todo funciona correctamente, podríamos generar una consulta, haciendo clic en los elementos disponibles de la columna de la izquierda, para mostrar un número limitado de artículos, tal y como muestro en la siguiente imagen. </p> <p>     He utilizado el módulo Devel para generar algunos artículos de prueba, si quieres aprender a utlizarlo te dejo aquí el enlace:</p> <p>     <a href="https://www.drupaladicto.com/curso/como-generar-contenidos-de-prueba-con-el-modulo-devel" target="_blank">https://www.drupaladicto.com/curso/como-generar-contenidos-de-prueba-con-el-modulo-devel</a></p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 51.88%;" data-ratio="51.88" data-b-token="b-182ac5496d3" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-639c926700be8.jpg?itok=edRNW66U" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="415" typeof="foaf:Image" /></div></div> <h2>Producers y Resolvers</h2> <p>     Graphql es un lenguaje de consultas, que utiliza lo que se denomina como Producers, equivalente a esquemas de definición de datos y sus tipos, y los Resolvers, que sería el código que nos servirá luego para extraer estos datos, basándonos en las propiedades descritas en el Producer o esquema previo.</p> <p>     Según su página oficial:</p> <p><strong>     "Un productor de datos es más o menos una función que toma algunos argumentos o parámetros (ya sea de la consulta del usuario final o estáticos) y los resuelve en otros datos, como tomar una entidad (como un nodo) y devolver un campo en particular."</strong></p> <p>     Dicho esto, comencemos explorando algunos de los archivos de nuestro módulo <strong>graphql_example</strong>, no voy a profundizar demasiado en la estructura general, pero sí te garantizo que contarás con el suficiente conocimiento para configurar tus propias consultas.</p> <h3>Cómo funcionan los Producers en Graphql</h3> <p>     Ahora, abriremos el archivo ubicado dentro de graphql_example/graphql/<strong>example.graphqls</strong>, entro encontrarás la definición de tipo de esquema <strong>Query</strong>, y a continuación el tipo de <strong>Producer</strong>, donde se describen los campos y el tipo de campo que se podrá consultar posteriormente.</p> <p>     Es por esta razón, que al visitar el explorador del servidor Graphql, vemos las opciones que se muestran en la columna izquierda del panel.</p> <p>     De toda la información que aparece en este archivo, nos enfocaremos en la que se refiere al tipo de contenido Artículo, con el cuál realizaremos todas las consultas y pruebas de este ejercicio:</p> <pre> type Article { id: Int! title: String! author: String } </pre> <p>     Recuerda que en el primer capítulo hablamos de que en Graphql, siempres sabríamos lo que esperábamos recibir en la consulta, ya que se definiía previamente en el esquema Producer. </p> <p>     Sabiendo esto, entenderemos que, en este caso, nos estamos refiriendo al tipo de contenido Article y tres de sus campos, que serán el Id, Title y Author.</p> <p>     El <strong>Id</strong> y el <strong>Title</strong>, forman parte íntegra del tipo de contenido Article, es decir, están a un mismo nivel, en cambio, el <strong>Author</strong>, se refiere a otro tipo de entidad, <strong>(Referenciada)</strong>, que viene desde fuera del Article. </p> <p>     Hagamos un prueba rápida para asegurarnos de que estamos entendiendo, vamos nuevamente al explorador de Graphql y esta vez, realizaremos una consulta, especificando el id de un artículo y extrayendo todos los campos disponibles que veremos en la columna izquierda.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 35.88%;" data-ratio="35.88" data-b-token="b-8a2ff2b930f" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-639c9a32c1197.jpg?itok=IZkKdq-7" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="287" typeof="foaf:Image" /></div></div> <h3>Cómo funcionan los Resolvers en Graphql</h3> <p>     Esta vez exploraremos la otra parte de la consulta que nos interesa, es decir los resolvers, para ello abriremos el archivo ubicado llamado <strong>ExampleSchema.php</strong>, que encontraremos en <strong>graphql_example</strong>/src/Plugin/GraphQl/Schema/<strong>ExampleSchema.php</strong></p> <p><strong>     </strong>Dentro del arhivo, buscaremos las líneas específicas que se refieren a los campos que tendremos disponibles para la consulta, dentro del método<strong> protected function addArticleFields</strong>, allí econtraremos las siguientes líneas de código:</p> <pre> protected function addArticleFields(ResolverRegistry $registry, ResolverBuilder $builder): void { $registry-&gt;addFieldResolver('Article', '<strong>id</strong>', $builder-&gt;produce('entity_id') -&gt;map('entity', $builder-&gt;fromParent()) ); $registry-&gt;addFieldResolver('Article', '<strong>title</strong>', $builder-&gt;compose( $builder-&gt;produce('entity_label') -&gt;map('entity', $builder-&gt;fromParent()), $builder-&gt;produce('uppercase') -&gt;map('string', $builder-&gt;fromParent()) ) ); $registry-&gt;addFieldResolver('Article', '<strong>author</strong>', $builder-&gt;compose( $builder-&gt;produce('entity_owner') -&gt;map('entity', $builder-&gt;fromParent()), $builder-&gt;produce('entity_label') -&gt;map('entity', $builder-&gt;fromParent()) ) ); }</pre> <p>     He querido resaltar el inicio y final de cada uno de los campos, declarados en el Resolver, porque debería ser lo primero que entiendas, si prestas atención, en la primera línea de cada uno, encontramos dos argumentos, el primero ser refiere al <strong>Elemento Padre</strong> o <strong>Entidad principal</strong> (<strong>Article</strong>) y el siguiente, a lo que sería el <strong>Campo</strong> o <strong>Entidad referenciada (Id, Title, Author)</strong>, desde donde se extraerán los valores para la consulta<strong>.</strong></p> <h2><strong>   Añadir campos personalizados para la consulta</strong></h2> <p><strong>     </strong>Aquí llega la parte más interesante, y en la que tarde más de tres semanas de investigación, para comprender cómo podía añadir y extraer los valores de campos personalizados y de otros tipos como, por ejemplo, Paragraphs, Taxonomías, Metatags, Imágenes o Enlaces.</p> <p>     Como mencioné al principio, en las versiones anteriores de Graphql, estaban disponibles varios módulos específicos que te proporcionaban un solución, según el tipo de esquema o de datos con los que necesitabas trabajar, pero todo esto ha quedao excluído en la versión actual.</p> <p>     Por eso he creado una colección de ejemplos más prácticos, para que puedas realizar la mayoría de las consultas, con las que te podrías encontrar en cualquier proyecto, cuyo requerimiento ser utilizar sólo Graphql con Drupal.</p> <p>     Explicaré cada uno de los ejemplos, para que puedas entender cómo funcionan y la mejor forma de integrarlos en tus desarrollos, de manera estable y funcional, sin dependender de ningún módulo adicional.</p> <p>     Hasta la próxima.</p> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mar, 07/03/2023 - 10:20</span> Tue, 07 Mar 2023 09:20:32 +0000 webmaster 230 at https://drupaladicto.com Graphql | Módulo Drupal https://drupaladicto.com/curso/graphql/graphql-modulo-drupal <span class="field field--name-title field--type-string field--label-hidden">Graphql | Módulo Drupal</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-924 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-924 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-924 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-924"> <section id="video-only-924" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-644-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-644-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-644-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/c4UOnyst7RI&amp;max_width=0&amp;max_height=0&amp;hash=palULgbBLsj_Xf7oh0bA_-NYitmzSKEktLSbtoVGUfU" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-644-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><h2><strong>Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5)</strong></h2> <p>     Ahora que tenemos los conocimientos básicos, acerca del uso del lenguaje de consultas GraphQL, es el momento de aplicar lo aprendido interactuando con un proyecto Drupal 9.</p> <p>     Para ello necesitaremos instalar el módulo contribuido, llamado Graphql, éste módulo se instala siguiendo el procedimiento habitual, es decir, a través del gestor de paquetes Composer, esto nos facilitará, tanto la descarga de los módulos y sus dependencias, como las futuras actualizaciones.</p> <h2>Requisitos:</h2> <ul><li>Tener un proyecto de Drupal 9 funcionando en un entorno local</li> <li>Tener disponibilidad de ejecutar comandos con Composer</li> <li>Tener disponibilidad para ejecutar comandos con Drush   </li> </ul><h2>Pasos para comenzar con Grapql en Drupal 9</h2> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 49.25%;" data-ratio="49.25" data-b-token="b-48e9bcb3651" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634f105dd0fdc.jpg?itok=sh_SdJ4S" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="394" typeof="foaf:Image" /></div></div> <h3>   Paso 1: Descarga del módulo Graphql</h3> <p>     Obviamente, si vamos a trabajar con Grapql dentro de Drupal, necesitaremos descargar la versión más reciente (Superior a la 4), compatible con Drupal 9.</p> <p>     En versiones anteriores a la 4.4, para realizar nuestras consultas con Graphql, dentro de Drupal, era necesario descargar y activar varias dependencias, que nos permitirían recuperar datos específicos como las taxonomías, vistas, paragraphs, etc.</p> <p>     Pero a partir de la versión 4., podremos recuperar todos lo que necesitemos, con sólo descargar un módulo. Para ello, utilizaremos el siguiente comando:</p> <pre> composer require 'drupal/graphql:^4.4'</pre> <p>     A continuación, podremos activarlo, utilizando drush</p> <pre> drush en graphql</pre> <p>     Finalmente, borraremos la cache de drupal y actualizaremos la base de datos:</p> <pre> drush cr drush updb</pre> <p>     Si lo prefieres, puedes activar el módulo de la manera tradicional, utilizando la interfaz de usuario de Drupal, accediendo a la página de administración de módulos, ubicada en: "/admin/modules"</p> <p>     También te recomiendo descargar y activar el módulo Admin Toolbar, para facilitarte la navegación a través de tu sitio Drupal.</p> <p>     Para conocer el uso del módulo Admin Toolbar, <a href="https://bit.ly/3SaTPaC" target="_blank">HAZ CLIC AQUI</a></p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 30.5%;" data-ratio="30.5" data-b-token="b-01fbd8c87bf" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634f8cb321ea7.jpg?itok=p7ztVrAi" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="244" typeof="foaf:Image" /></div></div> <p>   Es posible que al intentar descargar el módulo Graphql ^4.4, mediante el uso de Composer, nos salte un error relacionado con la dependencia de éste y otro módulo llamado <strong>typed_data</strong></p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 25.75%;" data-ratio="25.75" data-b-token="b-c0741d5942a" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634f8db3ecc53.jpg?itok=n-PxFqXr" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="206" typeof="foaf:Image" /></div></div> <p>     Para saber cómo solucionar este error, <a href="/snippet/drupalgraphql-440-requires-drupaltypeddata" target="_blank">HAZ CLIC AQUI</a></p> <p>     Una vez hayas corregido el fallo, podrás activar el módulo desde la consola con el comando <strong>drush en</strong></p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 42.13%;" data-ratio="42.13" data-b-token="b-9fe2634a78a" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634f9879125ed.jpg?itok=FCeYr3ha" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="337" typeof="foaf:Image" /></div></div> <h3>   Generando contenidos para las consultas</h3> <p>     Ya hemos mencionado que Graphql es un lenguaje creado para realizar consulta, pero por ahora no tenemos ningún contenido dentro de nuestro Drupal, por lo tanto, vamos a generar algunos contenidos de prueba con el módulo Devel Generate, para ello, ejecutaremos el comando:</p> <pre> composer require 'drupal/devel:^5.0' -W </pre> <p>     Si todavía no conoces los módulos Devel y Devel Generate <a href="/curso/como-generar-contenidos-de-prueba-con-el-modulo-devel" target="_blank">HAZ CLIC AQUI</a></p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 31.88%;" data-ratio="31.88" data-b-token="b-5eea211ebb9" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634fa2f84d4bc.jpg?itok=77JYMmnR" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="255" typeof="foaf:Image" /></div></div> <p>     Tan pronto como hayamos generado algunos contenidos para realizar pruebas, podremos acceder al explorador de Graphi, para comenzar con nuestras consultas de prueba.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 61.38%;" data-ratio="61.38" data-b-token="b-c865c9c642f" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634fa3d295821.jpg?itok=Fn2pzNj2" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="491" typeof="foaf:Image" /></div></div> <h2>   Paso 2 : Creación y configuración del servidor de pruebas </h2> <p>     Ya que tenemos contenido para comenzar con nuestras pruebas, el próximo paso será configurar nuestro servidor de acceso para realizar las consultas con Graphql, para ello accederemos a la url "/admin/config/graphql", donde veremos una pantalla como la siguiente imagen</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 36.13%;" data-ratio="36.13" data-b-token="b-f659bdb73b2" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634fa4d262d10.jpg?itok=PjRIHzFG" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="289" typeof="foaf:Image" /></div></div> <p>     Si es tu primera vez con Graphql en Drupal, puede que la manera de comenzar te resulte un poco intimidatoria, ya que al hacer clic en el botón <strong>Crear servidor</strong> y pasar a la pantalla siguiente, no te queda muy claro cómo deberías continuar.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 57.25%;" data-ratio="57.25" data-b-token="b-4b9d3ba4bd7" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634fa9b81a5ee.jpg?itok=sH9M4LS5" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="458" typeof="foaf:Image" /></div></div> <p>     Por esta razón, en este punto, instalaremos dos módulos adicionales, que se han descargado con Graphql, pero que todavía no están operativos, (<strong>GraphQL composable example</strong> y <strong>GraphQL examples</strong>), para ello, volveremos a la url "/admin/modules" y escrbiremos en el buscador de módulos Graphql, para que podamos encontrar y activar estos dos módulos de ejemplo:</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 38.88%;" data-ratio="38.88" data-b-token="b-f1ba4175b8e" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634faa13d042a.jpg?itok=5TUJiTP7" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="311" typeof="foaf:Image" /></div></div> <p>     Ahora que hemos activados ambos módulos, si volvermos a la pantalla anterior, para volver a configurar el servidor de pruebas, veremos que en la pestaña justo debajo del nombre del servidor, podremos desplegar dos nuevas opciones, correspondientes a los esquemas de ejemplo para nuestras primeras consultas.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 38.88%;" data-ratio="38.88" data-b-token="b-2baabf235b9" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634faa6e79a66.jpg?itok=v9OJKw33" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="311" typeof="foaf:Image" /></div></div> <p>     Así que ya podremos continuar con la siguiente fase, para esto, actualizaremos los datos, añadiendo el nombre de nuestro servidor y la url que utilizaremos para acceder a las consultas.</p> <p>     En mi caso he nombrado el servidor como <strong>Graphql Prueba</strong> y añadido la url del servidor <strong>/graphql</strong>, en el formulario para el endpoint. Una vez guardados los cambios, podremos ver la pantalla con nuestro nuevo servidor creado correctamente.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 28%;" data-ratio="28" data-b-token="b-8f39294c62c" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634fab9a16fb0.jpg?itok=DjW3TnyA" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="224" typeof="foaf:Image" /></div></div> <p>     El siguiente paso será acceder nuevamente a la pantalla de configuración, harcemos clic en el botón editar y luego veremos varias opciones, una de ellas es <strong>El explorador</strong>, que será el lugar para comenzar con nuestras consultas.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 33%;" data-ratio="33" data-b-token="b-772eac05985" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634fac8ca90ba.jpg?itok=CCCzjbyh" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="264" typeof="foaf:Image" /></div></div> <h2> Paso 3 : Realizar las primeras consultas</h2> <p>     Como recordarás el capítulo anterior, Grapqhl tiene tres columnas, a la izquierda veremos los datos disponibles, que en este caso estarán guardados en la base de datos de Drupal 9, en la columna central, es donde podremos añadir y modificar nuestras consutas, utilizando la estructura de datos de Graphql y en la tercera columna, a la derecha, veremos los resultados devueltos, una vez hayamos echo clic en el botón query (Play), ubicado en la parte superior de la columna central.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 33%;" data-ratio="33" data-b-token="b-5ee29e491c0" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634fae403563c.jpg?itok=_F5rMvuF" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="264" typeof="foaf:Image" /></div></div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mar, 07/03/2023 - 10:15</span> Tue, 07 Mar 2023 09:15:27 +0000 webmaster 229 at https://drupaladicto.com Graphql con Drupal | Instalación con Lando https://drupaladicto.com/curso/graphql/graphql-con-drupal-instalacion-con-lando <span class="field field--name-title field--type-string field--label-hidden">Graphql con Drupal | Instalación con Lando</span> <div class="field field--name-field-contenidos-cap-gratis field--type-entity-reference-revisions field--label-hidden field__items"> <div class="field__item"> <style>#video-only-922 .play-btn:hover::after { border-left: 15px solid #1fd7d9; transform: scale(20); border-left: 15px solid #fff; } #video-only-922 .play-btn::before { border: 5px solid #1fd7d9; } #video-only-922 .play-btn { background: radial-gradient(#1fd7d9 50%, rgba(66, 109, 202, 0.4) 52%); }</style> <div class="paragraph paragraph--type--video-only paragraph--view-mode--default" id="vol-922"> <section id="video-only-922" class="about area-padding video-block-wrapper"> <div class="col video-box"> <div class="portada"> <img src="/sites/default/files/styles/diapositiva_1200x650/public/2023-07/portada-gratuito-grande_2.jpg?itok=8dBQYXT7" class="img-fluid" alt=""> <div class="field field--name-vo-youtube-video field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Video de Youtube</div> <div class="field__item"><article class="media media--type-remote-video media--view-mode-diapositiva-1200x650"> <div class="field field--name-field-media-oembed-video field--type-string field--label-visually_hidden"> <div class="field__label visually-hidden">URL de Video remoto</div> <div class="field__item"><div class="modal micromodal-slide" id="modal-media-642-0-field-media-oembed-video" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-media-642-0-field-media-oembed-video-content"> <a class="modal__btn" data-micromodal-close aria-label="Close this dialog window">X</a> <main class="modal__content" id="modal-media-642-0-field-media-oembed-video-content"> <div class="videoWrapper"><iframe src="/media/oembed?url=https%3A//youtu.be/g6Xs1DB2UMI&amp;max_width=0&amp;max_height=0&amp;hash=sDqyGJRadLFpmviW-mwhFuZ66k9ht3fptMa0BuL1Vd0" frameborder="0" allowtransparency="" class="media-oembed-content" title="Time Value of Money"></iframe></div> </main> </div> </div> </div> <div><a class="myButton" data-micromodal-trigger="modal-media-642-0-field-media-oembed-video"><span class="btn play-btn">.</span></a></div> </div> </div> </article> </div> </div> </div> </div> </section> </div> </div> <div class="field__item"> <div class="paragraph paragraph--type--bloque-parrafo paragraph--view-mode--default"> <div class="clearfix text-formatted field field--name-field-textos-curso field--type-text-long field--label-hidden field__item"><h2><strong>i no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... <a href="https://youtu.be/g6Xs1DB2UMI" target="_blank">HAZ CLIC AQUI</a></strong></h2> <p>Graphql es un lenguaje de consultas para tu API, desarrollado por Facebook, cuyo propósito fundamental es añadir la mayor velocidad posible en las consultas realizadas a través de tus aplicaciones.</p> <p>En este primer capítulo, aprenderemos a instalar un servidor local, utilizando Lando, en un entorno de Linux, con WSL2 dentro de Windows 11.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 47.83%;" data-ratio="47.83" data-b-token="b-f2ecedc9127" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-634174ace11fb.jpg?itok=--j-uf9O" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="1244" height="595" typeof="foaf:Image" /></div></div> <h2>Requisitos para el curso:</h2> <p>   1.- Tener instalado Lando en tu entorno Linux. Si no sabes cómo <a href="/instalaciones-con-lando" target="_blank">HAZ CLIC AQUI</a></p> <p> </p> <h2>Cómo configurar e instalar un servidor Graphql local con Lando</h2> <p>   El objetivo de este curso es que puedas instalar, configurar y comenzar a trabajar con un servidor de pruebas Graphql, en tu entorno local, por esta razón diseñaremos una configuración muy sencilla y fácil de entender. Ya que el verdadero propósito es que puedas entender su potencial al aplicarlo con Drupal 9.</p> <h3>   Paso 1 : Configuración proyecto Lando</h3> <p>     El primero de los pasos que necesitarás, es crear la carpeta donde se alojarán todos los archivos de tu proyecto, en nuestro caso, trabajaremos con un entorno Linux, combinando el Subsistema WSL2 de Windows; en este punto ya debes tener instalado y configurado Lando para continuar con el resto del curso.</p> <p>     Si ya tienes todo listos, en la consola, nos colocaremos en la ubicación deseada, y a continaución, crearemos una carpeta con los permisos de escritura y lectura, para evitar fallos durante la instalación:</p> <pre> sudo mkdir graphql_project</pre> <pre> sudo chmod -R 777 graphql_project</pre> <p>     A continuación nos moveremos dentro de la carpeta y añadiremos el archivo de configuración de Lando, para ello utilizaremo el comando touch de Linux.</p> <pre> sudo touch .lando.yml</pre> <p>     Ahora abriremos el archico utilizando el editor Nano o el que tengas disponible y pegaremos dentro el código que te mostraré más abajo.</p> <pre> sudo nano .lando.yml</pre> <p> </p> <pre> name: graphql proxy: appserver: - hostname: graphql.lndo.site port: 4000 services: appserver: type: node:17 ssl: true sslExpose: false tooling: npm: service: appserver node: service: appserver graphql: cmd: /app/node_modules/.bin/graphql_project service: appserver</pre> <p> </p> <p>     Guardaremos los cambios en el archivo de configuración de lando, y luego ejecutaremos el comando de arranque, para que podamos comprobar que todo funciona correctamente, además de poder ejecutar el resto de comandos que vamos a necesitar para la instalación.</p> <pre> lando start</pre> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 20.88%;" data-ratio="20.88" data-b-token="b-7f7562a1f05" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-63417a096e335.jpg?itok=AcU1vFp8" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="167" typeof="foaf:Image" /></div></div> <h3>Paso 2: Comprobación e inicialización del servidor</h3> <p>     El siguiente paso, ahora que ya hemos comprobrado que Lando funciona correctamene, será saber las versiones de node y Npm que tenemos para el resto del proceso de instalación, por lo tanto, en la consola, ejecutaremos dichos comandos:</p> <pre> lando node -v lando npm -v</pre> <p>     El resultado devuelto debería corresponder con la configuración que tenemos definida en nuestro archivo de configuración .lando.yml</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 8.69%;" data-ratio="8.69" data-b-token="b-614141fd9e4" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-63417aea77c91.jpg?itok=YSOCcQjm" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="1059" height="92" typeof="foaf:Image" /></div></div> <h3>Paso 3 Inicialización del Servidor</h3> <p>     Si no hemos tenido ningún fallo en los pasos anteriores, podremos inicializar nuestro servidor, para que comience la descarga de los archivos de Node que necesitaremos, además de Package.json, package.lock, entre otros.</p> <p>     Para ello, ejecutaremos el siguiente comando en nuestra consola:</p> <pre> lando npm init -y</pre> <p>     El resultado que deberíamos ver en nuestra pantalla, si todoo es correcto, será algo parecido a la siguiente imagen:</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 31.88%;" data-ratio="31.88" data-b-token="b-768652dd430" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-63417c2d3c9b2.jpg?itok=NREg0Uhr" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="255" typeof="foaf:Image" /></div></div> <p>     Ahora que ya hemos inicializado nuestro servidor, procederemos a instalar el Framework Apollo-server, que nos permitirá instalar más rápidamente nuestro servidor, si quieres más información sobre Apollo Server HAZ CLIC AQUÍ y Graphql, para ello, ejecutaremos en pantalla, el siguiente comando:</p> <pre> lando npm install apollo-server graphql</pre> <p> </p> <p>     Si quieres saber más sobre Apollo Server <a href="https://www.apollographql.com/docs/apollo-server/" target="_blank">HAZ CLIC AQUI</a></p> <p> </p> <h3>Paso 4 : Modificación de Package.json</h3> <p>     Para poder utilzar mscript en nuestro servidor Graphq, añadiremos abriremos el archivo package.json, y añadiremos la línea:</p> <pre> "type": "module",</pre> <p>     Luego guardaremos el cambio y crearemos el archivo.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 46.38%;" data-ratio="46.38" data-b-token="b-8eb01730b19" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-63417dd3b1caf.jpg?itok=u_HvzRL7" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="371" typeof="foaf:Image" /></div></div> <h3>Paso 5: Creación de nuestro archivo de configuración para Graphql</h3> <p>     La idea de este curso, es que podamos comenzar lo más pronto posible, a explorar y experimentar con Graphl, así que para ello, pondremos toda la información que necesitaremos, dentro de un archivo al que llamaremos index.js</p> <pre> sudo touch index.js</pre> <p>     Luego abriremos el archivo utilizando el editor, o el IDE que prefieras...</p> <pre> sudo nano index.js</pre> <p>   y dentro pegaremos las siguientes líneas:</p> <pre> import {ApolloServer, gql} from 'apollo-server' const students = [ { name: "Hugo", lastname: "Sierra", city: "Santo Domingo", phone_number: "666 555 444", id: "kkt2053-12365-88552" }, { name: "Ana", lastname: "Dominguez", city: "La Romana", phone_number: "558 555 444", id: "5552053-1tt65-88552" }, { name: "Carmen", lastname: "Ruiz", phone_number: "569 555 444", id: "ccg2053-12365-88552" } ]</pre> <p>     En esta primera parte del archivo, comenzamos con la importación de la librería o Framework Apollo, que nos permitirá configurar y arrancar un servidor de Graphql, muy fácilmente, además de ofrecernos una interfaz gráfica que nos hará sentir como en casa, desde el primer momento.</p> <p>     En las líneas siguientes, hemos añadido un array de estudiantes, dentro de una constante, que nos servirá como base de datos y punto de partida en este primer encuentro con Graphql.</p> <h3>   Paso 6: Definición de datos y peticiones</h3> <p>     Una de las principales ventajas que ofrece el uso de Graphql, es que debemos definir los tipos de datos y las peticiones, previamente, para poder interactuar con la información que vayamos a necesitar.</p> <p>     Para definir los datos y peticiones, dentro de nuestro servidor Graphql, definiremos una constante, con la siguiente estructura:</p> <pre> const typeDefs = gql` AQUI IRÁN TUS DATOS `</pre> <p><strong>Tipos de datos</strong><br />      Puedes encontrar todos los tipos de datos disponibles para Graphl visitando la <a href="https://graphql.org/" target="_blank">página oficial de Graphql</a>, además, si queremos configurar un dato como requerido u oligatorio, utilzaremos el signo de puntuación admiración final: "!".</p> <p>     Algunos tipos de datos que utilizaremos en este curso son:</p> <p><strong>String:</strong> Para definir cadenas de texto<br /><strong>ID:</strong> Para definir identificadores únicos<br /><strong>Int:</strong> (Integer) Para definir datos del tipo Integer<br /><strong>[Student]</strong>: Array de datos</p> <p><strong>Un ejemplo sera:</strong></p> <p>   type Student {<br />        name: String!<br />        lastname: String!<br />        city: String<br />        id = ID!<br />    }</p> <p><strong>Tipos de petición</strong><br />    Como he mencionado anteriormente, además de definir el tipo de datos que utilizaremos en nuestras consultas con Graphql, necesitaremos definir los tipo de petición que realizaremos, el más común es <strong>type Query</strong> </p> <p>   Dentro de las peticiones, definiremos los método que utilizaremos para realizar las consultas, una vez definidos estos métodos, y sus parámetros en caso de necesitarlos, podremos añadir su estructura en otro tipo de componente, conocido como Resolvers.</p> <p><strong>Un ejemplod e petición será:</strong></p> <p>   type Query {<br />        numberOfStudents: Int!<br />        allStudents: [Student]!<br />    }</p> <p>  Ahora que tenemos claro estos primeros conceptos, lo siguiente que añadiremos a nuestro archivo index.js, serán las definiciones de nuestros datos, con sus respectivos tipos y a continuación la definición de las primeras peticiones, que serán del tipo Query, así que copia las siguientes líneas y pégalas justo debajo del array de datos.</p> <pre> const typeDefs = gql` type Student { name: String! lastname: String! city: String id : ID! } type Query { numberOfStudents: Int! allStudents: [Student]! } `</pre> <h3>   Paso 7: Definición de los Resolvers (Métodos para las consultas)</h3> <p>     Ya que tenemos definidos los tipos de peticiones, que vamos a realizar, es el momento de decirle al servidor, desde qué fuente recibirá la información, además de la manera en que se procesará la misma, para ellos, utilizaremos los Resolvers, que serán los mismos métodos que hemos definido anteriormente, pero con la estructura correspondiente, para que podamos obtener los resultados esperados.</p> <pre> const resolvers = { Query: { numberOfStudents: () =&gt; students.length, allStudents: () =&gt; students } }</pre> <p>     En el anterior código, estamos definiendo el método numberOfStudents, que nos devolverá el número total de estudiantes, guardados en la constante students, que definimos al principio. Luego en el método allStudents, recibiremos todos los datos que forman el array enla misma constante.</p> <p>Paso 8: Creación de nuestro servidor Graphql</p> <p>     Llegados a este punto, con todo lo necesario para que funcione correctamente nuestro servidor Graphql, sólo faltará construirlo y ponerlo en marcha.</p> <p>     Para crear una instancia de nuestro servidor Grapql, gracias a que estamos utilzando Apollo-server, sólo necesitaremos añadir las siguientes líneas al archivo:</p> <pre> const server = new ApolloServer({ })</pre> <p>     Un servidor Graphql, necesitará varios parámetros, para que puedan funcionar las consultas, es obligatorio que se respeten los nombres de dichos parámetros para que los datos de la consulta sean reconocidos por el servidor. </p> <pre> const server = new ApolloServer({ typeDefs, resolvers })</pre> <p> </p> <h3>Paso 9: Arranque del servidor</h3> <p>     Finalmente, ha llegado el momento más esperado, por fin veremos funcionando nuestro servidor y podremos comenzar de inmediato a realizar consultas e interactuar con su interfaz.</p> <p>     Para arrancar el servidor, necesitaremos tres simples pasos adicionales al resto:</p> <p>1.- Añadir las siguientes líneas al archivo index.js</p> <pre> server.listen().then(({url}) =&gt; { console.log (`Server ready en la ${url}`) })</pre> <p>2.- Ejecutar, en la consola el comando de node, para que reconozca nuestra configuración, como estamos trabajando con lando:</p> <pre> lando node index.js</pre> <p>3.- Acceder a la url que hemos definido en el archivo de configuración de lando.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 19.46%;" data-ratio="19.46" data-b-token="b-2bf7cb9d2f5" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-63418e866798d.jpg?itok=RjQjS6Vf" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="1043" height="203" typeof="foaf:Image" /></div></div> <p>     Para acceder a la url, utilizaremos la que tiene el prefijo HTTPS, o de lo contrario nos devolverá error de conexión con el servidor Grapql. Si no tienes ninún fallo, deberías ver la página de bienvenida del servidor de Graphql.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 53.15%;" data-ratio="53.15" data-b-token="b-69fef77e7a1" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-63418efb73556.jpg?itok=L6WskpGP" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="1300" height="691" typeof="foaf:Image" /></div></div> <p>     Para acceder a la consola y comenzar a trabajar con el servidor, haremos clic en el gran botón Morado que está en el mendio de la página.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 43%;" data-ratio="43" data-b-token="b-534cc427530" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-63418f470b273.jpg?itok=dO_obxJG" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="1300" height="559" typeof="foaf:Image" /></div></div> <p>     A partir de este momento, podrás interactuar, a través de la consola o simplemente haciendo clic en los datos que haz configurado, en tu archivo index.js y que verás en la columna derecha de la pantalla.</p> <p>     Al seleccionar los datos y hacer clic en el botón <strong>Query</strong>, deberías ver el resultado con tu consulta en la parte derecha de la pantalla.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 48.13%;" data-ratio="48.13" data-b-token="b-b43b832b813" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img alt="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" title="Curso Graphql con Drupal 9 | www.drupaladicto.com - Consultor especializado en drupal y symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" loading="lazy" data-src="/sites/default/files/styles/max_1300x1300/public/imagenes/file-63418fefb71d9.jpg?itok=_4E6N34a" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="385" typeof="foaf:Image" /></div></div> </div> </div> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mar, 07/03/2023 - 10:09</span> Tue, 07 Mar 2023 09:09:41 +0000 webmaster 228 at https://drupaladicto.com drupal/graphql 4.4.0 requires drupal/typed_data * https://drupaladicto.com/snippet/drupalgraphql-440-requires-drupaltypeddata <span class="field field--name-title field--type-string field--label-hidden">drupal/graphql 4.4.0 requires drupal/typed_data * </span> <div class="clearfix text-formatted field field--name-field-snippet-descripcion field--type-text-long field--label-above"> <div class="field__label">Descripción</div> <div class="field__item"><p>     Cuando realizamos una instalación de la versión 4.4 de Graphql, utilizando composer, es posible que nos econtremos con un error, debido a su dependencia con el módulo typed_data.</p> <p><strong>drupal/graphql 4.4.0 requires drupal/typed_data * -&gt; found drupal/typed_data[dev-1.x, 1.0.0-alpha1, ..., 1.x-dev (alias of dev-1.x)] but it does not match your minimum-stability.</strong></p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/luis-alberto-mejia" typeof="schema:Person" property="schema:name" datatype="">webmaster</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mar, 28/02/2023 - 20:12</span> <div class="clearfix text-formatted field field--name-field-instrucciones field--type-text-long field--label-above"> <div class="field__label">Instrucciones</div> <div class="field__item"><p>   Para corregir el fallo y poder realizar la descarga del módulo Graphql, simplemente tendremos que instalar primero su depedencia y luego nos dejará continuar con la descarga.</p> <p></p><div class="media-wrapper media-wrapper--blazy media-wrapper--image"> <div style="padding-bottom: 106.38%;" data-ratio="106.38" data-b-token="b-5372be492a9" class="media media--blazy media--image media--ratio media--ratio--fluid is-b-loading"><img data-entity-uuid="35ebab4d-ab7a-4c8e-8e18-e811523e6dd0" loading="lazy" alt="Gatsby con Drupal | www.drupaladicto.com - Consultor especializado en Drupal y Symfony" decoding="async" class="media__element b-lazy b-filter img-fluid" data-src="https://www.drupaladicto.com/sites/default/files/inline-images/error_typed_data_graphql.jpg" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%2F%3E" width="800" height="851" typeof="foaf:Image" /></div></div> <p>     Añadiremos<strong> -W</strong> o <strong>--with-all-dependencies</strong>, para asegurarnos de que se descarguen todas las dependencias del módulo</p> <pre> composer require drupal/typed_data:1.x-dev -W</pre> </div> </div> <div class="clearfix text-formatted field field--name-field-codigo field--type-text-long field--label-hidden field__item"><pre> composer require drupal/typed_data:1.x-dev -W</pre> </div> <div class="clearfix text-formatted field field--name-field-notas field--type-text-long field--label-above"> <div class="field__label">Notas</div> <div class="field__item">Recuerda adaptar la versión de typed_data, a la versión que te sugiera el error durante la descarga del módulo Graphql</div> </div> <div class="field field--name-field-snippet-paginador field--type-image field--label-above"> <div class="field__label">Paginador</div> <div class="field__item"> <img src="/sites/default/files/imagenes/snippets/snippet-pager_13.png" width="100" height="100" alt="Snippet | www.drupaladicto.com - Consultores especializados en Drupal y Symfony" title="Snippet | www.drupaladicto.com - Consultores especializados en Drupal y Symfony" loading="lazy" typeof="foaf:Image" class="img-fluid" /> </div> </div> <div class="field field--name-field-categoria-snippet field--type-entity-reference field--label-above"> <div class="field__label">Categoría</div> <div class="field__items"> <div class="field__item"><a href="/categoria/graphql" hreflang="es">graphql</a></div> <div class="field__item"><a href="/categoria/frontend" hreflang="es">frontend</a></div> <div class="field__item"><a href="/categoria/dependencies" hreflang="es">dependencies</a></div> <div class="field__item"><a href="/categoria/error" hreflang="es">error</a></div> <div class="field__item"><a href="/categoria/errores" hreflang="es">errores</a></div> </div> </div> <div class="field field--name-field-portada-snippet field--type-entity-reference field--label-above"> <div class="field__label">Portada</div> <div class="field__item"><article class="media media--type-imagen media--view-mode-default"> </article> </div> </div> Tue, 28 Feb 2023 19:12:18 +0000 webmaster 38 at https://drupaladicto.com