frontend

Si 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... HAZ CLIC AQUI

     En el anterior artículo aprendimos todo lo necesario, sobre los requisitos y requemiemientos, para configurar e instalar un sitio web, en nuestro entorno local, utilizando Gatsby. Para ello configuramos un entorno LAMP, con WSL2 dentro de Windows 10; ya que el propósito de esta serie de artículos, será conectarnos con Drupal 9, como backend de nuestro proyecto. Pero antes de comenzar con esa fase fundamental, vamos a explorar y conocer un poco más, acerca de Gatsby, ya que será una pieza clave para lograr nuestro objetivo.

     Lo primero que debermos hacer es, una vez colocados dentro de la carpeta en la que hemos instalado Gatsby, arrancarlo utilizando el siguiente comando, tal y como hicimos en el anterior artículo.

gatsby develop

     A continuación, podremos abrir el proyecto, utilizando el IDE de tu preferencia (Atom, Visual Studio Code, Netbeans, etc.), yo utilizaré PhpStorm, pero puedes elegir el que tengas a mano. Una vez hayamos abierto el proyecto, encontraremos varias carpetas y archivos montados en una estructura, en la que destacaremos los más importantes.

      Compontenes, ¿qué son? y ¿para qué nos servirán?

           Uno de los principios aplicados como base de la mayoría de los nuevos Frameworks, basados en Javascript, como Angular.js, Vue.js, React.js o cualquier otro, para mejorar la velocidad de carga de nuestras webs, sin sacrificar su apariencia, ni la expiencia de usuario; consiste en descomponer nuestros proyectos, en múltiples partes o "Componentes", individuales, y a su vez, reutilizables, que permitirán elaborar toda clase de estructuras, de menos a mayor complejidad, uniendo solamente los que sean necesarios, dependiendo del propósito deseado.

          Esto significa, que en cada uno de estos componentes, estará formado por el código necesario para relacionarlos con otros, a través de importaciones, o los estilos CSS, que éste requiera, para mostrar su contenido de forma correcta, entre otras cosas. Gatsby está basado en React.

          La arquitectura de componentes de React simplifica la creación de sitios web grandes al fomentar la modularidad, la reutilización y las abstracciones claras. React tiene un gran ecosistema de componentes de código abierto, tutoriales y herramientas que se pueden usar sin problemas para construir sitios con Gatsby. Gatsby está diseñado para comportarse casi exactamente como una aplicación React normal.

        La forma más sencilla de escribir elementos React es con JSX. JSX es una extensión de sintaxis de JavaScript que describe la estructura DOM de su componente. Se parece un poco a tener HTML en sus archivos JavaScript:

        Si quieres conocer un poco más sobre los componentes, te dejo el enlace a la Página oficial de Gatsby

        Si abrimos el componente header.js, ubicado dentro de la carpeta src, podremos hacernos una idea de la estructura básica, que encontraremos o tendremos que añadir, cada vez que trabajemos con un Componente.

        A grandes rasgos, en todos los componentes y otros elementos, como las páginas, por ejemplo, encontraremos la línea que "hacer que funcione con React", me refiero a la de --- import * as React from "react " ---, ésta le permitirá obtener los recursos necesarios desde su Núcleo.

        De las demás líneas de importación que vemos en la imagen, como "PropTypes" o "{  Link }", hablaremos cuando comencemos a trabajar con las configuraciones entre Gatsby y Drupal 9.

        Lo que sí deberás tener en cuenta siempre es que el inicio y final de un componente para que te funcione, si te fijas detenidamente, comienza con la declaración del nombre del Componente, mediante la declaracion de una constante --- const Header ---, que el nombre de un componente deberá empezar por mayúscula -- const MyComponent -- y termina con la exportación, para que pueda ser visto desde cualquier lugar de tu proyecto, con la línea --- export default Header ---

        En medio de la estructura que define el Componente, en este caso, podremos apreciar las líneas que definen etiquetas que nos recuerdan al HTML de siempre, unidas con las declaraciones de algunos estilos CSS, encargados de la aplicación de colores, tamaños y otras características visuales para el componente.

     Páginas en React

        Como mencioné al principio de este artículo, la idea principal de un Framework de este tipo es construir un proyecto web, obteniendo estructuras complejas a partir de la unión de varios Componentes, un ejemplo de estas estructuras, nos viene con la instalación de Gatsby por defecto, hablo de la Página 2, a la que podemos acceder desde la Home de nuestro proyecto cuando arrancamos Gatsby.

        Si abrimos el archivo encargado de generar esta "Página 2", podremos identificar algunos de los elementos mencionados anteriormente, así como otros incluidos mediante la importación desde la ruta en que se encuentran, me refiero a los componentes "Layout" y "SEO", el primero permitirá, que se muestren los mismos estilos que en la Home, como la barra de navegación color púrpura o los textos con igual tamaño y colores. Y por su parte, el componente SEO, permitirá incluir los metatags o códigos destinados al posicionamiento de la web en los buscadores.

       Te abrás fijado también, que al igual que vimos ya en el componente Header.js, en este caso la declaración de la SecondPage, tiene la misma estructura, con la diferencia de que en su parte central, en lugar de ver todas las declaraciones que observamos en el componente, encontramos una etiqueta central <Layout></Layout> donde se incluye el resto de elementos (Textos y enlace), que se ven en la misma.

     GraphQL

         Hay muchas opciones para cargar datos en los componentes de React. Uno de los más populares y poderosos es una tecnología llamada GraphQL.

        GraphQL se inventó en Facebook para ayudar a los ingenieros de producto a extraer los datos necesarios en los componentes de React.

        GraphQL es un lenguaje de consulta (la parte QL de su nombre). Si está familiarizado con SQL, funciona de manera muy similar. Usando una sintaxis especial, usted describe los datos que desea en su componente y luego se le dan esos datos.

     Instalación y configuración de Plugins

         El último de los temas que comentaré en este pequeño repaso/introducción sobre Gatsby, es acerca de los Plugins, que serán los encargados de ampliar funcionalidades de Gatsby, dependiendo de las necesidades para tu proyecto.

        Para descargar un Plugin, nos ubicaremos dentro de la carpeta donde está alojado nuestro proyecto y luego ejecutaremos el comando de instalación, seguido del nombre del Plugin; a continuación un ejemplo del comando para instalar en plugin gatsby-source-drupal, aunque se puede utilizar yarn, en lugar de npn, desde la página oficial prefieren el uso de npm:

