Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

Entonces sí, comencemos ya que estamos unos minutos pasados de la hora. Así que gracias, en primer lugar, por estar aquí, por sintonizar esta workshop. Estoy realmente emocionado por ello.

El título de esta workshop, como ya sabes, es Construir una aplicación Headless WordPress con Next.js y WP GraphQL. Entonces, lo que haremos es, tengo algunas diapositivas para repasar. Compartiré mis diapositivas, me presentaré y luego repasaré algunos temas, como qué es Headless WordPress, por qué podrías querer considerarlo.

Y después de pasar por esas diapositivas, nos sumergiremos en la parte de la masterclass de codificación en vivo donde realmente clonas una aplicación Next.js, la pones en marcha en tu máquina local, y luego veremos cómo podemos conectarla a un backend de WordPress para que estemos extrayendo data de ese backend de WordPress a través de GraphQL, y luego usándola para renderizar las páginas de nuestra aplicación Next.js. Y repasaremos algunos tipos diferentes de páginas y veremos cómo se construye cada una. Así que espero que realmente lo disfrutes y obtengas mucho de ello.

Muy bien. Así que construyamos una aplicación headless WordPress con Next.js y WP GraphQL. Muy bien. Para empezar, me presentaré. Así que mi nombre es Kellan Mace. Trabajo en una empresa llamada WP Engine, que es una de las plataformas de alojamiento más populares en la web para sitios de WordPress, específicamente. Y lo relevante para esta audiencia y esta charla es el hecho de que WP Engine recientemente, lanzamos esta nueva plataforma de alojamiento llamada Atlas, que está orientada hacia headless WordPress sitios de WordPress incluso.

Así que puedes, con una sola cuenta y un solo proveedor de alojamiento, puedes alojar tanto el backend de WordPress como tu aplicación JavaScript de front-end todo en el mismo lugar, lo cual es bastante genial. Así que echa un vistazo a Atlas si eso te parece interesante. Mi nombre de usuario en Twitter también está aquí, si quieres ponerte en contacto conmigo después de la conferencia. Los DMs están abiertos, así que por favor si te estás sumergiendo en esto y tienes algunas preguntas, por favor ponte en contacto y házmelo saber aquí. Así que con eso nos sumergiremos.

Sé que comienzo con solo una especie de desambiguación o llamada, llamando la atención sobre las diferencias entre WordPress tradicional y luego Headless, y por qué podrías querer ir de una manera versus la otra, como dije. Así que hagamos eso.

Oh sí, antes de hacer eso, solo una diapositiva aquí, y eso es clonar el repositorio de la aplicación. Quería poner esto justo en la parte superior de la baraja de diapositivas aquí, solo porque podría tomar un minuto dependiendo de tu conexión a internet. Pero para que clones este repositorio, y luego puedes seguir los pasos en el readme allí. Te dirán que CD dentro del directorio de este proyecto, y luego ejecuta npm install para instalar las dependencias, y así sucesivamente. Así que si haces eso ahora, te ahorrarás un minuto una vez que llegues a la parte de codificación en vivo más tarde. Entonces no tendrás que esperar a que se instalen las dependencias y así sucesivamente. Así que puedes ir adelante y agarrar ese enlace en la diapositiva en esta diapositiva. Muy bien, así que con eso, hablemos sobre WordPress tradicional o monolítico. Así que como muchos de ustedes en la llamada probablemente ya saben WordPress ha estado alrededor por un tiempo. Así que somos el sistema de gestión de contenido más popular del mundo. En este punto la estadística es bastante impresionante. Es como WordPress ha alcanzado alrededor del 43% de cuota de mercado en internet. Ese es el porcentaje de sitios en línea que están funcionando eso que es simplemente alucinante pensar en ello.

En WordPress tradicional, WordPress tiene muchos trabajos, es responsable de proporcionar la interfaz de administración que tus creadores de contenido inician sesión, cuando crean y editan y gestionan su contenido, es responsable de guardar los data en la database. Y luego cuando las solicitudes llegan de, ya sabes, los visitantes del sitio web WordPress también es responsable de sacar los data de la database, y luego plantillarlo usando su API de tema, como HTML, y finalmente responder a esa solicitud. Así que lleva bastantes sombreros y hace muchos trabajos. Y en muchos casos en la web, esta es una gran configuración y funciona muy bien.

Pero cada vez más personas están eligiendo adoptar una architecture headless o decoupled. Así que hablaremos de eso el próximo año. Así que se ve algo así, donde se utiliza WordPress. Así que puedes verlo a la izquierda de esta diapositiva aquí. Pero se utiliza realmente solo para proporcionar esa agradable experiencia de administración para tus creadores de contenido y para almacenar los data. Pero no maneja ninguna renderización, no devuelve, ya sabes, ningún HTML al visitante del sitio. En cambio, tienes una aplicación de front-end que hace eso y eso es Next.js en nuestro caso en la workshop es lo que usaremos para eso. Así que tienes Next.js y se encarga de, ya sabes, consultar los data de WordPress y usar eso para renderizar las páginas HTML que se sirven a los visitantes del sitio. Y en medio de aquí, tienes que tener algún tipo de capa de API. Así que necesitas alguna forma para que tu front-end javascript y tu back-end WordPress se comuniquen entre sí.

Una forma de hacer eso es usar la API REST que está integrada en WordPress nativo. Sin embargo, yo argumentaría que una mejor elección en estos días es WPGraphQL. Así que ese es el logo que ves aquí en la parte inferior. WPGraphQL es un plugin gratuito de código abierto para WordPress que convierte cualquier sitio de WordPress en una API de GraphQL, lo cual es muy poderoso. Así que entonces obtienes todos los beneficios de GraphQL. En la architecture de la API REST, si quisieras consultar las entradas del blog y los usuarios y las categorías y algo más, podrías tener que golpear múltiples puntos finales de la API REST solo para agregar, ya sabes, solo para obtener todos los data que necesitas, lo cual puede ser lento y causar un golpe en el performance. Pero con WPGraphQL, tienes los beneficios de GraphQL donde puedes entrar en tu data de WordPress en cualquier punto y luego desde allí, consultar como quieras. Puedes decir, quiero las primeras 10 entradas del blog, y para cada uno de esos autores, quiero su nombre y otras entradas que han escrito. Y para cada uno de esos, quiero las categorías y componer estas consultas anidadas y obtener todos esos data de vuelta en una sola solicitud de red, lo cual es muy poderoso. Y tiene otros beneficios, también, pero eso diría que es uno de los principales. Así es como se ve una architecture decoupled. Y esto es lo que realmente estaremos construyendo hoy. Muy bien, así que la siguiente pregunta después de que hayas, ya sabes, me escuchaste hablar sobre tradicional versus decoupled es, ¿okay, pero por qué? ¿Por qué elegiría uno versus el otro? ¿Cuáles son los beneficios allí, verdad? Así que cubramos eso a continuación muy rápido. Así que algunos de los beneficios de ir headless o para una architecture decoupled serían estos. Tus creadores de contenido pueden mantener su CMS. Si hablas con muchos equipos de marketing en muchas empresas, realmente aman y conocen y, ya sabes, dependen de WordPress, y quieren seguir usándolo como su CMS preferido. Así que pueden hacerlo con una configuración headless. Performance y scalability, ya sabes, frameworks como Next.js lo hacen muy fácil para obtener un control muy detallado y decir, quiero que esta ruta sea completamente estática. Esta otra ruta para ser renderizada en el servidor. Esta otra ruta, haría algo de renderizado en el lado del cliente. Obtienes un control muy detallado sobre, ya sabes, performance y cómo cada de tus páginas se construye, y puede scale muy bien también. El tercero es la plataforma agnóstica backend. Este es un poco interesante para pensar. Así que con un enfoque headless o decoupled, tu backend de WordPress, solo sirve puro data JSON. Así que eso significa que podrías tener un cliente web, como una aplicación Next.js que tira de ese JSON y lo renderiza para el cliente web. Pero si quisieras, también podrías construir un cliente iOS, un cliente Android, un cliente de escritorio, y todas estas aplicaciones podrían obtener su data de la misma punto final de GraphQL, ya sabes, el mismo data JSON que utiliza el cliente web. Otras plataformas podrían usar y consumir también. Así que eso lo hace bastante poderoso si tienes, ya sabes, múltiples plataformas que necesitas apoyar. El siguiente es fácil de extraer data de múltiples fuentes. Esto sería como en el momento de la construcción cuando las páginas estáticas de tu sitio se están construyendo, digamos, si quieres extraer algunos data de WordPress, algunos data de Salesforce, data de la API de YouTube, algunos data de Contentful o lo que sea. Lo hace...los modernos frameworks como NOCS lo hacen muy fácil de hacer, para obtener data de todas estas, ya sabes, fuentes, y luego coserlo todo junto en tus páginas HTML. El siguiente es el aumento de la security. He visto arquitecturas de sitios donde harán algo como tendrán un frontend JavaScript que sirve el sitio web a sus visitantes del sitio, llamar al backend de WordPress, donde sus creadores de contenido gestionan el contenido. Y luego ese backend de WordPress, lo bloquearán para que solo ciertas direcciones IP se les permita incluso conectarse a esa instalación de WordPress y iniciar sesión para gestionar el contenido. Cualquier otra persona en todo el internet que intentara, ya sabes, administrador de WordPress para intentar entrar sería rechazado. Ya que no tienen, ya sabes, una de esas direcciones IP permitidas, por ejemplo. En WordPress tradicional, no podrías hacer eso porque todos necesitan poder acceder, ya sabes, a esa dirección web donde vive WordPress porque está haciendo toda la renderización, ¿verdad? Tus visitantes del sitio necesitan visitar eso. Cuando tienes un enfoque decoupled, eso ya no es el caso. Puedes hacer algunos trucos donde bloqueas el acceso al administrador de WordPress mientras dejas que tus visitantes del sitio vean la aplicación JavaScript de front-end aquí. Y el último en esta lista es la mejora de la developer experience.

Yo diría que en estos días, muchos de nosotros en la comunidad de desarrollo web realmente apreciamos y nos gusta construir en una arquitectura basada en componentes. Dado que estás en la Cumbre de React, supongo que te gusta React y te gusta construir en una arquitectura basada en componentes, ¿verdad? Si optas por un enfoque sin cabeza, puedes elegir un framework de front-end para facilitar las cosas y luego construir en componentes y tener una experiencia de desarrollo realmente agradable, lo cual puede ser otra ventaja.

Muy bien, desventajas. Revisemos esta diapositiva y luego revisaré el chat aquí para ver si tenemos alguna pregunta. Una es la complejidad adicional. Por lo tanto, tienes algunas piezas más en movimiento. En lugar de solo WordPress, ahora tienes el sitio de WordPress, que proporciona datos. Y luego tienes tu aplicación de front-end, que consume esos datos. Por lo tanto, hay algunas piezas más en movimiento que gestionar.

A continuación, la desventaja sería que requiere recrear algunas funciones integradas de WordPress. Algunos ejemplos aquí serían la autenticación de usuarios y las vistas previas de publicaciones. En el WordPress tradicional, un creador de contenido puede crear un nuevo borrador de blog y una publicación, escribir un poco de contenido y luego hacer clic en un botón para previsualizar esa publicación y ver cómo se vería en el front-end si se publicara. Ese tipo de cosas no se obtienen de forma gratuita. Si separas tu front-end de tu back-end, ahora no tienes una forma de autenticar al usuario y saber si tienen permiso para ver un borrador no publicado de una publicación, por ejemplo. Algunas soluciones preconstruidas que las personas han creado en WordPress para agregar esa funcionalidad a Headless. Pero debes saber que no es algo que esté fuera de la caja, es decir, debes pensar un poco en cómo voy a agregar esta función a mi arquitectura desacoplada.

La tercera aquí es que no puedes usar plugins de WordPress para agregar elementos visuales. A algunas personas les gusta tener un control total sobre su propio sitio web. Entonces, si construyes un sitio para, por ejemplo, una pequeña tienda en la calle, y quieren poder administrar el sitio ellos mismos, es posible que deseen la capacidad de agregar un complemento de WordPress e agregar un control deslizante de imágenes o algo similar en el front-end del sitio, y eso ya no se puede hacer con un enfoque sin cabeza. No puedes simplemente activar un complemento que agregue elementos visuales a la página porque todos esos elementos visuales están controlados por tu aplicación JavaScript desacoplada, ¿verdad? Así que eso tiene sentido.

Esto puede no ser una desventaja, dependiendo de tu proyecto. Muchas veces no quieres que el cliente mismo agregue todo tipo de elementos visuales a la página todo el tiempo y potencialmente afecte el rendimiento y ese tipo de cosas, por lo que esto también podría verse como una ventaja porque tienes las cosas más controladas y organizadas en cuanto a lo que se renderiza.

Y el último que tengo aquí es que no puedes usar las nuevas funciones de edición de sitio completo. WordPress 6.0 acaba de ser lanzado y tiene nuevas funciones de edición de sitio completo que están orientadas a esa persona que mencioné, donde el propietario del sitio web mismo quiere tener un control completo sobre el sitio web y la capacidad de crear diseños por sí mismo utilizando una especie de experiencia de constructor de páginas. Esas son las funciones de edición de sitio completo que están llegando a WordPress, que habilitan ese tipo de flujo de trabajo. Sin embargo, si optas por un enfoque sin cabeza o desacoplado, no podrás hacer eso porque, nuevamente, la renderización está controlada por la aplicación JavaScript de front-end. Eso podría ser una desventaja para algunos proyectos, pero tener un control estricto sobre lo que se renderiza también podría ser una ventaja, como mencioné.

Muy bien, déjame hacer una pausa por un momento y abrir el chat para ver qué tenemos. Muy bien. Leyendo los comentarios aquí. Sí, puedo poner el enlace de GitHub en el chat, así que déjame hacer esto. Ah, muy bien, así que puse el enlace al repositorio de GitHub en el chat. Sin embargo, no deberías necesitar ese enlace directo porque deberías poder abrir las diapositivas que compartí a las 10:05, mi hora, 10:05 en el chat. Pero copiaré ese enlace nuevamente también. El enlace a las diapositivas, ahí vamos. Así que puse el enlace a las diapositivas en el chat también si eso es útil para alguien. Veamos, oh veo que algunos de ustedes también compartieron el enlace de GitHub, gracias por hacerlo. Me ahorraron el problema, muy bien. Continuemos con esto. Luego tengo, sí, un par más. Eso fue todo en las diapositivas en cuanto a cómo Headless WordPress es diferente de WordPress tradicional y luego los beneficios y desventajas, ahora continuaré con esta presentación. Lo siguiente después de los beneficios y desventajas aquí fue vamos a codificar. En este punto, podemos sumergirnos en nuestra masterclass y hablar sobre lo que vamos a construir juntos hoy. Muy bien, esto es lo que cubriremos. Así que aquí está el contenido de la masterclass, lo llamo la parte de configuración. Entonces, lo que haremos es abrir nuestra aplicación terminada y ponerla en marcha en un navegador. Y veremos tanto las páginas que tiene como el código que alimenta cada una de esas páginas. Por lo tanto, en primer lugar, haremos un recorrido por las páginas de nuestra aplicación terminada. En segundo lugar, veremos cómo podemos convertir WordPress en un servidor GraphQL con el complemento WP GraphQL. En tercer lugar, configuraremos el entorno de desarrollo local. Algunos de ustedes que clonaron el proyecto y siguieron los pasos en el archivo readme ya han hecho parte de ese trabajo, por lo que eso les ahorrará tiempo una vez que lleguen a ese paso. En cuarto lugar, configuraremos Apollo Client. Ese es el cliente GraphQL que vamos a utilizar en nuestra aplicación Next.js para extraer datos de nuestro backend de WordPress. Una vez que hayamos terminado con esto, nuestra parte de configuración, luego pasaremos a la parte de construcción de características. Por lo tanto, cubriremos estas cosas aquí. Entonces, el quinto en la lista es componer una consulta GraphQL utilizando el entorno de desarrollo integrado gráfico. Te mostraré cómo puedes hacer eso. Y luego, del sexto al noveno, aquí se trata de implementar páginas específicas de nuestra aplicación. Tenemos la página de índice del blog o la página de inicio del blog, tenemos la página de una sola publicación de blog. El número ocho, tenemos una página de una sola categoría. El número nueve será divertido, esa es nuestra página de búsqueda, donde, en lugar de pre-renderizar una página estática de antemano, como podríamos hacer con algunas de estas otras páginas, la búsqueda se renderizará sobre la marcha. A medida que el usuario escribe algo y presiona un botón, enviaremos una solicitud en tiempo real a nuestro backend para encontrar publicaciones de blog que coincidan y luego volveremos a renderizar la página para mostrar las publicaciones de blog que coincidan. Veremos cómo podemos hacer eso. Y luego el número 10, si tenemos tiempo, si llegamos a eso, veremos cómo aprovechar los fragmentos de GraphQL. De esta manera, podemos reducir el código repetitivo y tener partes de nuestras consultas de GraphQL desvinculadas de los componentes que realmente las utilizan. Con un fragmento de GraphQL, podemos tener un solo componente de React y colocar los datos que necesita junto con el propio componente. Por lo tanto, hace que tu base de código sea muy agradable y organizada. Veremos cómo podemos hacer eso si, nuevamente, si tenemos tiempo para llegar al paso nueve. Si no, sin embargo, si solo llegamos al paso nueve, creo que aún será muy beneficioso en una masterclass útil ver cómo construyes cada una de las páginas que cubriremos aquí. Muy bien, y después de eso, la última diapositiva de esta presentación son enlaces útiles. A medida que avanzamos en la masterclass, haré referencia a estas cosas. Por lo tanto, el número uno ya lo he mencionado, ¿verdad? Ese es el repositorio de la aplicación Next.js. Pero los números dos a siete aquí son cosas. A medida que avanzamos, simplemente haré referencia a los enlaces en esta página para que puedas hacer clic en ellos para abrirlos. Para sumergirnos en esto, lo primero que haremos es clonar ese repositorio como dije. Entonces, con suerte, la mayoría de ustedes ya lo han hecho, pero si no, pueden hacer clic en el enlace para abrir este repositorio de código. Y solo necesitaremos seguir los pasos en este archivo readme aquí. Por lo tanto, clonar el repositorio, ingresarás al directorio y ejecutarás npm install para instalar las dependencias. Y en realidad, el resto lo haré contigo aquí. Así que sumerjámonos. En la línea de comandos aquí, puedes ver que ya he clonado este proyecto yo mismo aquí en mi escritorio, y ahora ejecutaré npm install solo para asegurarme de que todas las dependencias del proyecto estén instaladas, ¿de acuerdo? Y una vez que estén, continuaremos con el resto de los pasos aquí. Simplemente dice, crea un nuevo archivo.env.local en la carpeta raíz con esto como su contenido. Muy bien, hagamos eso. Entonces, abramos nuestro proyecto en una ventana de VS Code. Permíteme redimensionar esto para nosotros. Ahí vamos, muy bien. Siguiendo las instrucciones aquí, haré clic derecho aquí y simplemente iré a nuevo archivo. Lo llamaré.env.local. Y dentro de esto, vamos a poner una variable de entorno. Copiaré eso y luego lo pegaré en este archivo.

