y aquí dentro voy a agregar esa variable de entorno. Ahora, volviendo a las instrucciones, voy a copiar y pegar eso justo aquí, y a continuación, no queremos intentar consultar tuhost.com, queremos consultar nuestro punto final de
GraphQL de
WordPress, y ese punto final va a ser, por defecto, básicamente donde se haya instalado tu instancia de
WordPress seguido de /
GraphQL. Por ejemplo, si abro mi espaciojellydemo.wpengine.com/
GraphQL, podemos ver que aunque obtengo un error aquí, podemos ver que este es un punto final de
GraphQL funcional. Así que voy a tomar la misma URL y la voy a pegar en mi variable de entorno, donde ahora podemos ver que tenemos este punto final de
GraphQL de
WordPress configurado con mi URL real. Y ahora intentemos iniciar nuestro servidor de desarrollo ejecutando
yarn dev, y podemos ver que inmediatamente se va a iniciar un nuevo servidor apuntando a localhost puerto 3000. Y si intento abrir eso en mi navegador, podemos ver que
next.js comenzará a compilar esa página, donde básicamente, está descargando esa información para nosotros y va a construir esa página en tiempo real. Así que ahora podemos ver que tengo mi nueva publicación de blog, mi página de blog, es decir, mi sitio web de blog, y podemos ver que si comenzamos a desplazarnos hacia abajo aquí, tenemos todas esas publicaciones que vimos dentro de
WordPress, pero ahora las estamos obteniendo dentro de la aplicación dentro de nuestro navegador. Así que ahora podemos ver que tenemos cada uno de los títulos, y tenemos una descripción, e incluso tenemos un enlace para cada una de nuestras publicaciones, pero queremos agregar un poco más de contexto a esto. ¿Qué tal si queremos agregar el autor a cada una de estas publicaciones? Primero, vamos a sumergirnos en el código para ver cómo se está haciendo esto. Así que voy a volver a mi editor de código, y voy a ir particularmente a source pages index.js, que va a ser nuestra página de inicio, y si vemos aquí arriba, si ya estás familiarizado con
React, realmente no hay nada especial sucediendo aquí. Realmente tenemos nuestro componente de inicio que recibe dos props, y lo renderiza en la página. Pero lo que es especial es si nos desplazamos más allá de ese componente
React, tenemos esta función que estamos exportando llamada get static props, que es la forma de
Next.js de obtener datos que van a ser estáticos para nuestra aplicación en tiempo de compilación, donde podemos ver que estamos obteniendo nuestro cliente
Apollo, y estamos construyendo esta consulta de
GraphQL, donde estamos obteniendo algunas configuraciones generales para nuestro sitio web, pero también estamos obteniendo todas esas publicaciones, tal como vimos que hicimos antes en el Editor de
Graphql. Finalmente, una vez que tenemos esos datos, simplemente los vamos a limpiar un poco, y también vamos a construir la ruta en la que cada una de las publicaciones estará disponible, y luego simplemente los vamos a pasar como props, que nuevamente, si nos desplazamos hasta la parte superior de la página, podemos ver esas props de página y publicación que estamos pasando directamente al componente
React. Y luego en ese punto, es como cualquier otro componente
React, donde estamos obteniendo esas publicaciones, estamos iterando a través de ellas, y podemos renderizar cada una de ellas dentro del DOM, donde luego tenemos nuestro sitio de blog de demostración de Space Jelly. Así que ahora, como dije, queremos agregar ese autor. Primero voy a tomar esa consulta de
Graphql existente que vimos aquí, la que estamos usando activamente en este proyecto, y voy a pegarla en mi Editor de
Graphql aquí, voy a hacer clic en Printify aquí, solo para corregir la indentación, pero voy a hacer clic en Play, y podemos ver que estos son exactamente los datos que estamos obteniendo y pasando a la aplicación. Vemos que tenemos todas las publicaciones, incluso obtenemos el extracto aquí, pero también obtenemos ese título y descripción, que podemos ver en la parte superior que estamos mostrando. Así que ahora, aunque tenemos toda esta otra información para nuestras publicaciones, queremos agregar también el autor a eso. Así que vamos a encontrar esa sección de publicaciones, que está aquí, tenemos nuestras publicaciones, y para cada uno de esos bordes en el nodo, también queremos agregar el autor. Así que simplemente voy a comenzar a abrir ese autor, consultar el nodo para cada uno de esos autores, luego podemos ver que obtenemos todos los atributos del autor real en la publicación, o en este caso, probablemente queremos obtener el ID, ya que eso es algo que generalmente queremos tener para cada uno de nuestros nodos, pero luego queremos obtener también el nombre, que si hacemos clic en reproducir ahora, y comienzo a desplazarme hacia abajo en los datos recibidos, podemos ver que ahora vemos el autor para cada una de estas publicaciones, que en este caso particular, soy yo. Vemos a Colby Fayok aquí, pero pudimos ver lo fácil que fue pegar nuestra consulta existente, actualizarla, donde ahora, tan fácilmente como la pegamos, copiemos esto, y peguémoslo de nuevo en nuestra aplicación. Ahora vamos a corregir la indentación allí. Acabamos de actualizar la consulta dentro de nuestra aplicación, y para ver que esto está funcionando, voy a imprimir en la consola la prop de publicaciones real aquí, donde si vamos dentro de nuestro navegador, voy a actualizar la página, y lo escribí incorrectamente allí, así que en lugar de
console logs, solo hay uno de ellos, pero podemos ver cuando la página se recarga y se vuelve a compilar, tenemos esta matriz de
data, que son todas nuestras publicaciones, pero ahora tenemos esta propiedad de autor aquí, donde si comienzo a expandir todo, entonces podemos ver mi nombre, KolbyFayal. Así que ahora vamos a agregar esto a nuestra página, así que voy a bajar dentro de este componente
react, donde justo debajo del título, vamos a agregar una nueva etiqueta de párrafo, y vamos a decir adiós, y vamos a agregar nuestro nombre de usuario, voy a cerrar esta etiqueta de párrafo, pero vamos a especificar el post.author.node.name, y solo para mi cordura, el node.author.node.name. Así que vamos a ver si eso funciona. Así que ahora, si volvemos a cargar la página, y en realidad probablemente debería haberse recargado rápidamente, podemos ver que tengo Bye KolbyFayal allí. Y por supuesto, el espaciado probablemente no es el mejor, podemos solucionar el estilo más tarde, pero podemos ver lo fácil que fue actualizar nuestra consulta, simplemente agregar un poco de
data a eso actualizando esa consulta de
GraphQL y pudimos tenerlo disponible de inmediato en esa prop de publicación que acabamos de pasar directamente a la aplicación, y pudimos hacer eso porque ahora tenemos el poder de consultar esas relaciones complejas, incluso las categorías si queremos, utilizando
GraphQL y
WordPress. Muy bien, así que vamos a recapitular lo que logramos aquí. Primero tomamos una instancia existente de
WordPress, y instalamos WPGraphQL. Una vez que eso estuvo listo, pudimos ver lo fácil que fue
Comments