npm install gatsby-source-drupal

        El archivo encargado de la gestión de los Plugins se llama --- gatsby-config.js ---, una vez descargamos nuestros plugins, tendremos que añadir las líneas correspondientes dentro de este archivo, según las especificaciones que nos digan en la página relacionada con él o ellos.

     Explicación:

        En la imagen anterior, podemos ver que se han añadido dentro del apartado de Plugins, las siguientes informaciones:

resolve: `gatsby-source-drupal`, : donde se declara el nombre del plugin que se a a utilizar, en este caso el gatsby-source-drupal.

options: {
baseUrl: `https://live-contentacms.pantheonsite.io/`,
apiBase: `api`, // optional, defaults to `jsonapi`
},

     Esta segunda parte --- options ---, es donde se añaden configuraciones específica, que variarán según el plugin que se instale. En este caso la baseUrl será la que sustityamos por la de nuestro proyecto Drupal 9, y en la línea de apiBase, en nuestro caso, sustituirmeos el valor por el de --- jsonapi ----, que será el endpoint generado, al activar los módulos "Json api" y "Serialization", incorporado en el núcleo de Drupal 9.

        Para comprobar que hemos activado los módulos en Drupal correctamente, sólo tendremos que añadir "/jsonapi" al final de nuestro dominio en Drupal y el resultado debería ser algo parecido a la siguiente imagen.

        Para obtener el resutado anterior en el navegador, al visitar la url con "/jsonapi" de nuestro Drupaol, en mi caso tengo instalada la extensión de Google Chrome llamada Json Viewer.

        Para la conexión entre Drupal y Gatsby, utilizaremos un plugin llamado --- gatsby-source-drupal ---, puedes encontrar todos los datos relacionados con su configuración en la Página oficial de Gastby.

     El proceso suele ser el mismo en todas las instalaciones de plugins, primero ejecutaremos el comando que descargará los archivos dentro de nuestro proyecto y, a continuación, añadiremos alguns líneas destinadas a las especificaciones de uso para que podamos comenzar con él.