Entonces, esto apunta al punto final de GraphQL que nuestra aplicación Next.js va a utilizar cuando obtenga datos de un sitio backend de WordPress. Hablaremos más sobre eso en un momento. Aquí hay una alternativa si ya eres alguien que utiliza WordPress y quieres obtener datos de tu propio sitio, puedes hacerlo. Si dice que quieres apuntar la aplicación Next.js a una instalación local de WordPress, reemplaza eso con el dominio de tu sitio local de WordPress. Puedes hacer eso ahora o más adelante, si quieres probar cómo se ve obtener datos de un sitio de WordPress diferente. Esto es lo único que necesitarías cambiar aquí.

De acuerdo, veamos. Si eliges utilizar una instalación local de WordPress, asegúrate de tener WP GraphQL instalado y activado. Bien, luego ejecuta npm run dev para poner en marcha la aplicación en localhost:3000. Y puedes detenerla en cualquier momento presionando Control + C. Muy bien, veamos cómo podemos hacer eso. De vuelta en la línea de comandos, ejecutaré npm run dev, ahí estamos. Y luego simplemente haré clic en este enlace aquí para abrir localhost:3000. Veremos nuestra aplicación en todo su esplendor. Aquí vamos, aplicación WP sin cabeza. Muy bien, esto es lo que exploraremos aquí. Volvamos a nuestra secuencia de eventos.

De acuerdo, así que lo primero que haremos ahora es el recorrido de nuestra aplicación terminada. Veamos el chat aquí. Muy bien. Entonces, Kyle, veo tu pregunta aquí. ¿Hay un socio de alojamiento preferido con esta arquitectura o puedes elegir, por ejemplo, AWS? Sí, gran pregunta. Hay muchas opciones disponibles. Algunas aplicaciones populares para alojar el frontend, bueno, déjame retroceder un momento aquí, hay dos opciones. Una es que necesitas alojar tu aplicación JavaScript de frontend basada en Node.js en algún lugar, pero también necesitas alojar el sitio de WordPress en otro lugar. Pueden ser el mismo host o pueden ser hosts diferentes.

Entonces, mencioné al principio de la presentación que mi empresa, WP Engine, tiene un producto llamado Atlas. Si utilizas Atlas, te permite alojar y administrar ambos desde un solo panel de control. Lo que puedes hacer es crear un nuevo entorno de aplicación Atlas y simplemente llamarlo tu entorno de aplicación de producción y decir, para mi aplicación de frontend, aquí está el repositorio. Y para mi backend de WordPress, quiero crear uno nuevo en tu plataforma de WP Engine y luego hacer clic en un botón y creará ambos. El frontend y el backend, que se apuntan entre sí y utilizan GraphQL como la capa de datos. Y puedes administrar ambos desde un solo panel de control, lo cual es bastante bueno. Somos el único host que conozco que aloja ambos. De lo contrario, si no quieres ir con Atlas, hay otros proveedores disponibles. Netlify y Vercell, render.com son algunos de los más populares para alojar tu aplicación JavaScript de frontend. Y luego, para el backend de WordPress, como dijiste, podrías alojarlo en AWS o en Digital Ocean o Linode u otros proveedores de alojamiento administrado en el espacio de WordPress, como SiteGround o Bluehost, entre otros. También podrías hacer eso. Así que podrías tener la aplicación de frontend en Netlify o Vercell y luego tu aplicación de backend en Digital Ocean o AWS o cualquier otro lugar. Siempre y cuando los configures para que se apunten entre sí, como estamos haciendo aquí, donde especificas el punto final de GraphQL donde vive tu WordPress, esa sería otra opción para ti también. Veamos, Alex. Sí, tienes razón. Incluso podrías alojar el frontend en AWS también. Sí, si eres alguien que es muy técnico y sabe cómo alojar aplicaciones Node.js en AWS, ciertamente podrías hacer eso también. Alojar la aplicación de frontend en AWS también. Eso es cierto. Excelentes preguntas. Muy bien, sigamos adelante. El siguiente paso es un recorrido por nuestra aplicación terminada. Veamos cómo está construida aquí. Con la aplicación que les di con anticipación, no hice mucho. Simplemente agregué algunas páginas y componentes que recorreremos aquí. Comencemos con esta página de inicio aquí. Si todos ustedes han utilizado Next.js, probablemente reconozcan que es simplemente la pantalla de bienvenida que utiliza el framework. Pero vayamos a la página de blog y veamos cómo se ve. Entonces, verán que tenemos esta página de blog y tiene una cuadrícula de publicaciones de blog aquí que están enlazadas. Veamos cómo funciona eso. Y tal vez en el chat, ¿puedo obtener un pulgar hacia arriba si todos pueden cargar la página /blog y esto es lo que ven? ¿Se ve bien? Mientras hacemos eso, profundicemos en ello.

Abriré las páginas en el editor de código y luego iré a la página de blog aquí, y así es como se ve esa página. Genial, gracias por el pulgar hacia arriba. Muy bien, aquí está la página de blog. Puedes ver que en este momento estamos haciendo trampa. Ninguno de estos datos es real, son datos ficticios. Lo que estamos haciendo en este archivo es que tenemos este directorio aquí llamado datos ficticios con un archivo de índice dentro. Puedes ver que solo tiene un montón de datos de publicaciones codificados aquí. Por lo tanto, imita la estructura de los datos. Volveremos a esto más adelante cuando hagamos consultas reales de GraphQL, pero por ahora, esto es solo datos ficticios codificados. Entonces, lo que hace nuestra página de blog es extraer las publicaciones de ese archivo de datos ficticios y en lugar de obtener propiedades estáticas, le decimos a Next.js: `oye, en el momento de la compilación, cuando estés construyendo esta página, envía una propiedad al componente llamada publicaciones y aquí es donde debes obtener los datos de estas publicaciones que importamos de nuestros datos ficticios`. Y si miras el componente aquí, eso es exactamente lo que hace, ¿verdad? Recibe las propiedades, desestructura eso para extraer las publicaciones, luego renderiza este componente de lista de publicaciones y ese es el responsable de mostrar nuestras publicaciones en una lista aquí. Haré clic para ver eso para que podamos verlo. Entonces, la lista de publicaciones es bastante simple, es solo una lista desordenada aquí y luego mapeamos cada una de las publicaciones y creamos un elemento LI con una tarjeta de publicación dentro. Y haré clic en la tarjeta de publicación y también es bastante simple. ¿Verdad? Simplemente desestructura las publicaciones, la propiedad que recibe, para extraer el título, el extracto, el URI, la imagen destacada y luego tiene una etiqueta de artículo y muestra parte del contenido de esa publicación de blog de esa manera. Así es como se escribe la publicación de blog aquí. Muy bien. Nuestra tarea es eliminar estos datos ficticios aquí y obtener datos reales de un backend de WordPress y luego utilizar esos datos reales para renderizar la lista de publicaciones. Por lo tanto, veremos cómo cambian en lugar de los títulos en latín aquí. Verás que esta página se vuelve a renderizar una vez que lo hagamos, con los datos reales de las publicaciones de blog de nuestro backend de WordPress. Será genial ponerlo en marcha. Muy bien. Hemos visto la página de blog ahora. Hagamos un recorrido rápido por la página de una sola publicación de blog. Haré clic en una de ellas y veremos una página individual de una publicación de blog aquí. Nuestra aplicación de frontend, eso estaría dentro de las páginas. Iré a este URI de puntos suspensivos.

Aquí está el archivo js también. Si no estás seguro de qué es esto, como por qué están aquí los corchetes con los puntos suspensivos, esto es solo una convención de Next.js. Entonces, en nuestras diapositivas, en la página de enlaces aquí, puedes ver su documentación. Como el número seis aquí, si te preguntas por qué creamos ese archivo .env.local y dije que estábamos almacenando una variable de entorno dentro de él, si te preguntas de dónde viene eso, por qué lo estamos haciendo, aquí está la respuesta. El número seis te muestra en la próxima documentación cómo crear variables de entorno. Y de la misma manera, si te preguntas cómo funciona aquí el enrutamiento basado en archivos, como con esta ruta de captura, puedes consultar la documentación de Next.js para ver cómo funciona todo eso. Pero básicamente, esto es solo una ruta de captura que le dice a Next.js que cualquier cosa que no coincida con las otras, como /blog o /search. Si es algo más, úsalo como una especie de captura para renderizar nuestras otras páginas. Así que lo estamos usando nosotros mismos para renderizar nuestra página de una sola publicación. Entonces, en nuestra aplicación frontend, lo que hace es muy similar a la página anterior. Puedes ver que estamos importando la publicación desde nuestros datos ficticios. Y luego, más abajo, dentro de getStaticProps, pasamos esa única publicación como las props que nuestro componente debe recibir. Y dentro del componente, estamos desestructurando la publicación para extraer la fecha, el título, el contenido, el autor, y así sucesivamente. Y luego, usamos eso para renderizar nuestra lista aquí. Con el componente de diseño, que simplemente le da a la página un poco de margen y relleno y un ancho máximo, y así sucesivamente. Y dentro de eso, deberíamos tener una etiqueta de artículo con todo esto. Entonces, puedes ver que, ya sabes, aquí está el título de la publicación del blog. Aquí está, ya sabes, el nombre del autor, y luego una fecha formateada que dice de dónde obtenemos esta información meta. Debajo de eso, tenemos el contenido de las publicaciones del blog. Ya sabes, todo este HTML se renderiza. Y luego, en la parte inferior, decimos que si tenemos categorías, luego mostrarlas como encabezado. Déjame desplazarme hacia abajo aquí, categorías como, y luego, ya sabes, mapeamos cada una de las categorías y las mostramos en la lista. Así es como se escribe la página de una sola publicación de blog. Muy bien. Continuemos. En el chat, avísame si algo de esto es confuso o necesita más explicación.

Entonces, hemos visto el blog, hemos visto una sola publicación de blog. Ahora, veamos la página de búsqueda. Eso podría ser interesante. Aquí está la búsqueda y está rota. Puedes notar que esto no funciona en absoluto. ¿Verdad? Y nuevamente, eso se debe a que todo esto son solo datos ficticios. Si ahora escribo la palabra, por ejemplo, puedo hacer clic en buscar y enviar este formulario todo el día. Pero mis datos, ya sabes, no van a cambiar. Y eso se debe a que todo esto son solo datos ficticios en este momento. Si abrimos nuestra página de búsqueda, nuevamente estamos extrayendo las publicaciones de nuestros datos ficticios. Y, sí, y luego usándolos. Entonces, dentro de este objeto de datos que estamos construyendo, pasamos las publicaciones y más abajo, tenemos nuestro formulario en la parte superior aquí para que la persona escriba el término de búsqueda, ya sabes, que desea buscar. Y luego, debajo de eso, estamos representando las cosas. Entonces, en este momento está roto porque renderizamos nuestra lista de publicaciones. Y luego le damos data.post.nodes. Ya sabes, que en última instancia proviene de nuestro archivo de datos ficticios. Entonces, ahí es donde, por eso, todo esto son solo datos ficticios. Una vez que terminemos con este archivo, funcionará como se espera. Por lo tanto, podrás escribir una palabra específica dentro de una o más publicaciones de blog, ya sabes, hacer clic en buscar y enviará una solicitud desde el cliente al backend de WordPress y luego volverá a renderizar la lista para mostrar las coincidencias aquí. Eso es todo para el recorrido. Hay una página de categoría que no vimos, pero podemos dejar eso para más tarde. Está aquí si haces clic en una sola categoría. También tenemos esta página donde muestra solo el título de esa categoría en la que estás interesado y luego las publicaciones de blog que están asignadas a esa categoría. También construiremos esa. Muy bien. Sí, así que con eso, haré una pausa, revisaré el chat ahora mismo. Acabo de ver un montón de pulgares arriba, así que debo estar haciendo un trabajo fantástico, pero avísame, como dije, si algo necesita más explicación. Veamos. Muy bien, Alex, es una buena pregunta. Alex pregunta dónde se maneja la protección XSS. XSS significa cross-site scripting. Entonces, esa es una buena pregunta. React escapa HTML por sí solo. Entonces, cuando vas a renderizar algo con React, si la cadena contiene ciertos caracteres HTML o ciertos caracteres HTML donde podría ocurrir un ataque de cross-site scripting, donde algún JavaScript malicioso se ejecuta en la página, como una extensión de Chrome o algo así. Si esa extensión de Chrome intenta inyectar contenido en la página y hay algunos caracteres no escapados, React se encarga de eso. Sin embargo, al tratar con un CMS, a veces hay otras consideraciones que debes tener en cuenta. Debes decirle a React que confíe en cierto contenido, si eso tiene sentido. Entonces, ya que estamos en ese tema, me detendré en esto por un segundo aquí. Un ejemplo sería el contenido. Entonces, en nuestra página de una sola publicación de blog aquí, te mencioné que todo este HTML para el contenido proviene de WordPress. Entonces, si no confiamos en estos datos, si queremos darle estos datos a React, intentaría escaparlos como siempre hace. Permíteme mostrarte cómo se ve eso. Entonces, si simplemente pasamos el contenido de esta manera, permíteme guardar eso. Veamos si podemos hacer que se vuelva a renderizar. Deberíamos ver un montón de etiquetas HTML. Sí, así es como se vería tu sitio, ¿verdad? Porque este es el contenido HTML que conforma esa publicación de blog. Entonces, esto es lo que se vería si permites que React haga su escapado habitual, escaparía todo este HTML aquí. Entonces, debes decidir por ti mismo, ya sabes, ¿confío en este HTML que proviene de mi CMS? Y espero que sí, WordPress sea utilizado por millones de personas y tenga muchos ojos en términos de seguridad. Así que diría que se puede confiar en que produzca HTML si es seguro. Entonces, tienes algunas opciones. Y si decides confiar en el contenido HTML y le dices a React que no lo escape, en la página tienes algunas opciones. Una sería usar dangerouslySetInnerHTML. Estoy seguro de que algunos de ustedes han visto esto antes. Entonces, sí, si haces esto, si tienes un div de autocierre como este y dices dangerouslySetInnerHTML, y dentro de esto, pasas un objeto con una clave de doble guion bajo HTML, dos puntos, y el valor de ese HTML, en nuestro caso, eso es contenido, así, esta sería una forma de manejarlo. Entonces, esto le dice a React que no intente escapar este HTML para la protección de cross-site scripting, por ejemplo. Entonces, si guardo eso y luego lo veo, ahora puedes ver que React está pasando por alto ese escapado y está representando la marca que se le dio. Entonces, esta es una forma de hacerlo. En nuestra aplicación, dejé que una biblioteca lo hiciera. Tengo este HTML React Parser aquí, que viene solo con una función de análisis. Entonces, esta es otra forma de hacerlo. En lugar de hacerlo tú mismo con el div de autocierre, en nuestra aplicación, simplemente estaba pasando el contenido a través de la función de análisis que usa este analizador HTML basado en React para escaparlo. Muy bien. Alex, avísame si eso respondió a tu pregunta. Entonces, sí, WordPress hace su propio escapado del HTML que produce. En la aplicación frontend, debes decirle a React, oye, esta cadena que estoy a punto de poner en la página, ya está escapada en HTML, confío en ella.

Entonces, no intentes escaparlo y simplemente renderízalo. Muy bien, genial. Sí, excelente pregunta.

Muy bien, sigamos adelante entonces. Acabamos de terminar nuestro recorrido de la aplicación terminada, ¿verdad? Así que ahora vamos a profundizar más. El siguiente paso en nuestra lista de cosas por cubrir es convertir WordPress en un servidor GraphQL con WPGraphQL. Les mostraré cómo hacerlo. Pero en realidad no necesitarás ejecutar un sitio de WordPress tú mismo en tu máquina. En su lugar, simplemente nos conectaremos a un sitio de WordPress que está en vivo en Internet.

Como puedes ver, estoy usando una aplicación gratuita llamada 'local' para ejecutar sitios de WordPress localmente en mi máquina, y simplemente iniciaré uno de estos sitios y luego iré a la pantalla de administración de WordPress. Permíteme iniciar sesión en este sitio y simplemente mostrarte algunas cosas. Muy bien, aquí estamos en el administrador de WordPress. La forma de convertir tu backend de WordPress en una API GraphQL es habilitando el complemento WPGraphQL que mencioné. Así es como se ve. Si no lo tienes en tu sitio, simplemente haz clic en 'Agregar nuevo' aquí y busca en el directorio de complementos de WordPress WPGraphQL y luego encuéntralo en la lista. Ahí está, WPGraphQL. Lo instalarías y luego lo activarías y lo verías en tu lista de complementos aquí, ¿de acuerdo?

Una vez que hayas hecho eso, eso le dará a tu sitio un punto final GraphQL al que tu frontend desacoplado puede acceder. Si te preguntas, bueno, ¿dónde está ese punto final GraphQL, verdad? Lo que puedes hacer es en la barra lateral aquí, puedes ir a GraphQL y luego en la página de configuración, justo en la parte superior, te muestra cuál es el punto final GraphQL. Puedes personalizarlo, pero la convención es simplemente usar '/graphql' aquí. Una nota también, cualquier persona que esté tomando notas y quiera hacer esto en su propio sitio de WordPress, una cosa que me aseguraría de hacer en esta página es en tu entorno local es habilitar el modo de depuración de GraphQL aquí. Esto es de gran ayuda cuando en tu aplicación frontend, si algunas consultas que estás intentando ejecutar fallan, en lugar de recibir mensajes de depuración muy opacos e inútiles, si habilitas esto, recibirás mensajes de depuración mucho más útiles. Así que solo una nota si estás ejecutando un sitio de WordPress y haciendo este tipo de cosas, definitivamente habilita el modo de depuración y te ayudará en tu entorno local.

Entonces, veamos este punto final. Voy a hacer clic en esto para abrirlo en una nueva pestaña. Verás que solo obtengo una respuesta JSON si intento visitarlo directamente en un navegador web, simplemente dice que las solicitudes de GraphQL deben incluir al menos uno de estos parámetros, consulta o ID de consulta o lo que sea. Y eso se debe a que no he proporcionado una consulta, ¿verdad? Todo lo que hice fue enviar una solicitud GET en un navegador a este punto final, no proporcioné ningún dato. Así que esa es la salida esperada allí. Muy bien, así es como lo harías en tu propio sitio de WordPress. Sin embargo, para nosotros, vamos a usar un punto final GraphQL predefinido. Así que veamos, voy a cerrar estas cosas, ya no necesitamos ver eso. En su lugar, vamos a usar este punto final aquí, así que este sería el número cinco en la lista de enlaces. Si lo abres en una nueva pestaña. Oh, ahí vamos. Así que eso te llevará a este contenido, .wpgraphql.com/graphql. Así que este es el punto final que vamos a usar para que no tengas que preocuparte por ejecutar tu propio sitio de WordPress localmente. Y si te fijas, es el mismo que hemos agregado a nuestro archivo .env.local aquí. Ahí es de donde viene esto. Así que vamos a usar esto para el resto de la masterclass como el sitio del que obtendremos nuestros datos de WordPress. Muy bien.

Eso fue el número dos, cómo convertir WordPress en un servidor GraphQL con el complemento WPGraphQL. Así que haré una pausa aquí y revisaré el chat para ver si hay alguna pregunta. Veamos. Entonces, ¿es más seguro evitar 'dangerouslySetInnerHTML' y en su lugar usar una biblioteca de análisis? En la mayoría de los casos, no. Si observas algunas bibliotecas populares de análisis que existen, incluida la que estamos usando en este proyecto, en realidad utilizan 'dangerouslySetInnerHTML'. Así que si observas el código fuente de esas bibliotecas, podrían intentar renderizarlo de otra manera según cómo se vea el HTML, pero como último recurso o alternativa para renderizar el contenido, ellos mismos usarían 'dangerouslySetInnerHTML' para lograr lo mismo. Así que no, no diría que sea más o menos seguro. Un analizador puede ser útil si quieres intercambiar cosas. Permíteme mostrarte un pequeño desvío aquí. Mantengo este sitio con mi equipo en el trabajo, developers.wpengine.com. Solíamos tener muchos recursos, artículos, videos y todo tipo de cosas sobre cómo hacer esto, cómo usar WordPress sin frontend. Así que uno de los artículos que escribí recientemente trata sobre cómo trabajar con los datos de Gutenberg y se refiere a esta pregunta que estamos discutiendo ahora mismo. Así que este es el artículo que escribí, Gutenberg y WordPress sin frontend: renderizar bloques como HTML. Así que si abro esta página del blog, te mostraré uno. Oh sí, nuestra resaltación de sintaxis está rota en este momento. Esto es una mala demostración, lo siento. Pero de todos modos, esta es la sección a la que me refería. Usa un analizador para convertir algunos bloques en componentes. Esto es algo que podría interesarte. Por ejemplo, en Next.js, si quieres usar el componente de enlace de Next.js, para obtener la navegación del lado del cliente para cualquier enlace interno, pero de forma predeterminada, WordPress te proporcionará, si tienes algún enlace interno dentro de tu contenido, simplemente te dará una etiqueta de ancla regular. Entonces, el resultado es que en tu aplicación frontend, si alguien está leyendo una publicación de blog y luego hace clic en algo que es un enlace interno, si eso es solo una etiqueta de ancla, obtendrán una recarga completa de la página, ¿verdad? Seguirá funcionando, los llevará a la siguiente página, pero se pierde el propósito de usar un framework de aplicación de una sola página como Next.js, que es capaz de realizar una navegación del lado del cliente muy rápida. En este artículo del blog, explico cómo reemplazar, ya sabes, esas etiquetas de ancla por tus enlaces internos, cómo reemplazarlos por un componente de enlace, para obtener una navegación rápida y fluida del lado del cliente. Ese sería un ejemplo de cuándo querrías usar un analizador más allá de simplemente escapar HTML como estamos haciendo aquí. Pondré este artículo del blog en el chat en caso de que alguno de ustedes esté interesado en lo que estoy hablando. Este artículo puede ser útil. Sí, también pondré este sitio allí en caso de que estén interesados en nuestros videos tutoriales, etc. Muy bien, excelentes preguntas. Veamos. Entonces, M tiene otra pregunta. ¿Este punto final almacena en caché las consultas? Esta también es una excelente pregunta. WPGraphQL, que estamos usando aquí, es lo que estamos utilizando para nuestra capa de API, ¿verdad? Para permitir que WordPress se comunique de ida y vuelta a través de nuestro frontend desacoplado. Puede aprovechar cualquier solución de almacenamiento en caché existente que puedas usar en el backend de WordPress, como Redis o memcached. Si se utiliza alguno de ellos, como una caché de objetos, wp-graphql también verá ganancias de velocidad. Entonces, si tienes una consulta específica que, cada usuario que visita una determinada página de tu sitio, si tienes una consulta específica que siempre se ejecuta, lo que haría Redis es ver esa consulta a la base de datos y luego la almacenaría en memoria para que la próxima vez que llegue una solicitud, serviría, ya sabes, la respuesta a eso desde la memoria. Así que sería mucho, mucho más rápido. Sí, puedes usar soluciones de almacenamiento en caché existentes como Redis o memcached, esas funcionarían para almacenar en caché y acelerar tus respuestas de GraphQL. Iré un paso más allá. Una cosa realmente emocionante es que Jason Ball, el creador y mantenedor de wp-graphql, y otro chico, Mark, están trabajando en una función llamada 'persisted queries' para wp-graphql en este momento. Y esto llevará la historia de la caché al siguiente nivel. Lo que esto significa es que llega una solicitud para una consulta, y luego después de que se resuelva, se guarda en algún tipo de, podría ser guardado en una caché en memoria como Redis o memcached, pero más allá de eso, la respuesta JSON se almacena, se puede almacenar en un CDN. Así que eso significa que podrías distribuir, ya sabes, las respuestas a tus consultas de GraphQL, podrías distribuirlas por todo el mundo en centros de datos utilizando un CDN. Así que eso significa que algún usuario que esté en Tokio, Japón o algo así, si está tratando de visitar tu sitio y ejecutar una consulta de GraphQL, esa consulta llegaría a su centro de datos local dentro de Japón, vería que, oh, tenemos una respuesta en caché para esta consulta que aún es válida y la devolvería de inmediato. Así que este viaje de ida y vuelta, ir al servidor de origen ni siquiera sería necesario. Simplemente serviría las respuestas directamente desde el centro de datos CDN más cercano. Así es hacia donde se dirige WP GraphQL, lo cual es muy emocionante para mí. Esto sería similar a otras soluciones, como GraphCDN, que es un producto popular que hace este tipo de cosas, donde toma las respuestas de GraphQL y las almacena en caché en todo el mundo en un CDN. Pero muy pronto habrá soporte nativo para eso, para ese tipo de consultas persistentes, en WP GraphQL.

Estoy muy emocionado por eso. Eso llevará, como dije, el juego de almacenamiento en caché al siguiente nivel. Así que mantente atento a eso si estás interesado, puedes seguir el blog aquí o seguir la cuenta de Twitter para obtener actualizaciones. Muy bien, de acuerdo, creo que eso es todo en cuanto a preguntas, así que sigamos adelante con la conferencia. Estas son preguntas excelentes, así que muchas gracias. Avísame si tienes más. Muy bien, ¿qué hemos hecho? Hicimos un recorrido por nuestra aplicación. Hemos visto cómo puedes convertir WordPress en un servidor GraphQL utilizando el complemento WP GraphQL, luego configuramos Git para el desarrollo local. Algunos de estos pasos ya los hemos realizado, que serían estos pasos aquí en el archivo Léame, así que ya los hemos revisado. Sí, así que estamos bien ahí. Sin embargo, mencionaré una cosa más que es esta sección inferior aquí, puntos de control. Esto es muy importante para nuestra masterclass. Permíteme ampliar un poco el texto. Esto dice que puedes revisar estos commits en Git para ponerte al día si te quedas atrás en cualquier momento. Muy bien, a medida que nos sumergimos en el código y realmente trabajas en el teclado haciendo estas actualizaciones en el sitio, tratando de que las cosas funcionen. Si te quedas atrás en cualquier momento y el grupo ha terminado con uno, ha implementado una página y estamos listos para pasar a la siguiente y sientes que te estás quedando atrás, no hay ningún problema en absoluto. Lo que puedes hacer es ejecutar en la línea de comandos, Git checkout, y luego simplemente pegar este hash de commit aquí, y eso te pondrá al día. Entonces, el primero aquí sería, y solo recuerda que este es el commit después de crear la página de índice del blog, este es el commit después de crear la página de publicación de blog individual, y así sucesivamente. Así que si en algún momento, ya sabes, sientes que te estás quedando atrás, simplemente no te preocupes en absoluto, simplemente ve y revisa este commit y eso te pondrá al día con el resto del grupo. Muy bien, pero si todos siguieron los pasos, ya sabes, tienes tu archivo env.local allí y ejecutaste npm run dev, deberías estar, ya sabes, en el mismo punto que yo aquí mirando la aplicación frontend. ¿Alguien en el chat, puede darme un pulgar hacia abajo o algo si está roto y no pudiste iniciar esta aplicación? Solo avísame, estaré atento a eso. Muy bien, creo que estamos configurados para el desarrollo local aquí. El siguiente paso es Configurar Apollo Client. Entonces, si estás haciendo esto en un proyecto del mundo real, mi recomendación sería usar algún tipo de cliente GraphQL en tu aplicación JavaScript. Eso hace, así que alguien hizo la pregunta anteriormente sobre el almacenamiento en caché, y la respuesta que di fue sobre cómo almacenar en caché las respuestas que vienen del servidor. Sin embargo, Apollo Client hará un tipo de almacenamiento en caché diferente, y eso es el almacenamiento en caché en memoria de las consultas en el cliente. Entonces, eso significa, así que la razón por la que eso es genial es si alguien está en una cierta página y se envía una consulta y se recibe una respuesta, digamos que navegan lejos de eso a una página diferente y luego vuelven a esa página, ¿verdad? Lo que Apollo hará es ver que se necesita ciertos datos y luego verificará su propia caché y dirá, oh, ¿hemos obtenido estos mismos, ya sabes, hemos obtenido estos mismos datos exactos antes? Si es así, simplemente obténlo inmediatamente de la caché y renderiza ese componente, pero si no, entonces realmente haría una solicitud a la red para obtener los datos, así que. Entonces eso hace que sea agradable a medida que el cliente navega por el sitio, o a medida que el usuario navega por el sitio, Apollo simplemente obtendrá cosas de su caché si ya ha obtenido esos datos antes y luego solo se tomará el tiempo para hacer la solicitud si nunca ha obtenido los datos antes o si es demasiado antiguo, ya sabes, la caché no es válida o cualquier otra cosa, así que. Entonces el almacenamiento en caché es una gran característica, pero hay otras razones por las que podrías querer usar un cliente como Apollo, Apollo client, así que. Así que veremos cómo configurarlo. Este sería el siguiente paso para crear un sitio WordPress headless. Entonces, en nuestra página de enlaces aquí, si abres el número cuatro está la documentación para comenzar con Apollo client. Realmente solo hay unos pocos pasos para esto, pero te mostraré lo que necesitarías hacer aquí. Muy bien, así que esta página dice, Comienza con Apollo client. Y te dice que necesitas instalar algunos paquetes. Entonces necesitas hacer npm install, Apollo client y luego GraphQL. Ya hemos hecho eso en nuestro proyecto aquí, pero si no lo has hecho, ya sabes, necesitas instalarlos. El siguiente paso es inicializar Apollo client. Entonces necesitas un código que se vea así. Permíteme ampliar esto de nuevo, ahí vamos. Entonces necesitas llamar a new Apollo client para instanciar un nuevo cliente y luego simplemente darle algunos datos. Le dices, aquí está la URI para el backend de GraphQL que quiero usar para obtener mis datos, y aquí está el tipo de caché que quiero usar. Así que aquí estamos diciendo que almacene las respuestas en memoria. Así que usa la caché en memoria que tiene Apollo client. Así que esto también lo hemos configurado en nuestra aplicación. Te mostraré dónde se hizo eso. Entonces, si vas al archivo _app.js en nuestro código, aquí es donde se encuentra el proveedor. Y veamos, supongo que sí, deberíamos abrir este. Muy bien, dentro de lib, y luego Apollo client, lo que hice, fue simplemente crear este archivo Apollo client.js y simplemente pegué esto aquí y dije, hice lo mismo así que estoy diciendo que queremos instanciar Apollo client. Vamos a usar la caché en memoria que viene con Apollo, pero para la URI, puedes ver que la estoy obteniendo de nuestra URL de API pública de WordPress en Next. Entonces, lo que hace esto es decirle a Next.js que lo obtenga de nuestro archivo de variables de entorno. Recuerda cuando creamos .env.local, especificamos esta URL de API pública de WordPress en Next. Y luego le dimos algo allí dentro de este archivo simplemente estamos extrayendo ese valor. Entonces esto te permite tenerlo de forma dinámica. Entonces lo que podrías hacer es, como en tu entorno local, podrías tenerlo configurado para un punto final, o tal vez en el entorno de preparación, si tienes un sitio de preparación, podrías configurarlo con el punto final de GraphQL de tu sitio de preparación. Entonces eso es lo que usaría. Pero luego en tu entorno de producción, haría referencia al punto final de GraphQL de tu sitio de producción, por ejemplo. haría referencia al punto final de GraphQL de tu sitio de producción, por ejemplo. Y eso es lo que usaría. Y eso es lo que usaría. Pero luego en tu entorno de producción, Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonces eso es lo que usaría. Entonce

Entonces, esta aplicación lo utiliza, o lo utilizará tan pronto como lo conectemos. Esa es nuestra tarea. En lugar de 'blog' aquí, puedes ver que estoy importando dos cosas que aún no estamos utilizando. Por ejemplo, en nuestra página de blog en este sitio, estoy importando GQL de Apollo Client. Y también importando el cliente que creamos dentro de esta carpeta Lib aquí, esta cosa que vimos, estoy importando ambas. Pero si te fijas, aún no estamos utilizando estas líneas en este momento. Y eso se debe a que nuestros data simplemente provienen de este archivo de datos ficticios. Así que nuestra tarea será eliminar estas líneas para que no estemos utilizando datos ficticios y en su lugar utilicemos Apollo Client para obtener los datos. Espero que eso sea útil. Entonces sí, eso es a donde nos dirigimos. Utilizaremos Apollo Client para este proyecto. Genial, creo que eso es todo por el chat entonces. Así que sigamos adelante.

Muy bien, entonces en las diapositivas, tenemos componer una consulta GraphQL utilizando el IDE de GraphQL. Así que una cosa que es fácil de pasar por alto aquí es la I en esta palabra, ¿verdad? Podrías mirar esto rápidamente y pensar, oh, es GraphQL. En realidad no, es graph IQL, pronunciado gráfico. Correcto, y GraphQL es una popular aplicación de JavaScript que se utiliza para componer consultas GraphQL. Así que déjame mostrarte uno... Te mostraré un ejemplo de ello.

Así que recuerda esto, ya sabes, el sitio de WordPress que había iniciado antes solo para mostrarte cómo se vería instalar y activar el plugin WP GraphQL. Si vuelvo al administrador de WordPress, en realidad proporciona un IDE de GraphQL para ti justo en el administrador de WordPress. Así que si haces esto en tu sitio de WordPress, lo que podrías hacer es pasar el ratón sobre GraphQL, ir a la IDE gráfica, y te da este entorno de IDE realmente agradable que puedes usar para componer consultas. Y está yendo un poco lento aquí. Esta no es una gran demostración. ¿Qué está pasando? Bueno, no sé por qué tardó tanto tiempo en esa ocasión para cargar, no estoy seguro de por qué, pero esto es lo que parece un gráfico. Así que es una aplicación realmente útil para componer consultas para que puedas hacer cosas como esta.

Déjame mostrarte. Si voy al compositor de consultas, y abro esto aquí, puedes darle un nombre a tu consulta. Así que diré, ya sabes, obtener publicaciones como esa. Y luego dentro de esto, puedes, déjame deshacerme de algunas de estas cosas. Puedes empezar, puedes ver todo el gráfico de data gráfico y empezar a marcar casillas indicando qué data quieres de vuelta. Así que si quisieras publicaciones de blog, puedes ir a publicaciones. Y para cada uno de los nodos de esa publicación, quiero de vuelta, veamos. Así que la fecha de esa publicación de blog y el contenido, por supuesto, vamos a querer el título de la publicación del blog, que estaría aquí. Puedes ver que a medida que hago clic en estas casillas, compone la consulta para mí en este panel aquí mismo, lo cual es súper útil. Así que una vez que hayas seleccionado todos los campos que crees que quieres para esta página de tu aplicación de front-end que estás construyendo y tu consulta se ve bien, entonces puedes pulsar este icono de reproducción para ejecutar esto y ver en el lado derecho lo que tu aplicación de JavaScript de front-end recibiría si fuera a disparar esta consulta idéntica.