Si 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... HAZ CLIC AQUI

      Qué es Gatsby

          Gatsby es un marco de código abierto basado en React para crear sitios web y aplicaciones. Es genial si está creando un sitio de cartera o un blog, o una tienda de comercio electrónico de alto tráfico o la página de inicio de una empresa.

     Instalación de Gatsby en tu entorno local

        En este artículo aprenderemos a instalar una web con Gatsby, utilizando Linux, en nuestro WSL2 dentro de Windows 10; el propósito fundamental de este artículo es que puedas conectar un sitio Drupal 9 para que puedas utilizarlo luego como el backend de tu proyecto, delegando en Drupal 9 la gestión de tus contenidos, usuarios, imágenes, etc.

        Si quieres saber más sobre cómo instalar Gatsby en tu entorno local, puedes visitar su página oficial donde te cuentan otras formas y opciones disponibles.

        Según su página oficial, para instalar y crear una web usando Gatsby en tu entorno local de Linux (Ubuntu 20.04) en mi caso, deberás tener instalados previamente en tu servidor lo siguiente:

Requisito 1 - Actualizar el listado de paquetes de tu distribución de Linux

sudo apt update

sudo apt -y upgrade

Requisito 2 - Descarga e instalación de curl

Curl: Instale cURL que le permite transferir datos y descargar dependencias adicionales.

sudo apt install curl

Requisito 3 - Utilizar curl para instalar NVM y Node

     NVM : Que te permitirá utilizar diferentes versiones de Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh

     Node.js: Ideado como un entorno de ejecución de JavaScript orientado a eventos asíncronos, Node.js está diseñado para crear aplicaciones network escalables. 

     Cuando se instala nvm, no utiliza una versión de nodo en particular de forma predeterminada. Deberá instalar la versión que desee y dar instrucciones a nvm para usarla. Este ejemplo usa la última versión de la versión 10, pero en su lugar se pueden usar números de versión más recientes.

nvm install 10

nvm use 10

     Puedes verificar la versión más actual de Node.js visitando la Página oficial de Node

     Git: para gestionar las versiones del código, que será necesario para crear su primer proyecto de Gatsby basado en un iniciador.

sudo apt install git

 

     Gatsby command line tool (CLI): es el principal punto de entrada para comenzar a ejecutar una aplicación Gatsby y para usar la funcionalidad, incluida la ejecución de un servidor de desarrollo y la creación de su aplicación Gatsby para su implementación.

npm install -g gatsby-cli

     Creación de nuevo proyecto con Gatsby

        Una vez tengamos los requisitos instalados, ya prodremos comenzar a trabajar en nuestro sitio web con Gatsby, para ello, utilizaremos la Estructura Base, que nos ofrece Gatsby para que podamos empezar. Así que abriremos nuestra consola mejorada de Windows y ejecutaremos el siguiente comando:

gatsby new mi-drupal-gatsby

        Al ejecutar el comando de creación de mi proyecto, en mi caso en particular tuve un error de permisos, por lo que antes de ejecutar el código para la descarga y creación de mi web con Gatsby, tuve que crear el directorio y darle los permisos de escritura y lectura, una vez realizado estos cambios, pude ejecutar el comando sin problemas y se descargaron los archivos correctamente.

        Tan pronto como termine la descarga de todos los archivos necesarios para tu instalación, veremos un mensaje de confirmación con las instrucciones de movernos dentro de la carpeta del proyecto y ejecutar el comando de arranque del servidor de Gatsby:

        Así que nos moveremos dentro de nuesta carpeta y al ejecutar el código de arranque, veremos en la consola si ha ocurrido algún error durante el proceso o podemos pasar a la siguiente fase que será acceder a la url en el navegador:

        Si no ha ocurrido nigún error, podremos ver en la parte final de los mensajes, los detalles para acceder a la url donde podremos ver nuestro nuevo sitio creado con Gatsby, además del acceso a la interfaz de GraphiQl, que explicaré más adelante:

     Cuando accedamos a la url http://localhost:8000/, podremos ver nuestra web para comenzar a trabajar:

     Si en cambio, accedemos a la otra url que vemos debajo de la primera, entonces estaremos entrando a la interfaz de GrapiQl, que nos permitirá crear consultas de todo tipo, de una forma bastante sencilla, visual y práctica:

        Estructura de archivos del proyecto Gatsby

        Enhorabuena!!!, haz conseguido instalar tu primer proyecto web basado en React, utilizando Gatsby, en el siguiente artículo exploraremos los diferentes archivos y te contaré la forma de trabajar en la creción de Páginas, Componentes, carga de imágenes y enlaces. No te voy a cubrir todo lo relacionado para que desarrolles una web completa con Gatsby, ya que mi propósito es que sepas lo básico para trabajar usando Gatsby y Drupal 9 como backend; pero paciencia, que con lo que te eseñaré será más que suficiente para que sigas explorando y probando nuevas opciones en tus desarrollos Drupal 9 Headless.

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... HAZ CLIC AQUÍ

     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. 

     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:

CURSO DRUPAL 9 HEADLESS CON GATSBY

     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 Grapql Drupal 8.x-4.4, 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 graphql_core, esto supone que ya no es compatible con otros que facilitaban bastante el trabajo, me refiero a los módulos:

• GraphQL Views
• GraphQL Metatag

     Otro de los problemas con los que me encontré durante mi investigación, es la poca información disponible en la página con la documentación oficial del módulo, 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.

     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.

   Cómo comenzar a configurar tu Graphql en Drupal

       Paso 1 - Activar los módulos de ejemplo

        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.

        Podrás encontrarlos dentro del a carpeta Examples, dentro del módulo Graphql

        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.

     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.

     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.

     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 Example schema y Example extension.

     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. 

     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.

     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. 

     He utilizado el módulo Devel para generar algunos artículos de prueba, si quieres aprender a utlizarlo te dejo aquí el enlace:

     https://www.drupaladicto.com/curso/como-generar-contenidos-de-prueba-con-el-modulo-devel

Producers y Resolvers

     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.

     Según su página oficial:

     "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."

     Dicho esto, comencemos explorando algunos de los archivos de nuestro módulo graphql_example, 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.

Cómo funcionan los Producers en Graphql

     Ahora, abriremos el archivo ubicado dentro de graphql_example/graphql/example.graphqls, entro encontrarás la definición de tipo de esquema Query, y a continuación el tipo de Producer, donde se describen los campos y el tipo de campo que se podrá consultar posteriormente.

     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.

     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:

type Article {
  id: Int!
  title: String!
  author: String
}

     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. 

     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.

     El Id y el Title, forman parte íntegra del tipo de contenido Article, es decir, están a un mismo nivel, en cambio, el Author, se refiere a otro tipo de entidad, (Referenciada), que viene desde fuera del Article. 

     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.

Cómo funcionan los Resolvers en Graphql

     Esta vez exploraremos la otra parte de la consulta que nos interesa, es decir los resolvers, para ello abriremos el archivo ubicado llamado ExampleSchema.php, que encontraremos en graphql_example/src/Plugin/GraphQl/Schema/ExampleSchema.php

     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 protected function addArticleFields, allí econtraremos las siguientes líneas de código:

protected function addArticleFields(ResolverRegistry $registry, ResolverBuilder $builder): void {
  $registry->addFieldResolver('Article', 'id',
    $builder->produce('entity_id')
      ->map('entity', $builder->fromParent())
  );

  $registry->addFieldResolver('Article', 'title',
    $builder->compose(
      $builder->produce('entity_label')
        ->map('entity', $builder->fromParent()),
      $builder->produce('uppercase')
        ->map('string', $builder->fromParent())
    )
  );

  $registry->addFieldResolver('Article', 'author',
    $builder->compose(
      $builder->produce('entity_owner')
        ->map('entity', $builder->fromParent()),
      $builder->produce('entity_label')
        ->map('entity', $builder->fromParent())
    )
  );
}

     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 Elemento Padre o Entidad principal (Article) y el siguiente, a lo que sería el Campo o Entidad referenciada (Id, Title, Author), desde donde se extraerán los valores para la consulta.

   Añadir campos personalizados para la consulta

     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.

     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.

     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.

     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.

     Hasta la próxima.

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5)

     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.

     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.

Requisitos:

• Tener un proyecto de Drupal 9 funcionando en un entorno local
• Tener disponibilidad de ejecutar comandos con Composer
• Tener disponibilidad para ejecutar comandos con Drush   

Pasos para comenzar con Grapql en Drupal 9

   Paso 1: Descarga del módulo Graphql

     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.

     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.

     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:

composer require 'drupal/graphql:^4.4'

     A continuación, podremos activarlo, utilizando drush

drush en graphql

     Finalmente, borraremos la cache de drupal y actualizaremos la base de datos:

drush cr

drush updb

     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"

     También te recomiendo descargar y activar el módulo Admin Toolbar, para facilitarte la navegación a través de tu sitio Drupal.

     Para conocer el uso del módulo Admin Toolbar, HAZ CLIC AQUI

   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 typed_data

     Para saber cómo solucionar este error, HAZ CLIC AQUI

     Una vez hayas corregido el fallo, podrás activar el módulo desde la consola con el comando drush en

   Generando contenidos para las consultas

     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:

composer require 'drupal/devel:^5.0' -W  

     Si todavía no conoces los módulos Devel y Devel Generate HAZ CLIC AQUI

     Tan pronto como hayamos generado algunos contenidos para realizar pruebas, podremos acceder al explorador de Graphi, para comenzar con nuestras consultas de prueba.

   Paso 2 : Creación y configuración del servidor de pruebas 

     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

     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 Crear servidor y pasar a la pantalla siguiente, no te queda muy claro cómo deberías continuar.

     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, (GraphQL composable example y GraphQL examples), 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:

     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.

     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.

     En mi caso he nombrado el servidor como Graphql Prueba y añadido la url del servidor /graphql, en el formulario para el endpoint. Una vez guardados los cambios, podremos ver la pantalla con nuestro nuevo servidor creado correctamente.

     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 El explorador, que será el lugar para comenzar con nuestras consultas.

 Paso 3 : Realizar las primeras consultas

     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.

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... HAZ CLIC AQUI

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.

En este primer capítulo, aprenderemos a instalar un servidor local, utilizando Lando, en un entorno de Linux, con WSL2 dentro de Windows 11.

Requisitos para el curso:

   1.- Tener instalado Lando en tu entorno Linux. Si no sabes cómo HAZ CLIC AQUI

 

Cómo configurar e instalar un servidor Graphql local con Lando

   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.

   Paso 1 : Configuración proyecto Lando

     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.

     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:

sudo mkdir graphql_project

sudo chmod -R 777 graphql_project

     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.

sudo touch .lando.yml

     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.

sudo nano .lando.yml

 

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

 

     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.

lando start

Paso 2: Comprobación e inicialización del servidor

     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:

lando node -v

lando npm -v

     El resultado devuelto debería corresponder con la configuración que tenemos definida en nuestro archivo de configuración .lando.yml

Paso 3 Inicialización del Servidor

     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.

     Para ello, ejecutaremos el siguiente comando en nuestra consola:

lando npm init -y

     El resultado que deberíamos ver en nuestra pantalla, si todoo es correcto, será algo parecido a la siguiente imagen:

     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:

lando npm install apollo-server graphql

 

     Si quieres saber más sobre Apollo Server HAZ CLIC AQUI

 

Paso 4 : Modificación de Package.json

     Para poder utilzar mscript en nuestro servidor Graphq, añadiremos abriremos el archivo package.json, y añadiremos la línea:

"type": "module",

     Luego guardaremos el cambio y crearemos el archivo.

Paso 5: Creación de nuestro archivo de configuración para Graphql

     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

sudo touch index.js

     Luego abriremos el archivo utilizando el editor, o el IDE que prefieras...

sudo nano index.js

   y dentro pegaremos las siguientes líneas:

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"
    }
]

     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.

     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.

   Paso 6: Definición de datos y peticiones

     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.

     Para definir los datos y peticiones, dentro de nuestro servidor Graphql, definiremos una constante, con la siguiente estructura:

const typeDefs = gql`
     AQUI IRÁN TUS DATOS
`

Tipos de datos
     Puedes encontrar todos los tipos de datos disponibles para Graphl visitando la página oficial de Graphql, además, si queremos configurar un dato como requerido u oligatorio, utilzaremos el signo de puntuación admiración final: "!".

     Algunos tipos de datos que utilizaremos en este curso son:

String: Para definir cadenas de texto
ID: Para definir identificadores únicos
Int: (Integer) Para definir datos del tipo Integer
[Student]: Array de datos

Un ejemplo sera:

   type Student {
       name: String!
       lastname: String!
       city: String
       id = ID!
   }

Tipos de petición
   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 type Query 

   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.

Un ejemplod e petición será:

   type Query {
       numberOfStudents: Int!
       allStudents: [Student]!
   }

  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.

const typeDefs = gql`
    type Student {
        name: String!
        lastname: String!
        city: String
        id : ID!
    }
    
    type Query {
        numberOfStudents: Int!
        allStudents: [Student]!
    }
`

   Paso 7: Definición de los Resolvers (Métodos para las consultas)

     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.

const resolvers = {
    Query: {
        numberOfStudents: () => students.length,
        allStudents: () => students
    }
}

     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.

Paso 8: Creación de nuestro servidor Graphql

     Llegados a este punto, con todo lo necesario para que funcione correctamente nuestro servidor Graphql, sólo faltará construirlo y ponerlo en marcha.

     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:

const server = new ApolloServer({
  
   })

     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. 

const server = new ApolloServer({
    typeDefs,
    resolvers
})

 

Paso 9: Arranque del servidor

     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.

     Para arrancar el servidor, necesitaremos tres simples pasos adicionales al resto:

1.- Añadir las siguientes líneas al archivo index.js

server.listen().then(({url}) => {
    console.log (`Server ready en la ${url}`)
})

2.- Ejecutar, en la consola el comando de node, para que reconozca nuestra configuración, como estamos trabajando con lando:

lando node index.js

3.- Acceder a la url que hemos definido en el archivo de configuración de lando.

     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.

     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.

     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.

     Al seleccionar los datos y hacer clic en el botón Query, deberías ver el resultado con tu consulta en la parte derecha de la pantalla.

Si 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... HAZ CLIC AQUI

     En este curso acelerado de Drupal 9, te enseñaré lo fácil que resultará crear una web básica, con todas las funcionalidades que podrás emplear en la mayoría de tus proyectos y con los principales módulos y configuraciones necesarios, para que entiendas el procedimiento, a pesar de que no tengas conocimientos previos de programación o diseño web.

     La idea es demostrarte por qué deberías trabajar con Drupal, en lugar de explorar otras opciones, que a pesar de ofrecer un arranque más rápido, a largo plazo sólo te traerán inconvenientes y pérdida de tiempo en tus desarrollos.

Módulos Utilizados:

Admin Toolbar

Devel Generate

Media y Media Library ( Incluidos en el Core de Drupal)

Asset Injector

Pathauto

Smart Trim

Theme:

Olivero (Incluido en Drupal 9)