Entonces, hagamos eso. Presionaré el botón de reproducción y allá vamos. Así que aquí están los nodos de las publicaciones que obtengo. Así que puedes ver que cada uno de estos objetos es, aquí está la fecha, aquí está el contenido de la publicación del blog, aquí está el título de esa publicación. Así que esto es súper útil. Puedes seguir modificando esto y seguir marcando casillas hasta que tu consulta se vea bien y los data que vuelven son lo que necesitas para esta página o componente particular de tu aplicación de front-end. Entonces, una vez que estés satisfecho con ello, entonces puedes simplemente resaltar todo esto, esta consulta que has escrito y pegarla en tu aplicación de front-end. Y eso es lo que le dices a Apollo que dispare. Y entonces sabes la forma de los data que puedes esperar que vuelvan. Esto es súper útil. Así que este es un ejemplo del IDE gráfico que te da el plugin wp-graphical. Así que puedes usarlo aquí mismo dentro del administrador de WordPress. Para nosotros, sin embargo, vamos a usar una versión alojada gratuita de GraphQL para construir nuestras consultas. Entonces, volviendo a nuestra página de enlaces, ese sería el número siete aquí. Así que si haces clic en el número siete en la página de enlaces, ábrelo, eso te enviará a esta página. Así que eso es graphicalonline.com. Esta es una pequeña versión alojada gratuita genial de GraphQL que puedes usar. Entonces, para nosotros, ¿quién puede adivinar qué vamos a usar para una URL de punto final de GraphQL aquí? Si adivinaste el de nuestro archivo EMV, ganas, estás en lo correcto. Entonces, hagamos eso. Copiaremos todo esto del archivo .emv.local. Ese es el punto final de GraphQL que vamos a usar. Y lo pegaremos aquí y luego presionaremos este botón. Muy bien, y puedes ver que se parece bastante a lo que te mostré en el administrador de WordPress. Todavía tenemos el explorador de consultas. Todavía tenemos esta área para componer nuestras consultas y en esta área para ver los resultados de esas. Y tienes algunas otras opciones como agregar encabezados o lo que sea, si te gustaría. Muy bien, así que ahora estamos configurados para usar ese punto final para este sitio de contenido. Y si tienes curiosidad, esto es lo que realmente parece el WordPress. Así que si intentamos ir solo a este dominio, puedes ver que es un sitio de WordPress WPGraphQL. Se ve así. Si dejas que WordPress maneje el renderizado usando un tema particular, creo que este es como el tema 2022 o algo así. Entonces, así es como se vería. Pero en cambio lo que estamos haciendo es decir que queremos golpear el punto final de GraphQL para obtener solo JSON en bruto de vuelta porque vamos a manejar todo el renderizado en nuestra aplicación Next.js. Así que eso es de donde vino eso. Muy bien, así que de vuelta en el gráfico alojado aquí, avísame si todos pudieron ir a este enlace y luego pegar en este punto final de GraphQL porque vamos a pasar algún tiempo aquí componiendo nuestras consultas. ¿Podemos darme un pulgar hacia arriba, si llegaste a ese punto en el chat y estás aquí? Muy bien, genial. Estoy viendo algunos pulgares hacia arriba. Muy bien, entonces averigüemos qué necesitamos aquí. Entonces, volviendo a nuestra lista de tareas pendientes, ¿dónde estábamos aquí? Muy bien, así que componer una consulta GraphQL utilizando el IDE gráfico. Entonces, hagamos eso, ¿verdad? Nos sumergiremos ahora y haremos algo de codificación. Así que como te mostré antes, podrías marcar algunas casillas aquí para componer estas consultas. Así que puedes ir a publicaciones, empieza a construir las consultas para nosotros, o te mostraré cómo hay otra función de autocompletar. Así que todos, intentemos hacer esto, solo esto juntos aquí. Así que todos abran el Explorador. Si no está ya abierto, puedes presionar este botón aquí para abrir el Explorador GraphQL. Y una vez que esté abierto, desplázate hacia abajo hasta que veas publicaciones justo allí y luego haz clic para expandir publicaciones. Y luego vamos a hacer clic de nuevo en nodos porque estamos interesados en obtener cada uno de los nodos de publicación individuales. Así que haz clic de nuevo allí. Así que deberías ver esto, las consultas, comienza a componer la consulta para ti, y vamos a obtener algunas piezas de data. Así que solo pausa, aguanta conmigo un segundo aquí. Lo siento. Muy bien, así que empecemos a obtener los data que necesitaremos para nuestra página de blog. Dame un momento, solo un minuto de configuración aquí. Vale, creo que estamos listos. Muy bien, entonces, de vuelta aquí, íbamos a hacer publicaciones y luego nodos. Y luego dentro de eso, vamos a necesitar algunas piezas de data. Lo siento, una, marqué el equivocado. Admito que soy una aplicación terminada que tiene los campos. Estoy usando una hoja de trucos aquí. Ahí está, vale. Así que ahora sé qué campos decirnos para consultar. Muy bien, así que la consulta que vamos a intentar componer aquí es la que necesitamos para nuestra página de publicación de blog. Así que como recordatorio, es esta, ¿verdad? Vamos a componer una consulta para decirle al cliente Apollo y en última instancia decirle a WPGraphQL que la consulta que queremos ejecutar es para las publicaciones de blog más recientes aquí. Así que veamos cómo podemos construir eso. Muy bien, así que necesitaremos publicaciones, nodos. Y luego dentro de esto, vamos a marcar algunas casillas. Así que haremos, el primero que haremos es database ID. Así que dentro de los nodos, si te desplazas hacia abajo y encuentras las Ds, haz clic en database ID, verás que eso aparece en la lista. Luego obtendremos el título. Así que desplázate hacia abajo hasta las Ts y haz clic para el título, ¿verdad? Si te gusta este flujo de trabajo de hacer clic en las casillas o marcar las casillas, sabes, esto funciona genial. Otro truco es que puedes usar control espacio. Así que uso esto mucho. Así que, por ejemplo, si estás como anidado, si tu cursor está anidado así, puedes simplemente desplazarte en algún lugar dentro de tu consulta. Así que solo presionaré enter para obtener una nueva línea. Y luego desde aquí, si presiono control espacio, obtengo autocompletar aquí. Así que puedes ver que puedo usar las teclas de flecha, puedo subir y bajar. Y luego mientras escribo, esta lista se hará más y más corta e intentará autocompletar la cosa que estoy escribiendo. Así que lo siguiente que vamos a obtener es el extracto. Así que intentaré escribir eso. Así que si escribo ex, puedes ver ya que ha reducido la lista al extracto. Piensa que sabe lo que estoy tratando de escribir. Y si el resaltado es correcto, que eso es lo que quieres. Y si presionas enter, verás que aparece el extracto para ti. Así que esto puede ser una forma rápida, creo que si eres alguien que no, si sientes que no sabes cómo se ve el esquema GraphQL muy bien, que WordPress te da, entonces las casillas de verificación son realmente útiles porque puedes ver visualmente todas ellas. De lo contrario, si has hecho este tipo de cosas antes y estás algo familiarizado con el esquema GraphQL, eso es cuando hacer, sabes, este autocompletar para simplemente profundizar en la cosa que quieres rápidamente, eso es cuando es más útil, creo. Así que obtendremos el extracto. Lo siguiente es URI. Así que U-R-I, esa es la URI o la URL de la publicación del blog, por ejemplo. Lo siguiente que obtendremos es la imagen destacada. Así que este, tendrá algunos campos anidados dentro de eso.

Entonces, esta es nuestra primera vez viendo esto. Aquí está la imagen destacada en el Explorador, y puedes ver que tiene un desplegable aquí. Entonces, si lo expandimos, aquí está la imagen destacada. Me dice que va a lanzar un error diciendo, oh, necesitas una selección de subcampos dentro de esto para decirle a GraphQL qué campos quieres. Entonces, en nuestro caso, solo obtendremos algunos de ellos en el nodo de la imagen destacada. Entonces, imagen destacada, y ahora haz clic en nodo, así. Entonces, deberías estar en este punto. Y luego, dentro del nodo, solo vamos a obtener dos campos. Entonces, el primero es la URL de origen. Entonces, ahí lo tienes, entonces vamos a desplazarnos hasta las S's y luego marcamos la URL de origen. Esa es la URL donde realmente vive esta imagen, esto es, ya sabes, JPEG o PNG o lo que sea, esa es la URL de la misma. Y luego, por razones de accessibility, necesitamos nuestro texto alternativo también. Entonces, me desplazaré hacia arriba y marcaré la casilla junto al texto alternativo. Justo así. Y esto es realmente todo para nuestra consulta aquí. Sí, puedo mostrarte, introduciremos quizás una variable solo para especificar el número de páginas. Pero por ahora, si has construido esto, adelante y haz clic en el botón de reproducción para ejecutar esto y luego ver qué obtienes en el otro lado. Deberías estar mirando algo como esto donde tienes cada uno de los nodos de publicación y luego dentro de allí tienes, ¿cuál es el ID de la database? ¿Cuál es el título? ¿Cuál es el extracto URI? Una imagen destacada para algunas de estas podrías notar que es nula, ¿verdad? Podrías pensar, oh, ¿es esto un error? ¿Es un bug o algo así? Pero no lo es. Todo lo que significa es que esta publicación de blog en particular no tiene una. No hay ninguna imagen destacada adjunta. Entonces, tendremos que tener en cuenta eso en nuestra aplicación JS de front-end, tendremos que decir, ¿hay una imagen destacada? Si la hay, entonces adelante y renderízala en la página. De lo contrario, si no hay una, entonces no intentes renderizarla. Así que tenemos que tener en cuenta eso. Muy bien, y GraphQL es súper genial porque es muy explícito sobre lo que cada valor podría ser posiblemente. Entonces, si mantengo presionado el comando, estoy en un max, si mantengo presionado el comando y luego hago clic en la imagen destacada, aquí mismo, aparece en la documentation del esquema y puedes ver cuál es el tipo de esto. Entonces, el tipo de nodo aquí para las imágenes destacadas es este tipo de elemento multimedia en GraphQL. Si hago clic en eso, puedes ver todos los campos que tiene. Así que aquí está el texto alternativo, todos los tipos que el texto alternativo podría ser posiblemente, por lo que siempre es una cadena, por ejemplo, pero otras cosas aquí, puedes ver que, bueno, a veces podría ser nulo, otras veces podría ser una cadena, y así sucesivamente. Así que es muy útil por el hecho de que es tan explícito para que puedas saber exactamente cuáles son los tipos posibles en tu Aplicación JS de Front-End.

Muy bien, esto es todo para componer nuestra primera consulta con una excepción. Como mencioné, pasemos una variable aquí para cuántas publicaciones. Entonces, el valor predeterminado es 10, creo. Entonces esto nos dará 10 publicaciones de blog. Digamos que queremos algunas más en nuestra Aplicación de Front-End, lo que podemos hacer es abrir algunos paréntesis aquí. Entonces, después de las publicaciones, abrimos algunos paréntesis, y puedes ver nuestras opciones en este punto son después, antes, primero, último, donde, así que puedes hacer algo como paginación y algunas opciones de filtrado si quieres obtener solo ciertas publicaciones. Entonces, en nuestro caso, seleccionemos primero, y diremos que queremos las primeras 18 publicaciones. Entonces, en lugar de solo las primeras 10, que es el valor predeterminado, simplemente lo aumentaremos un poco. Entonces quieres las primeras 18 publicaciones. Si estuviéramos haciendo paginación, podríamos decir después y decir obtener las primeras 18 después de la de la página tres o lo que sea más abajo en la lista, pero solo para ser explícitos, podemos decir después de null, lo que significa comenzar al principio con la publicación más reciente. Entonces lo dejaremos así solo para ser extra explícitos, diremos después de null. Entonces estamos obteniendo una publicación, las primeras 18 de ellas después de null, así que estamos comenzando al principio de la lista. Entonces ahora si lo ejecutamos, deberíamos obtener 18 o cuantas haya, si solo hay dos publicaciones de blog, entonces solo podrías ver dos en esta lista, pero estamos obteniendo todas hasta un máximo de 18 allí.

Muy bien, entonces, volveré al chat de nuevo, déjame saber cómo te va. ¿Puedo obtener algunos pulgares arriba, haré una línea divisoria en el chat. Ahí vamos. ¿Puedo obtener algunos pulgares arriba si pudiste componer esta consulta y luego marcar la casilla para ejecutarla y ver los resultados en el otro lado. Muy bien, genial. Genial. Sí, esta es la consulta que necesitamos en nuestra aplicación de front-end y que vamos a usar para obtener nuestros data. Así que esto es emocionante. Vamos a hacer uso de eso ahora. Así que volvamos a abrir VS Code o cualquier editor de code que estés utilizando, y como he dicho algunas veces, nuestro trabajo es eliminar los data ficticios y hacer que esto funcione realmente con los data reales de GraphQL. Así que hagamos justo eso.

Así que nuestra página de front-end, adiós página de front-end, vas a romper tan pronto como hagamos esto, ¿verdad? Así que te haré resaltar estas líneas con los data ficticios y borrarlos y luego tan pronto como guarden eso, tu aplicación de front-end se estrellará y arderá si intentamos recargarla aquí ya que no tiene los data que espera. Así que arreglemos esto dándole los data reales del backend de WordPress. Así que te mostraré cómo hacer eso ahora. Así que lo que necesitamos hacer es usar este gql. Esto es una plantilla literal etiquetada es lo que es de Apollo Client y dentro de eso, vamos a definir cuál es nuestra consulta. Así que hagamos esto. Justo encima de donde está el componente del blog, escribe esto. Haremos const y luego get posts en mayúsculas justo así igual a gql y luego dos acentos graves justo así y luego un punto y coma después de eso. Así que si lees la documentation sobre Apollo Client, verás esta convención que usas. Te dice que uses esta plantilla literal etiquetada gql y luego pases dentro de los acentos graves la consulta que te gustaría ejecutar. Así que de ahí viene esto. Así que dentro de estos acentos graves, solo presionaré enter dos veces para hacer un poco de espacio. Y lo que haremos es que vamos a volver a gráfico y copiar todo esto que habíamos compuesto aquí. Lo copiaré y luego lo pegaré entre estos acentos graves así. Estoy obteniendo resaltado de sintaxis aquí porque tengo instalada una cierta extensión de VS Code. Tengo esta, Apollo GraphQL. Así que si te gusta trabajar con GraphQL y Apollo y quieres el resaltado de sintaxis dentro de estos GQL tag tipo de literales y otras características, entonces podrías instalar eso si quieres el Apollo GraphQL, pero de lo contrario, si solo estás viendo un texto sólido aquí, si todo es blanco o lo que sea, eso sigue estando bien. Aún funcionará muy bien. Muy bien, así que hemos definido la consulta que queremos aquí. Tal vez otro cambio, en lugar de simplemente llamarlo mi consulta, me gusta ser un poco más explícito. Así que simplemente lo llamaremos así, get posts. Así que si en el navegador console, Apollo Client está lanzando errores o lo que sea, está haciendo referencia a una cierta consulta que está rota, ahí está el nombre que veremos. Dirá el nombre de la consulta que falló es get posts. Así que sabremos cuál es. Por eso le damos un nombre allí. Muy bien, así que esto es todo para definir nuestra consulta. Al crear esta consulta, pasándola a través de GQL, eso la convertirá en lo que se llama un AST Árbol de Sintaxis Abstracta. Eso es finalmente lo que Apollo Client, ya sabes, espera recibir y puede usar para procesar la consulta. Así que realmente usamos esta constante que hemos definido aquí, bien, así que ese sería el siguiente paso. Así que hagamos eso. Desplazaremos un poco hacia abajo. Así que ve a get static props aquí. Y cualquiera que no esté muy familiarizado con Next.js, get static props es una convención de jazz siguiente que te dan. Dicen que si exportas una función asíncrona desde tu archivo de componente llamado get static props, entonces cualquier cosa dentro de esto, Next.js se ejecutará en tiempo de construcción. Así que efectivamente, hará cualquier obtención de data y cualquier cosa que quieras hacer en tiempo de construcción y luego pasará estas propiedades al componente cuando se renderice en el servidor de Next.js. Así que esto no es algo que el visitante del sitio tendría que esperar. Esto se hace antes de tiempo cuando se construye la página. Así que este es un lugar perfecto para nosotros para hacer nuestra obtención de data. Así que vamos a hacer uso de nuestro cliente que habíamos creado entonces. Así que en la parte superior del archivo, recuerda que habíamos importado este cliente de lib, Apollo client, justo así, eso es lo que vamos a usar. Así que en la parte superior de esto, solo presionaremos enter un par de veces y luego definiremos otra constante. Así que hacemos const response, escribimos eso. Igual. Esperaremos la respuesta de esto. Así que esperaremos client.query. Muy bien, así que empezaré con solo eso. Así que esto significa que estamos tomando la instancia de cliente de Apollo que habíamos creado, y luego llamando al método .query en eso. Y vamos a pasar en info sobre la consulta que nos gustaría que Apollo ejecute. Y luego obtendremos la respuesta. Así que dentro de estos paréntesis, entonces vamos a pasar un objeto. Así que adelante y abre algunas llaves así, presiona Enter, y luego vamos a decir query colon. Y aquí es donde pasamos la consulta. Así que para nosotros, eso fue getposts, todas en mayúsculas, justo así. Así que eso pasa en esta consulta que habíamos construido en la parte superior. Muy bien. Así que una vez que obtenemos la respuesta de eso, tenemos que hacer uso de ella. Así que en lugar de este postposts, así que borra eso. Y luego en su lugar vamos a profundizar en nuestras publicaciones de blog. Vamos a hacer response.data.posts.nodes. Así, te daré un segundo para escribir todo eso. Así que si te preguntas en tu aplicación, cómo sabrías profundizar tanto, GraphQL es realmente genial en que cómo estructuras, los niveles de anidamiento aquí, cómo estructuras tu consulta, la respuesta que vuelve coincidirá con eso, lo cual es muy genial. Así que si miras aquí, teníamos query, posts, nodes, y luego los campos, la respuesta es data, post, nodes, y luego los campos. Así que si profundizamos hasta ahí, y luego los campos, ¿verdad? Así que sigue esa misma estructura. Así que de ahí vienen estos posts y los nodes. Viene de nuestra propia consulta. Porque dijimos, agregaremos posts y luego nodes, ¿verdad? Y ahí es donde vivirían nuestras publicaciones. Muy bien, así que estamos tratando de profundizar en cada uno de nuestros nodos de publicación individuales. Y los estamos pasando como una propiedad, llamada posts a nuestro componente. Nuestro componente entonces está destruyendo, y sacando esa lista de publicaciones, e intentando renderizar nuestra lista de publicaciones en la página. Así que guardaré este archivo, y luego volveré al front-end, y cruzaremos nuestros dedos. Shazam, ahí está. Está funcionando. Así que puedes ver que no hay más latín. Teníamos los títulos en latín, ya sabes, con nuestros data ficticios. No más títulos en latín. Estos son los data en vivo reales que vienen de un sitio real de WordPress. Así que esto es súper genial, ¿verdad? Puedes ver que tenemos los títulos y los extractos que se muestran aquí. Y estos están enlazados. Así que si hago clic en uno de estos, intentará enviarme a, ya sabes, la página única para las publicaciones de blog que había hecho clic.

Entonces, si te desplazas hasta las Ds, haremos clic en Fecha justo ahí, oh, y todavía tengo, sí, así que necesitaremos Título y Fecha. Así que ambos, así que título, hice clic en uno de esos, lo dejaremos y luego tomaremos la fecha también. Queremos el contenido de esta entrada del blog. Entonces, en las Cs, marcaremos la casilla de Contenido así. Queremos el autor y aquí de nuevo, entonces vemos que esto no es una casilla de verificación, pero tiene un menú desplegable. Así que necesitaremos algunos campos anidados dentro de esto. Así que haz clic en el menú desplegable del Autor y luego en Nodo. Y para ese AutorNode, simplemente vamos a obtener el nombre de esa persona para que podamos mostrar quién lo escribió. Así que me desplazaré hasta Nombre y marcaré esa casilla. Así que ahí estamos, AutorNode Nombre, se ve bien. Lo último que necesitamos son las categorías para la entrada del blog. Así que desplázate hasta las Cs y luego lo que tenemos son las Cs. ¿Dónde estoy? Todavía estoy dentro de Autores. Oh rayos, mi error. Bueno, serían Cs en esta lista. Los niveles de anidamiento me están confundiendo. Ahí vamos. Así que aquí están las categorías que estoy buscando. Dentro de esto, vamos a ir por los nodos. Así que para cada uno de esos nodos de categoría, simplemente vamos a seleccionar dos cosas. El slug y el nombre. Así que dentro de este ahora, puedes marcar las casillas para slug y nombre, o de nuevo si eres alguien que, ya sabes, usando el teclado le gusta el autocompletado, lo que podrías hacer en este punto es abrir unas llaves y hacer comando espacio, slug, enter, comando espacio, nombre, enter. Para autocompletar esos campos también. De cualquier manera, ya sabes, funciona genial.

Muy bien. En lugar de Mi Consulta, obtenemos la entrada por slug. Y nuestra aplicación es lo que la llamamos, y aquí está nuestra consulta compuesta. Entonces, si intentamos lanzar esto, se estrellará y arderá porque no tenemos un ID. Dice que la entrada del ID no es válida. Como estamos pasando solo una cadena vacía aquí, necesitamos darle algo válido. Entonces, deberíamos poder hacer que esto funcione usando esto. Oh, creo que olvidé una barra. Déjame intentar esto una vez, y si funciona, lo pondré en el chat y tú también puedes usarlo. Entonces, intentaré pasar esto para el ID así, y luego necesitamos decirle qué tipo de ID también. Entonces, haré una coma y luego Control espacio, y puedes ver que además del ID, una de las otras variables que podría proporcionar es el tipo de ID. Y eso es porque hay varias formas en que WordPress podría identificar una entrada de blog. Puedes usar su ID de database, puedes usar su URI, puedes usar su slug, hay algunos identificadores diferentes. El predeterminado es el, lo que se llama el ID global en el mundo de GraphQL. Pero en cambio, vamos a buscarlo por su URI. Entonces, haré para el tipo de ID, se está poniendo un poco abarrotado, lo sé. Pero para el tipo de ID aquí, haré Control espacio de nuevo y aquí están mis opciones. Entonces, esto es una unión de GraphQL, se llama, donde solo tiene estas cuatro opciones. Y tienes que elegir una de estas o un enum más bien, esto es un enum. Entonces, ¿vamos a mirar un ID de database, o su ID, o su slug o su URI? Entonces, en nuestro caso, estamos diciendo, URI es el que queremos. Entonces, presionaré Enter y eso agregará URI. Muy bien, eso debería ser todo. Estamos diciendo, aquí está el ID para usar y el tipo de ID es URI. Entonces, déjame intentar esto una vez y luego te lo pegaré si funciona. Muy bien, entonces presionaré el botón e intentaremos ejecutar esto. Shazam, ahí está. Muy bien, entonces esto funciona. Porque ves que ahora estamos codificando esto. Entonces, si destacamos todo esto y lo pegamos en nuestra aplicación, eso es un problema, ¿verdad? Ya que cada página que acabamos de extraer de esta entrada de blog en particular. Necesitamos hacer esto dinámico aquí aceptando una variable. Entonces, eso es lo que podemos trabajar a continuación aquí. Entonces, para aceptar una variable, podemos hacerlo, como usando esta sección de abajo. Entonces, ve las variables de consulta aquí. Si nosotros, si haces clic allí, si está colapsado así, deberías poder hacer clic en él y arrastrarlo hacia arriba así. Dentro de las variables de consulta, puedes abrir algunas llaves rizadas aquí y escribirá nuestras variables. Entonces, déjame deshacerme de estas de aquí. Y si hago ID dos puntos, lo que necesitaremos hacer después para hacer esto dinámico es usar una variable con un signo de dólar. Entonces, el ID que vamos a pasar es nuestro URI. Entonces, lo haremos así. Entonces, para el ID, pasa esta variable llamada URI, coma, y luego nuestro tipo de ID. Esto podemos codificarlo, ¿verdad? Ya que siempre vamos a buscarlo por su ID. Entonces, esa parte de eso, me siento cómodo, ya sabes, codificándolo, pero no este URI aquí. Entonces, está diciendo que la variable URI, no está definida por esta operación aquí. Está diciendo, no estás aceptando esta variable. Entonces, necesitamos seguir adelante y hacer eso ahora. Entonces, al final de esta línea, necesitas agregar algunos paréntesis para decir, puedes ver ya mi error, las líneas onduladas están desapareciendo. Entonces, en este punto podemos decir, vas a esperar una variable y la variable que vas a aceptar es URI. Y en GraphQL tenemos que ser muy explícitos sobre el tipo, el tipo de argumento que pasamos. Entonces, haremos URI dos puntos, y luego tenemos que decirle que el tipo es un ID con un signo de exclamación. Entonces, puedes ir, puedes ir a profundizar en la especificación de GraphQL si quieres ver como todos los tipos soportados y cosas así. Pero este ID es un tipo que se ha definido para nosotros y luego el signo de exclamación significa que es requerido. Entonces, puede ser, ya sabes, en algunas consultas de GraphQL puedes tener un argumento opcional donde como podrías pasarlo, pero no tienes que hacerlo. En nuestro caso, sin embargo, estamos agregando el signo de exclamación porque esto siempre es requerido para que nuestra consulta pueda ejecutarse. Muy bien, entonces ahora tenemos nuestra consulta definida, está esperando URI, y luego cuando ejecuta la consulta, va a pasar esa variable en este punto. Lo va a usar como, ya sabes, este ID para pasar a la entrada. Entonces, ahora en las variables de consulta, si abro mis llaves rizadas y hago control espacio, puedes ver aquí, una vez más, obtengo autocompletado. Está, mirando mi consulta, sabe que, oh, parece que has definido una variable llamada URI. Entonces, esa es probablemente la que quieres, ya sabes, define en esta sección de variables de consulta, y tiene razón. Correcto, entonces resaltaré URI y simplemente presionaré enter, y luego aparecerá URI aquí. Y de nuevo, en este punto, podemos intentar usar esta larga cadena. Entonces, déjame poner esto entre comillas así, e intentaremos lanzar eso. Entonces, esto simula, ya sabes, una variable de consulta que se pasa a la consulta y luego se usa. Entonces, déjame probar esto ahora. Entonces, presionaré play. Ahí vamos. Funcionó de nuevo. Sí, entonces todavía estamos obteniendo los data de vuelta. Y esto nos da una consulta agradable, flexible, ya sabes, y dinámica para usar donde puedes simplemente lanzar cualquier URI a ella, y buscará una entrada diferente dependiendo de qué URI se publicó, se pasó. Entonces, esto es bueno. Esto es todo lo que necesitamos para nuestra página de entrada de blog individual. Entonces, sigamos adelante y usemos esto ahora. Muy bien, entonces, de vuelta en tu editor de code, adelante y abre URI aquí, y seguiremos nuestro mismo patrón de antes. Entonces, vamos a eliminar estas líneas de data ficticias. Ya no los necesitamos. Y necesitamos definir nuestra consulta. Entonces, esta vez, en lugar de definir nuestra consulta justo encima del componente, podemos hacerlo quizás más abajo para que esté más cerca de donde realmente lo usamos. Sí, justo encima de getStaticProps. Hagamos eso, así será más fácil de ver, podrás ver el componente aquí y luego ver dónde lo usamos justo debajo también. Muy bien, entonces, en este punto, justo encima de getStaticProps, vamos a definir una constante de nuevo, entonces haz const, y luego getPost. Adelante y escribe eso. Y al igual que la última vez, vamos a establecer eso igual a este gql, taggedTemplateLiteral, y con dos puntos al final de él. Tagged Template Literals, si no estás familiarizado, podrías buscar eso en Google y encontrar los docs de Mozilla sobre qué son, pero son como un tipo de función que espera una cadena. Entonces, puedes pensar en gql como una función y está pasando la cadena que está dentro de estas comillas invertidas y luego usándola como su argumento. Muy bien, entonces, dentro de eso, aquí es donde vamos a pegar nuestra consulta. Entonces, volveré a gráfico y toda la consulta que habíamos compuesto, copia eso, y eso es lo que vamos a pegar en en este punto. Entonces, getPost, es lo que lo llamamos. Muy bien, tenemos que hacer uso de esto. Entonces, una cosa que estamos haciendo aquí es que estamos obteniendo el URI de Next.js. Y Next.js tiene este argumento de contexto que se pasa aquí y estamos profundizando. Estamos diciendo para el contexto de la página actual, queremos profundizar en los parámetros, profundizar en el URI, y luego unirlos con una barra.

Acabo de, porque de forma predeterminada separa todo esto. Ve las barras diagonales aquí e intenta dividirlas. Entonces, lo que vamos a hacer es simplemente unirlos para que nos quede solo una cadena para trabajar. Así es como se usa la unión.

Entonces, después de hacer eso, recibimos, recuperamos el URI que, que nos dieron. Necesitamos intentar buscar esto realmente. Entonces, usaremos Apollo Client nuevamente en este punto. Entonces, presionaremos enter un par de veces y obtendremos nuestra respuesta de Apollo. Entonces, escribe const response igual. Vamos a esperar la respuesta y luego vamos a llamar, client.query, como la última vez. Entonces, ve y escribe eso. Y luego dentro de la consulta, vamos a pasar ese objeto como lo hicimos la última vez. Entonces, abre algunas llaves rizadas y aquí necesitamos decirle qué consulta usar. Correcto, en nuestro caso, esa es la que definimos arriba. Es git post, así que copiaré eso y eso es lo que vamos a pasar como nuestra consulta. Pero a diferencia de la última vez, aún no hemos terminado. Necesitamos presionar enter una vez más y luego pasar las variables que queremos que use esta consulta. Entonces, ve y escribe variables aquí, dos puntos y luego esto es un objeto donde necesitamos pasar cualquier variable a usar. Entonces, en nuestro caso, eso es URI. Entonces, este URI que habíamos extraído del contexto de las páginas actuales. Ese URI es lo que necesitamos pasar en este punto como la variable. Muy bien, una vez que hayas compuesto todo eso, ahora le estamos diciendo a Apollo Client, aquí está la consulta para usar y aquí están las variables para pasar y estamos esperando la respuesta que regresa. Entonces, en este punto solo tengo que verificar si se recibió la entrada o no. Entonces, necesitamos definir, necesitamos verificar, verificar si se recibió y tratar de extraer la entrada. Hagamos const post igual, y luego intentaremos profundizar en esto. Esto sería response.data.post, así, y recuerda esta estructura de datos, aquí este nivel de anidamiento es igual a lo que habíamos definido. Entonces, esto sería el data y eso sería post, por eso es solo data y luego .post. Entonces, intenta profundizar en ese nivel, pero si hay algún error, si no pudimos buscar las props estáticas, entonces esto podría ser indefinido, ¿verdad? Como Vaka dijo en el chat, para la última consulta, estaba recibiendo un mensaje indefinido. Entonces, esto podría suceder aquí muy fácilmente si alguien simplemente va a nuestra aplicación front-end y hace esto, ¿verdad? Si escriben algo inválido o intentan ir a alguna página donde el URI es inválido, esto podría fallar fácilmente aquí. Entonces, vamos a verificar eso. Usaremos el encadenamiento opcional en JavaScript para hacer eso. Entonces, diremos response interrogación, si es así, sigue adelante, intenta acceder a los datos. Y luego diremos, si hay datos, entonces sigue adelante e intenta profundizar en la entrada. Entonces, si en algún punto de esta cadena, algo es indefinido, eso haría que la entrada también sea indefinida. Entonces, nuestra verificación aquí simplemente dice, si la entrada es falsa, lo que significa que no se definió, entonces sigue adelante y devuelve not found true. Y esto le dirá a Next.js que renderice nuestra página 404 para esta aplicación diciendo que esta página no se encontró. De lo contrario, lo haríamos pasar esta verificación y la entrada es verdadera, eso significa que la encontramos, ¿verdad? Entonces, en ese punto, estamos diciendo, estamos pasando props a nuestro componente y aquí está la prop para usar. Es esta entrada que obtuvimos. Muy bien, creo que eso debería funcionar. Veamos si podemos hacer que esto funcione. Entonces, guardaré todo eso y veamos si podemos hacer que esto funcione. Entonces, solo voy a hacer una pequeña comprobación. Mi aplicación todavía se está ejecutando en el front-end, así que intentaré hacer clic en esta entrada. ¿Qué tal construir una librería? Ahí vamos, funcionó. Genial, ya no tenemos latín en esta página, ¿verdad? En lugar de nuestro título en latín en el contenido ficticio. Ahora, cuando alguien visita esta URL construir una librería, obtienen los datos reales de la entrada, por lo que fue escrita por esa persona en esta fecha, aquí está todo el contenido y cualquier categoría a la que esté asignada al final. Entonces, puedes ver que ahora tenemos dos, tutoriales en WordPress. Muy bien, eso es todo. Esa fue nuestra primera consulta de GraphQL que aceptó un argumento. Espero que haya sido interesante ver eso y luego copiamos esto en nuestra aplicación y lo conectamos para renderizar las páginas de entrada de blog individuales. Entonces, eso fue, conquistamos el número siete. ¿Cómo nos sentimos? Denme algunos pulgares arriba, pulgares abajo en el chat. ¿Cómo les fue con el número siete? Excelente, veo algunos pulgares arriba. Bien. Veamos, ¿cómo voy de tiempo? Bien, sí, bastante bien creo. Así que sigamos adelante aquí. Muy bien, si todavía están conmigo y quieren ver más acción, sigamos adelante. Veamos, bien, en este punto, acabamos de terminar el número siete, como dije, en la lista, ¿verdad? Implementar página de entrada de blog individual. Entonces, a continuación, debemos implementar nuestra página de entrada individual o nuestra página de categoría individual, ¿de acuerdo? Como recordatorio, al final de nuestras páginas de entrada de blog individuales, tenemos estos enlaces, ¿verdad? Tutoriales y WordPress. Si hago clic en tutoriales, todavía es ese contenido ficticio, ¿verdad? Todavía dice el nombre de categoría incorrecto y tiene los datos ficticios aquí. Entonces, conectemos esto para que funcione realmente. Muy bien, de vuelta en nuestra aplicación front-end, ¿dónde necesitamos buscar para encontrar esto? Eso sería dentro de las páginas y luego categoría, tenemos esta ruta dinámica de slug aquí. Entonces, si alguien intenta navegar a slash categoría slash algún slug así, eso se mapearía a este archivo aquí, ¿verdad? Y al igual que, al igual que hemos visto muchas veces antes, estamos extrayendo los datos ficticios y luego pasándolos dentro de git static props a nuestro componente. Entonces, será nuestro trabajo eliminar eso. Muy bien, al igual que la última vez, necesitamos componer una consulta. Y creo que esta vez, podríamos ir aún más rápido ya que todos ustedes son expertos en este punto en GraphQL y consultas y todo eso, ¿verdad? Entonces, veamos qué podemos hacer. Vamos a definir una consulta y llamémosla git category. Entonces, ve y vuelve al IDE de GraphQL conmigo y escribe consulta git category, así nomás. Con algunas llaves y veamos. Sí, ¿qué tal si esta vez hacemos las variables primero ya que eso está fresco en nuestra mente desde la última vez? Esta vez, nuevamente aceptará una variable que usará para buscar la categoría. Entonces, en lugar de git category o después de git category, abriremos algunos paréntesis y diremos, vamos a aceptar, lo siento, no puedo hablar ahí. Vamos a aceptar un ID de slug así con el signo de dólar, dos puntos. Y el tipo de esto es un ID con un signo de exclamación, así nomás. Y también vamos a pasar, oh, espera aquí, hay un error. Bien, para esto vamos a aceptar dos, bien, haremos slug ID y luego slug name, y eso será una cadena. Con un signo de exclamación, espera aquí. Probemos algo con esta consulta, creo que podríamos simplificarla. Déjame ver, entonces la categoría, el ID es, solo voy a hacer un poco de codificación en vivo aquí para ver, en realidad no necesitamos ambas variables. Creo que podemos hacerlo con solo una, quiero confirmar eso rápidamente. Entonces, el tipo ID es slug, y luego dentro de eso, solo obtendré el nombre de la categoría. Entonces, déjame ver si puedo hacer que esto funcione con solo una variable así. Entonces, en las variables de consulta, abriré algunas llaves rizadas, haré control espacio para obtener mi autocompletado, enter para slug ID. Ahora intentaré pasar un slug válido. Así como tutoriales, solo lo copiaré, e intentaré usarlo como un ID. Bien, sí, eso funciona. Entonces creo que mi, en la base de código original, estaba pasando dos por alguna razón, pero en realidad no es necesario. Oh no, sí lo es. Lo siento, probablemente estoy confundiendo a todos en este punto.

Entiendo por qué lo estaba haciendo. Muy bien. Entonces vamos a volver a nuestros tutoriales porque tenemos una consulta anidada para las publicaciones. De todos modos, está bien. Vamos a incluir slug ID y luego slug name. Espera, mentí. Ok, cambié de opinión tres veces ahora. Crees que estoy loco. Lo siento. Creo que podemos usar solo la que es como un pensamiento. Así que esto es lo que vamos a hacer. Vamos a hacer get category. Vamos a pasar solo el slug ID de esta manera y luego para el slug ID, pasaremos 'tutoriales'. Ok. Así que eso funciona para obtener el nombre de vuelta. Y ahora necesitamos obtener las publicaciones dentro de esta categoría también. Entonces, en este punto, si comienzas a escribir P O S, verás que aparece el autocompletado. Así que solo presiona enter y luego necesitaremos una subselección aquí. Así que algunos campos anidados dentro de las publicaciones. Así que abriré algunas llaves y dentro de esto, necesitamos los nodos de las publicaciones. Así que escribiremos nodes, abriremos eso. Haré control espacio nuevamente para obtener mi autocompletado y comenzaré a escribir ID de la database. Ese es el primero que necesitamos. El siguiente es el título de la publicación. El siguiente es el extracto. Ahí vamos. El siguiente es el URI así. Y el siguiente tendremos otra subselección, que será nuestra imagen destacada. Así que si comenzamos a escribir imagen destacada allí y luego abrimos algunas llaves dentro de eso, diremos para el nodo de la imagen destacada, necesitamos dos cosas, solo la URL de origen y luego el texto alternativo. Lo mismo que la última vez que intentamos esto. Sí, solo texto alternativo así. Muy bien, esto es bastante bueno. Así que estamos creando una categoría, obteniendo el nombre de esa categoría, y luego diciendo, y para las publicaciones asociadas con esta categoría, aquí está toda la información que necesitamos sobre ellas. Intentémoslo. Ahí estamos. Muy bien, bien. Lo siento, estaba indeciso ahí tratando de decidir si necesitábamos el segundo argumento, pero creo que esto funcionará muy bien para nosotros. Muy bien, esto está funcionando muy bien. Entonces tenemos el nombre del tutorial que usaremos para mostrar en la parte superior de la página para decirle a las personas a qué categoría pertenece. Y luego también obtenemos nuestra matriz de nodos con la información que solicitamos aquí. Genial. Creo que esto funcionará bien. Revisemos el chat. Todos están bien. Muy bien. Así que avísenme si tienen algún problema con esto. Si pueden componer esta consulta, eso es exactamente lo que necesitamos. Así que volvamos a nuestra página de categoría y slug.js aquí. Y haremos uso de esto. Muy bien. Así que primer paso, al igual que la última vez, eliminaremos los datos ficticios. Ya no los necesitamos. Y luego justo encima de git static props aquí, aquí es donde definiremos nuestra consulta. Muy bien, así que a estas alturas, haremos const git category. Lo llamaremos todo en mayúsculas así. Y GQL con nuestras comillas invertidas. Así que comencemos con eso. Y luego dentro de nuestras comillas invertidas, ahí es donde pegaremos todo esto. Así que copiaremos toda esa consulta que habíamos compuesto y la pegaremos dentro de nuestras comillas invertidas. Muy bien, y luego necesitamos usarla realmente. Entonces puedes ver aquí una vez más, estamos profundizando en contextos y luego en params y luego en slug para extraer el slug de la URL de la página en la que se encuentra el usuario actualmente. Ahora, necesitamos usar eso para buscar nuestra categoría. Muy bien, justo debajo de esto, presionaré enter un par de veces, haré const response igual a await client.query, como hemos hecho varias veces antes. Y dentro de esto, vamos a abrir nuestras llaves rizadas, y apuesto a que puedes adivinar qué vamos a hacer a continuación. Para la consulta que vamos a usar, vamos a pasar esta cosa que acabamos de construir, ¿verdad? Así que para la consulta que vamos a usar, vamos a decir que use esa consulta, y luego presionaremos enter y pasaremos la variable que espera. Así que diremos variables, y eso será un objeto, la variable que espera es el slug ID. así que pasaremos slug ID, y lo que vamos a pasar es este slug que hemos extraído de los parámetros. Sí, está bien, sí. Un mejor nombre, podríamos haber elegido llamarlo simplemente slug probablemente, podría haber sido una mejor opción para que coincida con lo que estamos extrayendo de aquí, pero nombrar es difícil, y esto funcionará muy bien porque en realidad se mapea como el campo ID, campo de entrada en GraphQL. De todos modos, esto debería funcionar muy bien para nosotros. Estamos pasando la consulta aquí, y luego, para las variables, pasamos el slug de la página actual, ¿de acuerdo? Y al igual que la última vez, debemos verificar si esta categoría es válida. ¿Pudimos encontrar esta página? Así que haremos eso, muy similar a lo que hicimos la última vez. Haremos const category igual a response.data.category. Así que intenta escribir eso, pero en caso de que sea inválido, algunos de estos podrían ser indefinidos. Al igual que la última vez, usaremos el encadenamiento opcional. Y haremos un signo de interrogación, y luego otro signo de interrogación justo aquí. Entonces, si no podemos profundizar hasta el final, sabremos que no es válido y renderizaremos nuestra página 404. De lo contrario, si no es falso, lo pasaremos a nuestro componente como props. Muy bien, y eso es lo que realmente renderizaremos en la página. Así que creo que estamos bien con esto. Así que guardaré eso. Y veremos cómo lo hicimos. Muy bien, recargaré tutoriales. Ahí vamos. Sí, está funcionando. Así que ahora, cuando visito /categoria/tutoriales, obtengo un nombre adecuado para esta categoría que está visitando el usuario. Y luego las publicaciones dentro de ella son todas las que están en esa categoría. Podemos hacer una pequeña comprobación, supongo, podemos abrir una publicación, desplazarnos hasta el final y luego, sí, claro. Así que todas estas están dentro de la categoría de tutoriales. Bien.

Eso fue todo para la página de tutoriales. ¿Cómo se sienten? ¿Puedo obtener pulgares arriba, pulgares abajo de todos? Bien. Pulgar hacia arriba, gracias. Muy bien, genial. Gracias. Muy bien. Me siento bien. Hemos logrado mucho, ¿verdad? En un período de dos horas o algo así, hemos creado nuestra página de índice de blog, nuestra página de publicación individual, nuestra página de categoría individual, y aún no hemos terminado. Lo siguiente es la página de búsqueda. Así que esto debería ser divertido, como dije, porque esta es nuestra primera página en la que estamos haciendo solicitudes del lado del cliente. Entonces es la primera, en la que estamos haciendo solicitudes del lado del cliente. Hasta este punto, solo hemos estado haciendo solicitudes en tiempo de compilación. Entonces, dentro de, ya sabes, git static props aquí que proporciona Next.js, hemos estado enviando consultas, ya sabes, en tiempo de compilación en el servidor de Next.js, cuando la página se está, ya sabes, pre-renderizando, construyendo. Ahí es cuando hemos estado enviando nuestras solicitudes de datos, pero para la página de búsqueda, no podemos hacer eso, ¿verdad? No sabemos qué término de búsqueda va a intentar el usuario antes de tiempo. Entonces tenemos que hacer solicitudes de GraphQL sobre la marcha desde el navegador para acceder a nuestro backend de WordPress y luego volver a renderizar la lista. Entonces esto debería ser interesante para ver cómo funciona. Muy bien, entonces nuestra primera página, nuestra página de búsqueda, cerraré mis pestañas abiertas aquí en VS Code. Y luego, para recordarnos, volveremos a la página de búsqueda, veremos cómo se ve. Así que esta es la página, y nuevamente, como vimos la última vez, actualmente no funciona. Intentamos enviar el formulario. Todos estos datos se mantienen sin cambios. Entonces, dentro de las páginas, abriremos search.js. Ahí está. Y lo haremos funcionar. Comencemos componiendo nuestra consulta. Creo que eso será útil. Muy bien, como antes, volvamos a GraphiQL. Así que podemos eliminar nuestras variables de consulta y nuestra consulta aquí. Entonces no necesitaremos eso más. A continuación, haremos uno nuevo para las búsquedas. Así que hagamos esto. Escriba la palabra consulta y luego escriba tipo search posts. Así, consulta search posts. Este, esperaremos un argumento, por supuesto necesitamos el término de búsqueda del usuario que quieren usar. Así que haré signo de dólar, término de búsqueda, dos puntos. Y luego el tipo de variable que queremos aceptar aquí es una cadena. Así que escriba S mayúscula, cadena, y queremos decir que es requerido para que esta consulta pueda ejecutarse. Así que agregaré el signo de exclamación para indicarle a GraphQL que esto debe pasarse. Muy bien, con eso, abriremos unas llaves y luego en el siguiente nivel, iremos a consultar las publicaciones y usar ese término de búsqueda. Así que comenzaré a escribir publicaciones aquí. Y dentro de esos paréntesis, necesitamos usar nuestro argumento where. Así que hay algunas otras opciones aquí para hacer paginación, como mencioné, podrías hacer, dame las primeras 10 después de esta otra publicación o lo que sea, hacer paginación basada en cursor. Sin embargo, vamos a hacer uso del argumento where, que se utiliza para filtrar publicaciones y decir en lugar de todas, filtrar solo las publicaciones en esta categoría o que coincidan con este término de búsqueda o lo que sea. Así que haremos eso. Ahora haremos where, dos puntos, y esto es un objeto aquí. Entonces, en lugar de where, que espera un objeto. Dentro de aquí, aquí están todas las formas en que podrías filtrar, una publicación. Entonces, para nosotros, lo haremos por búsqueda. Así que si comienzo a escribir eso, se autocompletará. Búsqueda, dos puntos, y este es el punto donde queremos que nuestra consulta sea dinámica y pasar ese término de búsqueda que el usuario nos ha dado. Entonces, para la búsqueda aquí, pasaremos término de búsqueda. Muy bien? Y luego a partir de ahí, necesitamos unas llaves después de las publicaciones. Y aquí profundizaremos en los nodos. Abrir más llaves. En este punto, necesitamos algunos de nuestros campos. Entonces, el primero es ID de la base de datos. El siguiente es título, así que escriba título. El siguiente es extracto. El siguiente es URI. El siguiente es imagen destacada. Y esto tiene subselecciones, haremos una llave, y luego para el nodo de esa imagen destacada, al igual que la última vez, haremos URL de origen y texto alternativo. Y solo una nota al margen aquí. Es posible que estés viendo estos campos y pensando, hombre, los hemos escrito tantas veces. Esta imagen destacada que siempre tiene un nodo y siempre tiene URL de origen y texto alternativo, ya lo hemos escrito como tres veces diferentes, ¿verdad? Parece que hay algo de repetición ahí. Y tienes razón, la hay. Y ahí es donde más adelante en el taller, veremos cómo usar fragmentos de GraphQL. Eso es lo que pueden ayudar a resolver. Es cuando tienes parte de una consulta, en algún lugar de tu base de código lo has definido como un fragmento, y luego lo insertas en los puntos dentro de otras consultas donde quieres usarlos. Así que mantente atento para ver cómo puedes reducir algo de la repetición en tus consultas. Muy bien, esto debería ser suficiente, creo. Pero si intento enviar esto, ¿funcionará? La respuesta es no, ¿verdad? Porque no hemos proporcionado este término de búsqueda que espera aquí. Entonces, en las variables de consulta, abriré unas llaves, presionaré Control Space para obtener el autocompletado y me dirá que cree que quiero término de búsqueda, lo cual es correcto. Y aquí, esto es realmente libre, ¿verdad? Esto es bastante divertido porque podemos buscar cualquier cosa en este punto. Entonces, el punto final de GraphQL que estamos usando es para un blog de WPGraphQL y probablemente hablen de temas interesantes de headless WordPress, como React, ¿qué tal, verdad? Así que escribiré React aquí, eso es lo que vamos a buscar y lo enviaré. Ahí vamos, mira, primera publicación, construir una aplicación usando React y el complemento GraphQL AP para WordPress, ¿verdad? Resulta que es una publicación escrita por mí en el blog de WPGraphQL. Así que esto es genial. Nuestra búsqueda funciona para encontrar publicaciones con React. Podemos intentar encontrar casos extremos como si solo escribiera un montón de palabras sin sentido e intentara buscar aquí. Ahí vamos. Todavía obtengo una respuesta exitosa, pero los nodos que se devuelven son solo una matriz vacía. Así que tengo que tener eso en cuenta en nuestro frontend y decir, ya sabes, si ejecutamos la búsqueda y los nodos están vacíos, tal vez mostrar simplemente un mensaje que diga que no se encontraron resultados, ¿verdad? Pero para otros temas, hagamos algo como GraphQL o algo así. Para otros temas, parece funcionar muy bien para encontrar coincidencias. Así que esto es genial, eso es exactamente lo que necesitamos. Puedes componerlo así si te gusta que la búsqueda esté en una línea separada o puedes ponerlos en la misma línea si prefieres ese aspecto. Pero de cualquier manera, esta es la consulta que necesitamos. Entonces, vayamos a hacer uso de eso dentro de search.js. Eliminaremos nuestros datos ficticios habituales aquí arriba y definiremos nuestra nueva consulta.

Entonces haremos const, lo llamaremos searchPosts. O posts, quiero decir, todo en mayúsculas así igual a GQL. Ya sabes cómo va esto a estas alturas y luego dentro de nuestras comillas invertidas es donde vamos a pegar nuestra consulta que construimos. Así que copia eso, pégalo, ahí vamos. Y ahora vamos a hacer uso de esto pero no lo haremos en tiempo de compilación. Como dije, si te fijas en este archivo no hay getStaticProps. Eso se debe a que no lo necesitamos. Vamos a ejecutar estas consultas sobre la marcha desde el cliente. Para hacer eso, vamos a usar un hook que proporciona Apollo Client. Así que es por eso que aquí arriba estamos importando este hook useQuery de Apollo Client. Tienen su propia documentación. Si buscas la documentación de Apollo Client tienen useQuery, useLazyQuery, useMutation y toda la documentación sobre cómo usar esos hooks. En este taller, te familiarizarás con el uso del más común que es el useQuery para ejecutar solicitudes de GraphQL en el lado del cliente. Así que eso es lo que vamos a usar. Te mostraré cómo en lugar de nuestro componente en lugar de tener estos datos ficticios, estábamos diciendo que const loading siempre es falso. Const error siempre es falso. Y luego para los datos, estábamos pasando nuestros datos ficticios, en lugar de todo esto vamos a usar los valores reales de carga, error y datos que el hook useQuery de Apollo nos devuelve. Así que vamos a eliminar todo esto y en su lugar usaremos query. Entonces, oops, ¿qué pasó ahí? Ok, así que comienza escribiendo const y luego vamos a desestructurar algunas cosas que vamos a obtener de useQuery. Así que vamos a hacer, vamos a extraer ese estado de carga, vamos a extraer un error si lo hay y luego vamos a intentar acceder a los datos. Así que esas tres cosas las vamos a desestructurar y extraer de los resultados de nuestra llamada al hook useQuery. Oops, ahí vamos, es así. Bien, y luego useQuery acepta dos argumentos. El primero es la consulta y el segundo son las opciones que quieras definir. Así que para nosotros, si nos desplazamos hacia arriba, nuestra consulta es searchPosts, ¿verdad? Ese es el nombre, copiaré el nombre de esa constante y lo pegaré aquí. Así que le diré a useQuery qué consulta ejecutar. Y ahora necesitamos pasar el array de opciones también para decirle acerca de nuestras variables que necesitamos. Así que abre unas llaves como esto y dentro de ellas, haremos variables, dos puntos y abriremos un objeto dentro de aquí. Necesitamos proporcionar el término de búsqueda. Así que lo que vamos a hacer es almacenar ese término de búsqueda en el estado de React así Te mostraré cómo funciona en un minuto, pero así que copiaré searchTerm y eso es lo que vamos a pasar a nuestra consulta justo aquí como el término de búsqueda. Otra cosa que vamos a poner aquí es este notifyOnNetworkStatusChange que viene con Apollo. Eso es mucho para escribir, pero si comienzas a escribir N-O-T debería aparecer. Lo vamos a establecer en verdadero, bien. Y la razón de esto es si no lo estableces en verdadero, Apollo solo establecerá loading en falso la primera vez que se ejecuta la consulta. Sé que es extraño, pero así es como funciona. Así que si ejecutas la consulta una vez, loading será verdadero mientras se resuelve y luego se establecerá en falso. Y luego a partir de ese punto, si vuelves a ejecutar la misma consulta y pasas diferentes variables, loading se mantendrá en falso a menos que hagas esto. A menos que digas que notifique un cambio en el estado de la red verdadero entonces loading cambiará entre verdadero y falso cada vez que es lo que queremos. Así que sé que es una peculiaridad extraña pero eso es por lo que se especifica aquí. Bien, eso es realmente todo. Así que nuestro hook useQuery le dirá a Apollo que ejecute esta consulta en el cliente y estamos pasando la consulta y las variables que necesitamos y obteniendo todas estas cosas de vuelta. Bien, debajo de esto, la línea de posts debería seguir funcionando bien. Puedes ver lo que estamos haciendo aquí estamos tratando de profundizar en data.posts.nodes.length y luego lo convertimos a un booleano. Así que si data es indefinido en algún punto aquí y eso se convertiría en falso. Así que no tenemos publicaciones o si la longitud está vacía, ¿verdad? Recuerda cuando ejecuté esa consulta y pasé una palabra sin sentido donde la matriz de nodos estaba vacía. Si ese es el caso donde la longitud de post.nodes es una longitud de cero, entonces en ese caso también posts será falso, ¿verdad? Ya que no tenemos ninguno, de lo contrario, si profundizamos a este nivel y la longitud es verdadera cuando la convertimos a un booleano como uno, dos, tres u otro entero positivo entonces posts será verdadero allí. Y vemos más abajo cómo lo estamos usando. Así que veamos esta página real por un minuto y veamos cómo funciona esto. Así que ya viste en la parte superior, estamos usando useState de React, pasando una cadena vacía. Así que estamos diciendo que cuando este componente se carga por primera vez, no hay término de búsqueda, ¿verdad? Solo mantenlo vacío. Y luego estamos extrayendo de eso, el término de búsqueda actual y luego la función que necesitamos para poder establecerlo. Estamos proporcionando al usuario este formulario aquí en la parte superior de la página donde deberían poder escribir algo. Y luego cuando hacen clic en buscar, tenemos un controlador de envío aquí. Estamos diciendo que cuando la persona escribe algo y luego envía el formulario, estamos proporcionando el envío de formulario predeterminado en la web. Estamos usando estos datos de formulario que se construyen en la plataforma web aquí. Solo estamos diciendo que queremos nuevos datos de formulario para este elemento en particular, o para este elemento HTML que se envió, estamos extrayendo los datos de eso y luego haciendo object.fromEntries para extraer cada uno de los valores individuales de los campos de entrada, que en nuestro caso fue este aquí, la entrada de búsqueda. Y una vez que hemos hecho eso, hemos extraído los valores. Estamos profundizando en el valor del término de búsqueda y llamando a nuestra función setSearchTerm aquí que obtuvimos de useState para establecer eso ahora como el nuevo valor del término de búsqueda. Tan pronto como hagamos eso, tan pronto como se establezca en el nuevo valor, React volverá a renderizar este componente y la variable del término de búsqueda será nueva, ¿verdad? Se actualizará y reflejará este, el nuevo término de búsqueda. Y luego Apollo verá eso en su nuevo useQuery aquí, verá que este valor del término de búsqueda es este nuevo valor después de que ocurra la nueva renderización, mejor voy a buscar estos datos y luego proporcionar los nuevos estados de carga, error y datos ahora. Sí, eso es cómo funciona todo eso. El usuario envía el formulario, lo que establece el término de búsqueda en algo nuevo. Y luego el useQuery dispara una solicitud usando esa nueva cosa. Y eso provoca una nueva renderización de nuestra lista de publicaciones aquí. Bien, y luego debajo de eso, solo tenemos para fines de visualización, tenemos algunas opciones, así que decimos, ¿estamos cargando actualmente el mensaje de visualización? Un mensaje de carga, o ¿tenemos actualmente un error que diga que se ha producido un error? Podrías hacer un manejo de errores más robusto aquí, por supuesto, y deberías investigar como error.message y mostrar el error real que se devolvió. Para nosotros, simplemente diremos que se ha producido un error, cara triste. Si no tenemos publicaciones, entonces decimos no se encontraron publicaciones, o finalmente, si llegamos hasta aquí, entonces sabemos que no estamos cargando, no hay error y tenemos publicaciones, ¿verdad? Así que si llegamos hasta aquí, vamos a intentar renderizar nuestra lista de publicaciones y pasarlas allí. Bien. Así que con toda esa charla, guardaré esto y esperaré lo mejor. Hooray. Creo que está funcionando. Bien. Así que cuando esta página se carga por primera vez, así es como se ve ahora con nuestra página de búsqueda funcional. Así que cuando esta página se carga por primera vez, ves que obtenemos una carga momentánea. Y luego aparecen los resultados. Podrías hacer algunas cosas allí. Podrías obtener la lista predeterminada de antemano en el servidor y mostrar eso hasta que el usuario realice su primera consulta y luego cambiarlo por los resultados o algo así para evitar esa carga momentánea o simplemente no mostrar ningún resultado hasta que realicen una búsqueda, ¿verdad? Podrías hacer eso de varias formas diferentes. Pero lo tenemos configurado ahora mismo. Tan pronto como se monta el componente, obtiene las publicaciones usando el término de búsqueda actual, que en nuestro caso es una cadena vacía, ¿verdad? Así que simplemente busca todas las publicaciones. Aquí están los resultados, así que intentemos actualizar esto ahora. Si escribo, si escribo la palabra React, buscar carga, y ahí está, obtengo los resultados para React. Eso es genial. Si escribo mi cadena sin sentido de nuevo, ya sabes, algo así, buscar, no se encontraron publicaciones como se esperaba así. Esto es genial. Ahora tenemos nuestra página de búsqueda funcional. Bien, así que me detendré aquí y revisaré el chat. Ver cómo lo estamos haciendo. Oh, Patricia, sí, absolutamente. Lamento que hayas tenido que esperar tanto para esto.

¿Dijiste que podría mostrar el code una vez más para la respuesta? ¿Eso fue para nuestro componente de búsqueda o el... Probablemente no, ¿verdad? Eso habría sido el anterior, la página de categoría. ¿Fue esta? Sí, lo siento por eso. Si pasé por eso un poco rápido. Genial, lo tienes, gracias. Sí, me detendré en este punto para recordar al grupo. Si en algún momento sientes que te quedaste atrás o no escribiste algo lo suficientemente rápido u cualquier otra cosa, tenemos estos puntos de control, ¿verdad? Así que en este punto, acabamos de terminar la página de búsqueda. Entonces, si quieres ponerte al día con nosotros en este punto, solo tienes que escribir Git checkout con este hash de confirmación justo aquí para actualizar tu base de código hasta el punto actual. Y luego, si algo no funciona correctamente después de eso, simplemente presiona Control-C para detener tu aplicación de Next.js y luego npm run dev, volver a ejecutarla y luego deberías estar listo para continuar junto con el resto del grupo en ese punto. Muy bien, tenemos una página de búsqueda funcional, así que ahora sabes cómo se ve ejecutar consultas desde el cliente, lo cual es genial. Sí, incluso podemos ver eso, solo para emocionarnos por un minuto en nuestra página de búsqueda aquí. Sabes, incluso puedes ir a la red y puedes mostrar todo o decirle que lo filtre por solicitudes de recuperación y puedes ver cada una de estas solicitudes de GraphQL. Entonces, nuevamente, si escribo, prueba o react búsqueda. Oh, ¿sabes por qué? Entonces, esta es en realidad una buena lección. No vi una solicitud de red. ¿Quién sabe por qué? ¿Alguien puede decírmelo en el chat? Por alguna razón, no tuve que enviar una solicitud al servidor. Sí, exactamente. Sí, veo que la gente dice, caché. Eso es exactamente correcto. Así que tengo las Apollo DevTools instaladas aquí. Entonces, si voy a Apollo y luego busco publicaciones, puedes ver, aquí está la consulta. Y si voy a datos de caché, puedes ver lo que Apollo ha almacenado en caché. Sí, aquí está. Entonces, Apollo ha almacenado en caché los datos para esta consulta y ya está en la caché de memoria. Entonces, cuando escribí react y presioné buscar, simplemente verificó su caché y vio, oh, tengo estos siete nodos de publicación aquí ya en mi caché de veces anteriores, de veces en que esta misma consulta se ejecutó anteriormente. Voy a devolverlos de inmediato. Por eso no hubo ningún cargador en absoluto y apareció de inmediato y tampoco hubo ninguna solicitud de red en absoluto al backend para esa. Así que eso fue genial. ¿Qué pasa si hago algo que no hemos buscado? ¿Qué pasa si escribo ver o algo así, buscar? Ahora ves que hay una solicitud de GraphQL real. Es bastante interesante, puedes ver cómo se ve. Y luego aquí está el encabezado que se envió. Entonces aquí está la carga útil que se envió. Es interesante, puedes ver el nombre de la operación, la consulta, que es toda esa cadena que proporcionamos y luego las variables, que eran las variables que pasamos. Y luego puedes ver la respuesta que vuelve y ver que es data, nodos de publicaciones. Está en la misma forma nuevamente que definimos cuando escribimos la consulta. Está en esa misma forma aquí cuando vuelve. Sí, es bastante interesante. Entonces, si eres alguien que quiere trabajar con esta pila, es posible que desees consultar las Apollo Dev Tools. A veces pueden ser útiles para ver qué hay actualmente en la caché. E incluso puedes componer y ejecutar consultas sobre la marcha aquí para probar rápidamente cosas o lo que sea. Así que eso puede ser bastante útil. Además de prestar atención a las solicitudes de red aquí. Si estás haciendo algo del lado del cliente como esto, puedes ver cuándo se envían las solicitudes y cómo se ven esas cargas útiles cuando se envían. Cosas divertidas, muy bien, vuelvo a mirar el chat nuevamente. Veamos. Entonces, Víctor, ¿podemos consultar datos a través de GQL de la misma manera para complementos en WordPress? Sí, absolutamente puedes. Si están en el esquema de GraphQL, ese sería el detalle ahí. Entonces, si vas a wpgraphql.com y luego haces clic en extensiones aquí, dice que WPGraphQL se puede ampliar para integrarse con otros complementos de WordPress. Aquí hay una lista de extensiones de WPGraphQL. Muchos de estos complementos son mantenidos por contribuyentes de la comunidad. Aquí puedes ver algunos populares. Entonces, alguien mencionó campos personalizados avanzados, ¿verdad? Uno de los complementos más populares en todo el espacio de WordPress, que en realidad, anunciaron ayer, fue adquirido por mi empresa, WP Engine, acaba de comprar campos personalizados avanzados, así como varios otros complementos que Delicious Brains había estado manteniendo. Pero de todos modos, aquí hay una extensión WPGraphQL 4 para campos personalizados avanzados. Entonces, lo que necesitas hacer es instalar dos cosas. WPGraphQL en sí mismo y luego esta extensión, siempre y cuando hagas ambas cosas y las tengas activadas, luego proporciona algunas características nuevas en la UI para ACF donde puedes definir un grupo de campos, ya sabes, con todos tus campos en él, y hay una casilla de verificación en la parte inferior que dice, exponer en GraphQL. Entonces, si marcas eso, ya sabes, y luego guardas tu grupo de campos, en ese momento agrega, ya sabes, esta extensión agrega todos los campos de ACF al esquema de GraphQL. Entonces, cuando estás en GraphiQL como esto y estás, ya sabes, tratando de consultar los datos sobre publicaciones, solo verías todos los campos de ACF, los verías, ya sabes, estarían allí a tu disposición. Sí. Entonces, eso está ahí para ACF y varias otras cosas. Hay Ninja Forms, WooCommerce, Gravity Forms, ya sabes, varias otras cosas. Así que puedes consultar esa lista si es útil. Sí, de nada. Veamos. Sí. Yoast SEO, ese es otro. Yoast se usa en casi todos los sitios de WordPress, ¿verdad? Si estás en el espacio de WordPress, sabes lo frecuente que es. Sí. Ash Hitchcock, que es muy activo, construye muchos sitios de Gatsby para sus clientes, lo sé. Construyó una extensión de Yoast SEO para WPGraphQL que muchas personas usan. Entonces, Yoast también está en la lista. Sí. Veamos, Stefan, estás preguntando, ¿cuánto tiempo se mantiene data en la caché? ¿Hay alguna forma de borrar la caché desde el backend cuando hacemos un cambio en el CMS? Sí. Excelente pregunta. Apollo Client te permite definir políticas de caché. Sí. Entonces, te brinda todo tipo de opciones. Puedes personalizar cómo quieres hacer el almacenamiento en caché. Sí. Podemos pasar un minuto revisando esto si queremos. Personalizando IDs. Estoy tratando de recordar dónde está la página. Veamos. Política de caché de Apollo Client, creo que el nombre de algunas de ellas es como Network, creo que el nombre de otra es Caché primero. Política de recuperación, ahí vamos. Lo llamaba política de caché, en realidad se llama Política de recuperación. Sí, veamos, Políticas de recuperación admitidas. Ok, aquí vamos. Sí, lo que puedes hacer en tu aplicación de JavaScript si estás trabajando con Apollo Client, es definir qué política de recuperación quieres usar, por lo que puedes hacer Caché primero, que le dice a Apollo que consulte primero la caché y luego recurra a la red, Solo caché, que es la única que siempre usas, Caché y red, solo red.

Entonces, si haces esto, y básicamente le dices a Apollo que nunca almacene en caché nada con los datos más recientes, ya sabes, no lo almacenes en caché en absoluto. Puedes hacer eso, sin caché, o en espera. Hay algunas opciones diferentes allí. Así es como puedes tener cierto control sobre, ya sabes, qué está en caché, y así sucesivamente, y durante cuánto tiempo. Hay algunas opciones para eso. Más allá de eso, sin embargo, estás preguntando sobre la invalidación de caché, ¿verdad? Es como, bueno, si algunos datos han cambiado, ¿cómo puedo borrar la caché, ya sabes, y decirle a Apollo que los vuelva a buscar? Y también puedes hacer eso. Entonces sería como cuando haces una mutación. Veamos si podemos encontrar la documentación rápidamente. Veamos. Sí, aquí vamos. Entonces, volver a buscar consultas o volver a buscar después de una actualización. Sí, puedes hacer esto si tienes una mutación que estás haciendo en tu aplicación de JavaScript amiga donde el usuario está agregando una tarea en este caso o haciendo alguna actualización en los datos. Puedes decirle a Apollo client, después de que se ejecute esta mutación, ya sabes, ejecuta esta función de devolución de llamada. Le das una función de devolución de llamada y dices, que quieres, ya sabes, volver a buscar cierta cosa. Obtienes una cierta consulta y dices después de esta mutación, se ejecuta, agregaste una tarea, y vuelve a buscar esta consulta aquí, que es la responsable de obtener la lista de tareas, ¿verdad? Entonces, si haces eso, entonces sabe, está bien, volveré a buscar esa lista. Y luego react volverá a renderizar la lista de tareas para mostrar, ya sabes, la lista actualizada, que incluye la nueva que acaban de agregar. Y luego puedes decir, está bien, tengo mi consulta. Sé que la ejecutaré nuevamente. Y luego sigo adelante y volveré a renderizar la lista que acaban de agregar a la lista. Entonces, puedes hacer cosas como esas. Si es el propio usuario, como haciendo mutaciones, puedes decirle a Apollo client que borre parte de la caché o vuelva a buscar parte de la caché para que obtenga los nuevos datos allí. En cuanto a cualquier otra caché de solo datos del servidor, eso se puede controlar con las políticas de búsqueda. Entonces, si quieres buscar solo políticas de búsqueda y ver eso, esa página que habíamos visto, así es como lo controlarías. Muy bien, creo que estamos bien entonces. ¿Cómo estamos de tiempo? Podemos adentrarnos en nuestros fragmentos si todavía tenemos tiempo. Creo que nos quedan 30 minutos. Sí, de nada Stefan, espero que haya sido útil. Sus documentos son realmente muy buenos. Encontré los documentos de Apollo. Si ves que me adentro en ellos, generalmente puedes encontrar tu respuesta. Muy bien, entonces en este punto podríamos adentrarnos en algunas cosas de fragmentos, a menos que vea en el chat que el grupo quiere ir a otros temas en los que estoy feliz de usarlo. Tengo un tema interesante. Bien, ¿qué sucede cuando WordPress está inactivo? Esta es una pregunta interesante. Sí, si estás haciendo esta arquitectura desacoplada que se ve así, ¿verdad? Es una buena pregunta. Como, bueno, ¿qué sucede si Next.js intenta usar esta capa de API para comunicarse con WordPress y obtener datos. WordPress está inactivo, ¿verdad? El servidor no está ahí. Entonces esto se puede manejar de varias formas. Una forma es en Next.js, si estás usando su función de regeneración estática incremental para regenerar tus páginas en un intervalo de tiempo, si no puede regenerar la página, simplemente seguirá sirviendo la página obsoleta, lo cual es una característica realmente genial. Entonces puedes decirle a Next.js, y si no estás familiarizado, si simplemente buscas la regeneración estática incremental de Next.js. Si buscas eso, si no estás familiarizado te explicará qué es eso. Pero básicamente le dices a Next.js, quiero que esto sea una página estática, pero solo debe durar un cierto tiempo, puedes especificar y decir, regenerar cada 10 minutos, cada hora, una vez al día, lo que quieras. En ese intervalo, Next.js seguirá, sigue un modelo de obsoleto mientras se valida, donde si llega una solicitud y se da cuenta de que la página ya no es válida, ya sabes que ha pasado ese tiempo. Seguirá sirviendo esa página obsoleta a ese último usuario. Pero luego en segundo plano, iniciará el proceso para volver a buscar los datos y regenerar esa página. Tan pronto como esté disponible la nueva versión de la página, reemplaza la nueva por la antigua. Entonces, cualquier visitante nuevo que llegue al sitio obtendría esa nueva versión de la página en caché. Entonces para ellos, sigue siendo una respuesta muy rápida, ya sabes, como si fuera una página estática, pero puedes agregar algo de dinamismo y actualizar en intervalos utilizando esta función. Pero de todos modos, si estás haciendo ese tipo de cosas, Next.js no reemplazará la página en caché por la nueva si no puede realizar ninguna de las recuperaciones de datos. Entonces esa sería una solución a esto. Entonces, si WordPress está inactivo y Next.js está intentando, ya sabes, comunicarse con WordPress y regenerar la página de una publicación o lo que sea, y no puede hacerlo, está bien. Seguirá sirviendo la página obsoleta hasta, ya sabes, en un momento posterior cuando WordPress vuelva a estar en línea y lo intente nuevamente en ese momento, simplemente, ya sabes, volverá a regenerar las páginas. Entonces esa es una solución realmente genial y robusta donde puedes hacer que tu aplicación de front-end simplemente vuelva a las páginas en caché, ya sabes, cuando tus fuentes de datos en nuestro caso, WordPress, están inactivas. Entonces esa es una solución genial. No maneja todos los casos, por supuesto, como nuestra página de búsqueda, ¿verdad? Si alguien va a la página de búsqueda e intenta realizar una búsqueda y WordPress está inactivo en ese momento, entonces, por supuesto, no podemos, ya sabes, no podemos hacer mucho al respecto porque necesitamos los datos reales, ya sabes, de WordPress. Entonces lo mejor que puedes hacer allí es simplemente, ya sabes, fallar de manera elegante, ¿verdad? Como en nuestra página de búsqueda, simplemente tenemos, si ocurre un error, en nuestro caso, Apollo llamaría a esto un error de red, como si intentara enviar la solicitud a la API del backend, y obtuviera, ya sabes, un error 500 o si estaba fuera de línea o cualquier otra cosa. Entonces simplemente te recuperas, ya sabes, y fallas de manera elegante y dices, lo siento, no se pueden realizar búsquedas en este momento o lo que sea y simplemente muestra un mensaje así. Sí, definitivamente es una preocupación real si WordPress está inactivo, pero, sí, hacer la representación estática de las páginas a veces realmente te salva de que sea un problema. Sí, buena pregunta ahí. De acuerdo. Podemos adentrarnos en algunas consultas o en algunas cosas de fragmentos por un rato entonces. Los fragmentos de GraphQL son realmente geniales. Permíteme mostrarte qué son a grandes rasgos. Entonces, digamos que, así que teníamos esta consulta de búsqueda de publicaciones que habíamos compuesto, ¿verdad, así como eso? Lo que podemos hacer con los fragmentos es dividir un poco esto y definirlo en otros lugares. Permíteme mostrarte a qué me refiero. Entonces, si puedo escribir fragmento y le daremos un nombre. Esto será, así que el fragmento de la imagen destacada. Probablemente vaya a equivocarme en la sintaxis de esto. Quiero asegurarme. Obtener mi hoja de trucos para poder ver mi propia aplicación en la sintaxis aquí. Mira la lista de publicaciones, oh sí. Tuve que refrescarme en la sintaxis. Entonces, la imagen destacada es un fragmento donde vamos a definir, y en realidad, vamos a hacer uno diferente que realmente usaremos en nuestra aplicación. Entonces, esta especie de ficticio que iba a hacer en la página de búsqueda, vamos a sumergirnos en eso y comenzaremos con los reales en la página del blog, ¿qué tal? Muy bien, esta es la que tenemos las primeras 18 publicaciones y las mostramos en una cuadrícula, ¿verdad? Esta, digamos que estos nodos aquí, no queremos que estos datos vivan aquí porque en realidad, si miras este componente, ¿cuánto de esos datos le importa? Ninguno, ¿verdad? Simplemente obtiene las publicaciones y las envía directamente al componente de la lista de publicaciones. Este componente en realidad no le importa todos los campos que estamos definiendo aquí. La única razón por la que los estamos poniendo en este archivo es porque necesitamos esos datos eventualmente aguas abajo para el componente de la lista de publicaciones. Entonces, un patrón realmente poderoso es colocar las necesidades de datos de tus componentes junto con el propio componente. Entonces, lo que podrías hacer es crear algunos fragmentos para que estos datos vivan y se definan tal vez con este componente de la lista de publicaciones, si es el que se preocupa por esos datos o de lo contrario con este componente de la tarjeta de publicación. Dado que es el que se preocupa por algunos de esos datos, ¿por qué no definir un fragmento en el mismo archivo donde definimos los campos que necesitamos y luego inmediatamente debajo de él, dentro del componente, seguir adelante y destruirlo y usar esos mismos campos. Como, ¿no sería eso más agradable, una base de código más organizada para nosotros, ¿verdad? Y eso es lo que te permiten hacer los fragmentos. Entonces podemos hacer eso, como con la página del blog y luego la lista de publicaciones y luego la tarjeta de publicación. Así que comenzaré con la tarjeta de publicación ya que es la más detallada, supongo. Eso es como, no se muestra nada más. Solo se muestra por la lista de publicaciones, que a su vez se muestra por los blogs.

Comencemos con la tarjeta de publicación. Te mostraré a qué me refiero creando estos fragmentos. Esto es lo que harías, como arriba de esta cosa, harías, así que exportaremos una constante desde este archivo. Haremos export const y cualquiera de ustedes que quiera probar los fragmentos, pueden escribir esto junto conmigo, lo trabajaremos juntos. Es como, tenemos las otras páginas. Así que hago export const y luego en mayúsculas, haremos campos de tarjeta de publicación así GQL. Nuestra canción y baile habitual así. En lugar de definir una consulta aquí dentro, ahora, sin embargo, vamos a definir un fragmento. Así que vamos a escribir fragmento campos de tarjeta de publicación así en publicación. Esto es, la especificación de GraphQL dice que si quieres definir fragmentos, debes decirle a GraphQL en qué tipo está. Así que estamos diciendo que hay este tipo en el esquema de GraphQL llamado publicación y los campos que vamos a definir son los campos que nos gustaría obtener en ese tipo, si tiene sentido. Si no estás seguro de qué son estos tipos, puedes verlos en la documentación aquí mismo. Así que si hago una consulta para obtener publicaciones y obtener los nodos y luego para cada uno de ellos, obtengo el título o algo así. Digamos que esta es la consulta que he compuesto aquí y te preguntas, qué tipos de GraphQL están detrás de esto aquí? Si, haces clic en publicación, eso abrirá la documentación aquí mismo o nodos, puedes ver que nodos es una matriz de este tipo publicación, con P mayúscula, en el esquema de GraphQL. Y si haces clic en eso, entonces eso a su vez te diría, bien, el tipo publicación, aquí están todos los datos dentro de él, autor, categoría, blah, blah. Así es de donde viene esto. Estamos diciendo en este tipo publicación con P mayúscula en el esquema de GraphQL, vamos a definir un fragmento con algunos campos para los datos que nos interesan. Así es de donde viene esto. Nuestro fragmento se llama así, está en el tipo publicación. Ahora abre unas llaves o abre las llaves dentro de esto. Necesitamos preguntarnos, como, ¿qué le importa realmente a este componente? ¿Cuáles son sus necesidades de datos, verdad? Puedes ver que necesita el título. Así que escribamos eso. Necesita el extracto, escribámoslo. Necesita URI, bien. Y también necesita la imagen destacada. Y ese es el que, recuerda que necesitamos una subselección. Así que haremos llaves. Y luego las llaves del nodo, y en eso, la URL de origen y el texto alternativo. Bien, ahora que hemos definido este fragmento, vemos lo bien organizado que está esto. Es como, aquí están las necesidades de datos de este componente. Le importa el título, el extracto, la URI y la imagen destacada. Y luego aquí está el componente, título, extracto, URI, destacado, imagen destacada. Simplemente toma y utiliza todos los mismos datos que se definen arriba, lo que hace que las cosas estén bien organizadas. Así que estamos exportando esto desde este archivo, pero no lo estamos usando en ningún lugar. Así que debemos seguir adelante y hacer eso. Así que campos de tarjeta de publicación, título, extracto, URI. Así que podríamos hacer eso aquí. Sí, te lo mostraré primero. Así que aquí están. Bien, si volvemos aquí a blog, título, extracto, URI, imagen destacada, este componente en este archivo en realidad no le importa ninguno de estos datos. Así que podríamos eliminar todas estas cosas y obtenerlas del fragmento en su lugar. Así que déjame mostrarte cómo se ve eso. Así sería la importación, déjame tomar el nombre de eso, importar campos de tarjeta de publicación. Así que no escribas esto, porque en realidad no dejaremos este fragmento aquí. Solo estoy haciendo esto con fines de demostración. Así que solo espera un momento antes de escribirlo si estás siguiendo junto conmigo. Así que si importo ese fragmento de campos de tarjeta de publicación, así, espera, solo tomará un minuto. ¿Dónde estaba eso? Bien, ahora hemos importado nuestro fragmento. Así que necesitamos insertar esto dentro de esta plantilla de etiqueta literal. Y podemos hacer eso simplemente pegándolo al final. Así que si presionas Enter y luego usas esta sintaxis, esto y JavaScript, esto le dice a JavaScript que interpole algunos datos aquí dentro de esta cadena. Así que abriré eso para interpolar algunos datos, y luego pegaremos el nombre de nuestro fragmento aquí. Así que lo importamos y luego lo interpolamos aquí. Ahora seguimos adelante y lo usamos dentro de esta consulta. Así que en lugar de obtener para cada uno de nuestros nodos, en lugar de obtener solo el ID de la base de datos, ahora podemos usar nuestro fragmento que hemos nombrado. Así que la sintaxis para eso es tres puntos y luego el nombre del fragmento. Así que tres puntos, tres puntos, tres puntos. Y luego podemos tomar los nombres, lo llamamos campos de tarjeta de publicación. Así que copiaré eso. Y aquí, campos de tarjeta de publicación. Esto le dice a GraphQL que, como, expanda o inyecte los campos que hemos definido en ese fragmento en este punto de la consulta, ¿verdad? Así que guardaré eso. Espero haberlo hecho todo bien. Veamos. Blog, creo que sí. Intentemos hacerlo sin. Así que eliminaré esto por completo y luego debería romperse. Sí, ahí lo tienes. El fragmento campos de tarjeta de publicación no se usa nunca. Además, no tiene ningún, los datos que necesita no están ahí. Pero si sigo adelante y uso nuestro fragmento y expando esos campos o los inyecto en este punto de la consulta y guardo eso ahora, funciona, ¿verdad? Así que esto es bueno para la organización. Como dije, los requisitos de datos de tus componentes se pueden colocar en el mismo archivo para que sean fáciles de gestionar. Así que si en el futuro, si alguna vez haces cambios en esta tarjeta de publicación y te das cuenta de que, oh, ya sabes, necesito otra pieza adicional de datos en la publicación, entonces simplemente puedes ir arriba aquí y agregar cualquier campo adicional o hacer los cambios aquí. Y luego tu componente, sigue adelante y los utiliza de inmediato sin tener que salir nunca de este archivo, lo cual es realmente bueno. Muy bien. Dije que esperaras antes de escribir esto. Y la razón de eso es que hemos omitido un nivel. Tenemos listas de publicaciones aquí que creo que vamos a usar. Déjame ver mi producto terminado. Sí. Así que si quieres ser técnico, podríamos ir aún más lejos con esto. Porque ahora mismo estamos diciendo que para cada uno de los nodos de la publicación, necesitamos el ID de la base de datos, pero luego si miras más abajo, este componente tampoco le importa el ID de la base de datos. Solo le importa la colección de publicaciones realmente es todo lo que le importa. Porque simplemente lo va a pasar. ¿Sabes? Así que incluso este ID de la base de datos, a este componente no le importa. Así que si quieres continuar con este patrón de dividir las cosas en fragmentos, podemos hacer eso también para la lista de publicaciones. Así que hagamos esto. Voy a eliminar algunas de estas cosas. Así que ya no uses este fragmento en este campo en absoluto. Solo lo dejaré en este estado por ahora. Así que ahora continúa si estás escribiendo junto conmigo, continúa en este punto.

Muy bien. Así que definimos nuestro fragmento aquí y realmente la tarjeta de publicación, se renderiza en este punto dentro de la lista de publicaciones. Aquí es donde necesitaríamos, podemos poner el fragmento para la tarjeta de publicación dentro de otro componente, que es este para la lista de publicaciones. Creemos uno para este archivo también. Así que escribe eso, así que si estás siguiendo, escribe esto conmigo, así que exporta Const. Esto será campos de lista de publicaciones, así, igual a GQL. Muy bien, presiona Enter un par de veces, ábrelo, y este será otro fragmento que estamos definiendo. Así que fragmento, ahí vamos, fragmento, campos de lista de publicaciones. Ahí tienes con en publicación, ¿verdad? Entonces, si defines el tipo como hablamos, abre algunas llaves y realmente todo este componente se preocupa solo por el ID de la base de datos porque lo usa como la clave prop, ¿verdad? Entonces, eso lo podemos definir aquí, un ID de la base de datos. Sin embargo, todo lo demás, simplemente se pasa a la tarjeta de publicación. Así que aquí es donde podemos hacer esta cosa donde importamos los campos de la tarjeta de publicación desde este componente adyacente aquí desde la tarjeta de publicación. Entonces, si escribes eso, importa los campos de la tarjeta de publicación desde la tarjeta de publicación, tomaremos este fragmento e interpolaremos dentro de este fragmento aquí. Presionaré Enter y lo haremos con esta sintaxis de dólar para interpolar algunos datos. Lo pegaré aquí. Ahora podemos realmente utilizar este fragmento dentro de este otro fragmento dentro de la tarjeta de publicación, solo tomaré su nombre, ¿verdad? Y luego recuerda la sintaxis para esto es solo los tres puntos. Así que diré dentro de este otro fragmento, justo al lado de donde está el ID de la base de datos, voy a hacer punto, punto, punto campos de la tarjeta de publicación, ¿verdad? Muy bien, y ahora estos campos de la tarjeta de publicación, a su vez podemos exportarlos y finalmente usarlos en la página del blog. Así que veamos cómo podemos hacer eso. Entonces, de vuelta en la página del blog, ahora, podemos hacer, déjame revisar el chat, okay, creo que lo estamos haciendo bien. Avísame si tienes alguna pregunta mientras avanzas con esto de los fragmentos. Así que dentro de la página del blog ahora, podemos importar los campos de la lista de publicaciones desde la lista de publicaciones. Y podemos ponerlo en esta línea aquí. Ya estamos importando este componente desde ese archivo. Así que ahora solo queremos importar algo más. Podemos poner una coma, leer la coma y luego las llaves. Y lo otro que queremos de ese archivo es esta constante que hemos definido aquí, ¿verdad? Entonces eso es lo que también estamos importando de la lista de publicaciones. Y esto, como vimos antes, vamos a presionar Enter e interpolaremos para que tengamos acceso a él dentro de obtener publicaciones. Y ahora, como vimos antes, ni siquiera necesitamos el ID de la base de datos en este punto. Todo lo que necesitamos es el fragmento de campos de la lista de publicaciones. Así que copiaré el nombre de este fragmento y luego punto, punto, punto campos de la lista de publicaciones. Muy bien, guardaré eso. Guardaré eso. Y la tarjeta de publicación ya está guardada así que veamos si funciona. Sí, todo sigue funcionando. Así que espero que veas el flujo aquí. Así que empezando desde el nivel más alto como el blog, estamos diciendo aquí están los requisitos de datos de este componente. Realmente lo único que le importa es la colección de publicaciones, ¿verdad? Así que si lo miras, sabes la consulta que definimos aquí, solo dice que quiero una colección de publicaciones. En cuanto a lo que cada uno de los nodos tiene, simplemente lo está diferiendo, está diciendo cualquier campo de la lista de publicaciones que ese componente dice que necesita, eso es lo que deberías obtener de GraphQL, ¿verdad? Está diferiendo esa toma de decisiones a este componente de campos de lista de publicaciones. Así que si vamos allí y decimos, está bien, campos de lista de publicaciones, ¿qué necesitas ahora? ¿Cuáles son tus requisitos de datos? Nos dice que le importa este ID de la base de datos, ese es el campo específico que necesito para renderizar mis datos. En cuanto a cualquier otro campo en esto, estoy diferiendo esa toma de decisiones. Ve a la tarjeta de publicación, ya sabes, y mira los campos que necesita. Estoy diferiendo cualquier otra toma de decisiones a la tarjeta de publicación. Y luego dices, está bien, hagámoslo, vayamos a la tarjeta de publicación. Componente de tarjeta de publicación, ¿qué necesitas? ¿Cuáles son tus requisitos de datos, ¿verdad? Y nos dice que necesita estos campos específicos en el objeto de publicación para satisfacer sus necesidades de datos, ¿verdad? Entonces simplemente puedes tomar todos estos y seguir adelante y renderizarlos dentro del componente. Así que espero que pienses que este patrón es genial y poderoso. Te permite, como dije varias veces, colocar las necesidades de datos de tu componente junto con el componente en sí. Y hace que las cosas sean realmente fáciles de gestionar. He descubierto que, a medida que tu base de código se mueve y cambia y crece, es como, siempre y cuando tengas un fragmento aquí con las necesidades de datos y eso se mapee al componente en sí, entonces es bastante fácil mantener estos dos sincronizados en comparación con si tuvieras estas necesidades de datos definidas, ya sabes, varios componentes en el árbol de componentes que están definidos en algún otro lugar lejano, o lo que sea. Esto hace que esté cerca de la fuente de donde realmente se usan. Muy bien, eso es todo para los componentes o el tema de los fragmentos. Creo que si revisas este último, el último chequeo aquí, si revisas los fragmentos, los usa en todas partes. No solo para la página del blog, sino también para la página individual aquí, rompe algunas de las cosas que la página de publicación individual descompone en fragmentos y luego los compone también, tal vez también la página de categoría. Entonces sí, si quieres ver, me detendré ahí con un ejemplo que hicimos con la página del blog, cómo definir fragmentos y componerlos juntos. Pero si quieres ver algunos otros ejemplos, como puedes ver este compromiso aquí desde nuestro punto de control para ver el, y eso sería como la aplicación final en ese punto. Sí, así que creo que casi se acaba el tiempo. Nos quedan un par de minutos. Me encantaría escuchar algunas preguntas, sin embargo. Como mencioné, trabajo en una empresa específica de WordPress, WP Engine, y hago cosas de WordPress sin cabeza todo el día. Así que he pensado en estas cosas y he estado, mi equipo produce todo tipo de recursos en este sitio de desarrolladores si quieres ver alguno de nuestros contenidos. Este es mi mundo donde vivo. Así que, por eso me inscribí en este tema en particular en la Cumbre de React. Entonces, Victor dice, ¿qué CMS prefieres? Sí, esa es una gran pregunta. Personalmente, he pasado mucho, mucho tiempo en el espacio de WordPress, y lo conozco muy bien. Nunca he lanzado otro proyecto de producción utilizando otro CMS. Realmente me gustan algunos de los CMS sin cabeza modernos que están apareciendo, creo que son interesantes. Como Contentful, Sanity y Prismic y algunos de esos. Creo que son interesantes y tienen algunas formas modernas interesantes de hacer el modelado de contenido y luego obtener los datos en el formato que necesitarías para renderizar componentes de React y cosas así. Está construido con una mentalidad de front-end desacoplada desde el principio. Creo que eso es bastante interesante, bastante poderoso. Así que ciertamente me gusta lo que están haciendo muchos de los CMS. La única desventaja con ellos, sin embargo, es que todos son propietarios. Una excepción sería Strapi. Strapi es uno de código abierto, como el basado en JavaScript que podrías revisar. S-T-R-A-P-I. Aún no he revisado Strapi pero me gusta el hecho de que sea de código abierto y las licencias gratuitas o lo que sea es genial. Así que ese sería uno para revisar pero todos los demás que mencioné, Contentful, Prismic, Sandy, todos son propietarios lo que me pone un poco nervioso. Es como si construyera un sitio para mi cliente o lo que sea, algún negocio, si construyo un sitio utilizando el CMS y luego deciden cuadruplicar sus precios o cambiar su licencia para que partes de ella no sean accesibles, como pueden hacerlo en cualquier momento. Así que me gusta que WordPress sea gratuito y de código abierto donde si construyes algo sobre headless WordPress, siempre es gratuito y de código abierto y no tienes que preocuparte por la compañía detrás de él triplicando sus precios o cambios de licencia o lo que sea, como dije. Así que me gusta esa parte de ello, pero Strapi, como dije, también podría tener algunas de esas mismas ventajas. Así que WordPress, la otra cosa de ello es que es tan robusto en este punto y tantos equipos de marketing y personas como esa realmente lo aman por su interfaz de edición y la experiencia que brinda a los creadores de contenido. Entonces, si haces headless WordPress, te permite seguir dando a esas personas su CMS preferido con el que les encanta trabajar, pero también divertirte como desarrollador en el front-end y construir aplicaciones basadas en componentes utilizando tecnologías como React y Svelte. Entonces, sí, no puedo hablar profundamente sobre las comparaciones, pero sí, admiro algunas de las cosas que otros CMS están haciendo, pero la mayor parte de mi experiencia está en el mundo de WordPress en este momento. Nikhil o Nikhail dice, ''¿Has utilizado Next.js como generador de sitios estáticos? ''¿Tiene sentido obtener los datos ''de la API de WordPress mientras se construye el sitio estático ''y tener un CMS sin cabeza? Tal vez ni siquiera en la web, solo un WordPress sin cabeza local y SSG Next.js, solo preguntando.'' Sí, ciertamente podrías hacer eso. Sí, te refieres a usar Next.js como opción para generar un sitio completamente estático, ¿verdad, donde todas las páginas de tu sitio terminan siendo archivos HTML que podrías distribuir a través de un CMS, o un CDN más bien, y es, ya sabes, sitios completamente estáticos pre-renderizados. Sí, podrías hacer eso si no tienes nada dinámico en tu sitio de WordPress, ya sabes, si no tienes un sistema de comentarios o formularios de contacto, ya sabes, u otros tipos de formularios que los usuarios necesitarían completar e interactuar con ellos, donde podrías necesitar un servidor para intervenir, ya sabes, para hacer eso. Si no tienes nada de eso y tu sitio es solo contenido estático, como destinado para el consumo, entonces sí, eso podría ser una buena, podría ser una buena opción. Y como decías, incluso te refieres a ejecutar el sitio de WordPress localmente, ya sabes, Next JS, cuando ejecuta una compilación, simplemente puedes acceder a tu sitio de WordPress local, ya sabes, para construir todas las páginas y luego implementar esas páginas estáticas en la web y WordPress en sí ni siquiera necesitaría estar en línea. Y tienes razón, ciertamente podrías hacer eso. Sí, ya sabes, probablemente no querrías hacerlo para algún cliente de producción, ya sabes, tener el sitio de WordPress viviendo en la máquina de una persona o lo que sea, como probablemente no sería la mejor idea allí, ya sabes, querría alojarlo en algún lugar con algún host de WordPress. Pero sí, si es un proyecto personal y es para tu propio sitio y dices tengo copias de seguridad en mi computadora. Entonces, ese database de WordPress, ya sabes, sé que ya está respaldado y no me preocupo de que desaparezca, entonces sí, ciertamente podrías hacer eso. Eso sería genial.