Masterclass de GraphQL en la Nube con Neo4j Aura, Next.js y Vercel

Rate this content
Bookmark

En este masterclass construiremos y desplegaremos una aplicación de GraphQL de pila completa utilizando Next.js, Neo4j y Vercel. Utilizando un grafo de conocimiento de artículos de noticias, primero construiremos una API de GraphQL utilizando las rutas de API de Next.js y la Biblioteca de GraphQL de Neo4j. A continuación, nos enfocaremos en el front-end, explorando cómo utilizar GraphQL para la obtención de datos con una aplicación de Next.js. Por último, exploraremos cómo agregar personalización y recomendación de contenido en nuestra API de GraphQL para servir artículos relevantes a nuestros usuarios, luego desplegaremos nuestra aplicación en la nube utilizando Vercel y Neo4j Aura.

Tabla de contenidos:
- Visión general de Next.js y cómo empezar con Next.js
- Rutas de API con Next.js y construcción de una API de GraphQL
- Utilizando la Biblioteca de GraphQL de Neo4j
- Trabajando con Apollo Client y obtención de datos de GraphQL en Next.js
- Despliegue con Vercel y Neo4j Aura

161 min
07 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El masterclass cubrió varios temas relacionados con la construcción de una aplicación de artículos de noticias de pila completa utilizando Neo4j AuraDB, GraphQL y Next.js. Se discutieron modelos de datos de grafo, recorrido de grafos y construcción de APIs de GraphQL respaldadas por Neo4j. Se destacó la Biblioteca de GraphQL de Neo4j por su capacidad para generar funciones de resolución y optimizar consultas de base de datos. El masterclass también cubrió Next.js y el despliegue de la aplicación en Vercel. Se agregó lógica personalizada a la API de GraphQL utilizando la directiva Cypher-GraphQL-Schema.

Available in English

1. Getting Started with Neo4j AuraDB

Short description:

En esta parte, comenzaremos con Neo4j AuraDB y construiremos una aplicación de noticias de pila completa utilizando GraphQL y Next.js. Cubriremos cómo manejar la obtención de datos con GraphQL en una aplicación de React y específicamente con Next.js. Comenzaremos en Neo4j Aura, importaremos algunos datos sobre artículos de noticias y usaremos el lenguaje de consulta Cypher para trabajar con los datos. Luego, construiremos APIs de GraphQL respaldadas por Neo4j utilizando la biblioteca Neo4j GraphQL. Finalmente, ejecutaremos nuestro servidor GraphQL en Next.js y desplegaremos la aplicación en Vercel.

Muy bien, empecemos. Sabes que este es un curso de JavaScript, por lo que ha estado presente durante más de cien años. Pero aquí, vamos a abordar algunos puntos que deberían ayudarte a entender por dónde debes comenzar. En primer lugar, se requiere mucho esfuerzo para escribir en el propio lenguaje. Vamos a hablar un poco sobre catálogos y entender eso bastante rápido aquí, pero antes de eso, hablemos sobre el lenguaje JavaScript.

Entonces, simplifiquémoslo, y aprendamos cosas sobre la tecnología de grafos. Aquí tienes un esquema aproximado para hoy. El objetivo de hoy es construir una aplicación de pila completa, incluyendo la construcción del servidor GraphQL, trabajar con la base de datos, construir una aplicación Next.js React que consulte nuestra API GraphQL, y luego desplegar eso en la nube con Versal. Utilizaremos Neo4j AuraDB, como dijimos, Neo4j es una base de datos de grafos, Neo4j Aura y AuraDB es como un Neo4j alojado en la nube, lo que nos permite crear instancias de Neo4j en la nube que son privadas para nosotros. Utilizaremos el nivel gratuito de Neo4j Aura, por lo que no necesitamos tener una tarjeta de crédito ni incurrir en ningún cargo ni nada por el estilo. Utilizaremos GitHub, por lo que debes tener una cuenta de GitHub. Y luego utilizaremos Vercell para desplegar nuestra aplicación. Vercell también tiene un nivel gratuito, por lo que solo necesitamos crear una cuenta en Vercell.

Entonces, comenzaremos hablando de Neo4j y comenzando con Neo4j AuraDB. Trabajaremos con algunos datos sobre artículos de noticias. Construiremos una aplicación de noticias de pila completa utilizando GraphQL y Next.js. No nos enfocaremos tanto en el diseño frontal, nos enfocaremos principalmente en cómo encajan las piezas. Así que no te decepciones cuando veas que no hay mucho diseño o sofisticación en nuestra aplicación frontal. Pero cubriremos cómo manejar la obtención de datos con GraphQL en una aplicación de React y específicamente con Next.js. Genial, eso es, sí, ese es el orden en el que vamos a seguir, comenzando con Neo4j. Comenzaremos en Neo4j Aura, importaremos algunos datos sobre artículos de noticias, veremos cómo usar un lenguaje de consulta llamado Cypher para trabajar con los datos, incluyendo cosas como, ¿podemos recomendar artículos similares, ese tipo de cosas, consultas de personalización de recomendación. Luego veremos cómo construir APIs de GraphQL respaldadas por Neo4j, por lo que construiremos una API de GraphQL utilizando la biblioteca Neo4j GraphQL, que es una biblioteca de Node.js. Veremos cómo ejecutar nuestro servidor GraphQL en Next.js, por lo que para Next.js, utilizaremos Next.js tanto para el backend, la funcionalidad de las rutas de la API, como también para la aplicación frontal de React.

2. Despliegue en Vercel e Introducción a Neo4j

Short description:

Desplegaremos nuestra aplicación en Vercel y la haremos interactiva y práctica. Tendremos segmentos de ejercicios prácticos y proporcionaremos código inicial. Hablemos de Neo4j y Neo4j Aura DB. La masterclass está programada para tres horas y veremos cómo va.

Luego desplegaremos nuestra aplicación en Vercel, por lo que tanto la aplicación de React en el frontend como nuestra API de GraphQL se desplegarán como funciones sin servidor. Genial, así que empecemos. Quiero que esto sea lo más interactivo y práctico posible, así que a medida que avancemos, si tienes preguntas y comentarios, déjalos en el chat y definitivamente los abordaré a medida que avancemos. También verás este icono de ejercicio práctico, así que definitivamente quiero que sea práctico, así que habrá, oh, creo que tenemos cinco o seis, así que segmentos de ejercicios prácticos donde trabajaremos juntos en algunos ejercicios mientras construimos nuestra aplicación.

No vamos a empezar desde cero, tendremos un código inicial para ayudarnos, pero sí, intentemos que sea lo más práctico posible. Así que haz preguntas en el chat, avísanos cómo van las cosas. Y cuando veas este icono de ejercicio práctico en las diapositivas, eso significa que vamos a dedicar unos minutos a trabajar en algo juntos.

Genial. Para comenzar, hablemos un poco sobre Neo4j y Neo4j Aura DB. Supongo que también deberíamos hablar sobre el tiempo aquí. Esto está programado, creo, como una masterclass de tres horas. No hemos hecho esto antes. Es algo nuevo. Así que lo improvisaremos. Creo que tres horas probablemente estarán bien, pero ciertamente no nos extenderemos. No estoy seguro si terminaremos temprano.

3. Continuidad e Introducción a Neo4j Aura

Short description:

En esta parte, discutimos la continuidad de la sesión de entrenamiento de la semana anterior e introducimos Neo4j Aura como una base de datos de grafos. Explicamos el concepto de grafos y nodos, así como el uso del lenguaje de consulta Cypher. También mencionamos el uso de Neo4j en casos de uso del mundo real, como investigar corporaciones offshore. Por último, proporcionamos instrucciones para registrarse en Neo4j Aura y crear una nueva instancia de Aura DB.

Entonces, una pregunta de Mohammed en el chat, ¿esta sesión de entrenamiento es continua a la anterior? Sí, buena pregunta. ¿Fue la semana pasada? Sí, la semana pasada hice un taller centrado en la construcción de APIs de GraphQL con la biblioteca de GraphQL de Neo4j. Entonces, si tomaste esa sesión, habrá algunos conceptos similares que se transferirán. En ese taller, pasamos aproximadamente tres horas profundizando en las características de usar solo la biblioteca de GraphQL de Neo4j para construir una API de GraphQL. Y dejamos en claro que no vimos cómo encaja eso en el contexto de implementar nuestra aplicación, una aplicación de frontend, cómo usamos servicios en la nube con eso. Entonces, hoy, el enfoque está realmente en cómo estas diferentes piezas encajan para construir una aplicación de pila completa. Entonces, vamos a usar un conjunto de datos diferente y en el de la semana pasada construimos una API de GraphQL para una librería en línea. Hoy nos enfocamos en un conjunto de datos diferente con datos del mundo real de artículos de noticias en un gráfico. Entonces, si tomaste el taller de la semana pasada, la mayor parte de esto será nuevo, habrá nuevamente un poco de superposición en los conceptos. Pero creo que debería valer la pena. Espero que eso responda tu pregunta. Genial.

Entonces hablemos de Neo4j Aura. Primero que nada, ¿qué es Neo4j? Bueno, dijimos que la base de datos de grafos, es posible que estés familiarizado con bases de datos relacionales o bases de datos de documentos, donde en una base de datos relacional, el modelo de datos con el que estamos trabajando son tablas. En una base de datos de documentos, tenemos colecciones de documentos como documentos JSON. En una base de datos de grafos, tenemos grafos con los que trabajamos. Entonces, en un grafo, los nodos son las entidades, las relaciones los conectan y podemos almacenar propiedades de pares clave-valor arbitrarias en los nodos o relaciones. Esas son los atributos. En Neo4j, usamos un lenguaje de consulta llamado Cypher para trabajar con los datos, tanto para crear como para consultar los datos. Entonces, si estás familiarizado con SQL o has oído hablar de SQL, puedes pensar en Cypher como algo similar a SQL, pero diseñado para grafos. En este ejemplo, en la parte superior derecha aquí, esa es una consulta de Cypher que busca direcciones en Nueva York y luego busca personas conectadas a compañías offshore en Nueva York. Esta consulta proviene de los documentos de Panamá o los conjuntos de datos de los documentos de Pandora, que son conjuntos de datos de periodistas de investigación que analizan corporaciones offshore. El grupo que realizó esa investigación utilizó Neo4j para comprender datos estructurados muy anidados de corporaciones offshore y personas conectadas a ellas. Creo que ese es un buen ejemplo y relaciona las cosas con un caso de uso del mundo real, pero hay muchas cosas interesantes que podemos hacer con grafos y con bases de datos de grafos. Nos vamos a centrar más en la construcción de casos de uso operativos y transaccionales. Pero también hay muchas cosas interesantes que podemos hacer con análisis de grafos, como algoritmos de grafos, ciencia de datos de grafos o visualización de datos como un grafo, pero hoy usaremos la integración gráfica para ayudar a construir esa capa de API. Entonces, realmente pienso en Neo4j como la pieza central de esta plataforma de grafos, donde la base de datos nos brinda la capacidad de modelar, almacenar y consultar nuestros datos como un grafo, y luego hay muchas herramientas e integraciones diferentes dependiendo de en qué estemos trabajando. En el lado derecho del espectro se encuentran más las cosas de análisis, ciencia de datos de grafos, donde me interesan cosas como la ciencia de datos de grafos, los algoritmos de grafos, la visualización de grafos, y luego lo que nos estamos enfocando hoy está más en el lado izquierdo, donde estamos más interesados en casos de uso operativos y transaccionales. Quiero construir una capa de API para mi aplicación de noticias o quiero construir la capa de API para un sitio de comercio electrónico, cosas así.

Entonces, bueno, aquí está nuestro primer ejercicio práctico del día. Todos vamos a iniciar sesión en Neo4j Aura y crear una nueva instancia de Aura DB que sea privada para nosotros mismos. Permítanme dejar el enlace a Neo4j Aura en el chat. Ahí está el enlace, simplemente lo dejaré en el chat de Discord. Entonces, lo que vamos a hacer es ir a ese enlace e iniciar sesión en Neo4j Aura y crear una nueva instancia gratuita de Aura DB. Cuando hagas eso, se te presentará una contraseña aleatoria. Asegúrate de copiar esa contraseña, guárdala en algún lugar, porque la usaremos casi de inmediato. Así es más o menos cómo es el flujo, lo explicaré en un minuto. Básicamente, una vez que inicies sesión, verás esta pantalla donde se te pedirá que crees una base de datos, ya sea gratuita o profesional. Queremos el nivel gratuito para el taller de hoy, le darás un nombre, puedes elegir una región, simplemente selecciono la región que aparece primero. Hay algunas opciones diferentes, también puedes seleccionar la que esté más cerca de ti. Y luego tienes dos opciones, comenzar con un conjunto de datos existente sobre películas o comenzar con una base de datos en blanco. Y queremos comenzar con una base de datos en blanco. Aquí es donde verás la contraseña, esta se genera aleatoriamente, puedes cambiarla más tarde, pero debes copiarla, guardarla en algún lugar, porque la usaremos en el siguiente paso cuando vayamos a comenzar a usar Neo4j Browser para escribir consultas. Verás en la consola de Aura que estamos iniciando tu base de datos, tomará un par de minutos para ponerla en marcha. Y cuando veas que está en funcionamiento en verde, también verás esta URI, esta cadena de conexión para tu instancia de Neo4j Aura. Y también queremos copiar eso, lo usaremos más adelante para nuestra API de GraphQL para conectarnos a nuestra instancia de Neo4j Aura. Así que voy a hacer eso ahora. Entonces, dev.neo4j.com/neo4j-Aura. Queremos el nivel gratuito. Está limitado en el tamaño de los datos, pero es perfectamente adecuado para proyectos de pasatiempo o talleres como este. Y tienes una aplicación del mundo real lista para implementar. Ahí es donde entra el nivel profesional o si eres una empresa enorme y tienes muchas cosas personalizadas. Pero bueno, voy a iniciar sesión en Neo4j Aura. Oh, parece que ya había iniciado sesión. Cuando inicies sesión, puedes hacerlo con GitHub o crear una cuenta por correo electrónico si aún no lo has hecho. Voy a hacer clic en crear una base de datos gratuita de Aura. Llamémosla Taller de Galaxia GraphQL. Vamos con Iowa. Y voy a dejar la región como Singapur. Cargar o crear tus propios datos. Entonces, no quiero el conjunto de datos de películas. Seguro, ¿por qué no? De acuerdo, crear base de datos. Quiero crear mis propios datos, así que seleccionaré esto y no necesitamos actualizar eso. Entonces, aquí está mi contraseña. Bueno, no, seleccionaré uno cerca de mí. La voy a copiar. Gracias. Guárdala en algún lugar donde no la pierda. Sí, sí, la tengo.

4. Configuración de la base de datos e Introducción a los Grafos

Short description:

En esta parte, configuraremos la base de datos y daremos a todos la oportunidad de crear una instancia de Neo4j o una base de datos. Si encuentras algún problema, avísanos en el chat. Mientras esperamos que la instancia se inicie, discutiremos los grafos y los conjuntos de datos con los que trabajaremos hoy.

Guarda eso, y aquí veremos, bien, ahora estamos configurando mi database. Tomará unos minutos hacerlo. Genial, cuando llegues a esta pantalla, deberías estar bien por ahora. Entonces, hagamos una pausa. Volveré a esta diapositiva. Y hagamos una pausa por solo un par de minutos para dar a todos la oportunidad de crear una instancia de Neo4j o una base de datos. Si hiciste el taller de la semana pasada, puedes usar la misma database. Está bien, o puedes destruir esa database y crear una nueva. No importa realmente. Pero sí, hagamos una pausa por solo un par de minutos y luego continuaremos. Si te quedas atascado con algo o tienes algún problema, avísanos en el chat. Oh, y puedes ver que se ha creado una instancia o al menos llegar a la pantalla gris que dice que está en proceso de inicio. Básicamente, quieres ver algo como esto. Genial, sigamos adelante. Pero si tuviste un error o si algo no funciona, definitivamente avísanos en el chat y lo resolveremos. Pero hablemos un poco sobre los grafos y los conjuntos de datos con los que trabajaremos hoy mientras esperamos que nuestra instancia de Neo4j Ora se inicie.

5. Modelos de Datos de Grafos y Trabajando con Artículos de Noticias

Short description:

Trabajamos con un modelo de datos de grafo llamado grafo de propiedades en Neo4j. Consiste en nodos, relaciones y propiedades. El concepto de grafo de conocimiento nos ayuda a poner las cosas en contexto al conectar nodos de diferentes tipos. En GraphQL, también trabajamos con un modelo de datos de grafo, y los modelos de datos de grafo de propiedades y GraphQL son muy similares. Hoy trabajaremos con datos de artículos de noticias de la API de New York Times, que incluye artículos, temas, autores y más. Usaremos un repositorio separado en GitHub con código para cargar este conjunto de datos y construir APIs de GraphQL.

Entonces dijimos anteriormente que el modelo de datos data con el que trabajamos en Neo4j es un grafo. Los nodos, que son las entidades, se conectan mediante relaciones. En Neo4j, utilizamos un modelo de datos específico llamado grafo de propiedades o también llamado grafo de propiedades etiquetadas. En el grafo de propiedades, primero tenemos etiquetas que definen el tipo o agrupación de un nodo. En este caso, tenemos la etiqueta de nodo en todos nuestros nodos, lo cual no es muy útil. Luego, nuestras relaciones tienen un tipo y una dirección. También podemos almacenar propiedades arbitrarias en pares clave-valor. De ahí proviene el término grafo de propiedades. Es posible que hayas oído el término grafo de conocimiento en el contexto de los grafos de propiedades. Creo que los grafos de conocimiento son realmente interesantes porque nos ayudan a poner las cosas en contexto, es como me gusta pensarlo. Estamos hablando de cosas. Estos son los nodos o entidades y sabemos qué tipo de cosas son. En este ejemplo, tenemos algunos datos de artículos de New York Times. Tenemos nodos de artículo, tenemos el título y la URL almacenados como propiedades en esos nodos. Luego, los artículos están conectados a nodos de tema. Aquí hay un artículo sobre el proyecto de infraestructura en Estados Unidos, tiene el tema de política y gobierno de Estados Unidos. Eso está conectado con esta relación tiene tema. Este artículo tiene varios temas, también sobre la economía de Estados Unidos. Podemos ver otros artículos conectados al mismo tema. Esta es la idea de un grafo de conocimiento donde trabajamos con cosas y conocemos el tipo de las cosas, tienes un artículo, un tema, una persona. Y conocemos el contexto de la cosa, es decir, a qué otras cosas está conectado nuestro artículo. Básicamente, eso es lo que es un grafo de conocimiento. Cuando Google anunció su API de grafo de conocimiento en 2012, creo que fue, publicaron este artículo en el blog llamado `cosas no cadenas`. Solo hablando sobre la idea de un grafo de conocimiento, que creo que es un resumen muy bueno de lo que estamos hablando cuando hablamos de grafos de conocimiento. Es posible que hayas escuchado esos términos en el contexto de grafos y bases de datos de grafos. Pronto trabajaremos con GraphQL aquí. Creo que vale la pena mencionar que en GraphQL también trabajamos con un grafo. Tenemos tipos y objetos y campos que conectan otros tipos y objetos en el sistema de tipos de GraphQL. Aquí es donde entra en juego el grafo y GraphQL. Creo que estos modelos de datos, el grafo de propiedades en el modelo de datos que usamos en GraphQL, como verás en un momento, son muy, muy similares. Y cuando estamos construyendo aplicaciones de pila completa, puede ser realmente útil trabajar con grafos en todo el stack, desde el front-end hasta el back-end. Utilizo este ejemplo de artículos de noticias porque ese es el tipo de datos con el que vamos a trabajar hoy. Descargué de la API de New York Times esta mañana, son 25, creo, o tal vez 50 o algo así de los artículos más vistos de la última semana o algo así. Así que vamos a trabajar con ese conjunto de datos. Y este es el modelo de grafo con el que vamos a trabajar. Tendremos nodos de artículo. Estos estarán conectados a temas u organizaciones o personas sobre las que trata el artículo o menciona. También tenemos regiones geográficas. ¿Sobre qué áreas geográficas trata este artículo? Y también tenemos cosas como el autor, la foto. Este diagrama tiene comentarios aquí. No creo que trabajemos con comentarios de usuarios hoy, pero puedes ver cómo modelaríamos comentarios en un artículo y hilos de comentarios, ese tipo de cosas. El código para esto está en línea en GitHub, enlazado allí. Vamos a trabajar con un repositorio separado en GitHub, pero este repositorio de GitHub tiene código para cargar este conjunto de datos desde la API de New York Times, para obtenerlo directamente de la API de New York Times, necesitarás una clave de API. Pero no necesitamos preocuparnos por eso hoy porque solo obtuve un fragmento para hoy, con el que trabajaremos. Pero este repositorio tiene algunas cosas interesantes, como trabajar con estos datos en Cloudflare workers o un par de formas diferentes de construir APIs de GraphQL.

6. Cambiar a Neo4j Browser y Consultar Datos

Short description:

Cambie a Neo4j browser desde la consola de Neo4j Aura. Ejecute el comando 'colon play News Graph' en Neo4j browser. Espere a que se inicie la instancia de Aura. Si tiene alguna pregunta, no dude en preguntar en el chat. Neo4j browser permite escribir consultas Cypher, visualizar resultados y trabajar con datos. El modelo de datos consiste en nodos de artículo conectados a temas, personas, geografía, organizaciones y fotos. Devuelva un recuento de nodos en la base de datos, específicamente 4,500 nodos de artículo. Vea las propiedades de los nodos de artículo.

Ok, así que esos son los datos con los que vamos a trabajar hoy. Lo que vamos a hacer ahora es cambiar a Neo4j browser. Neo4j browser es como un banco de trabajo de consultas o trabajar con Neo4j. Nos permite escribir estas consultas Cypher, visualizar los resultados y trabajar con datos. Es como el entorno principal de desarrollo y pruebas que usamos cuando trabajamos con Neo4j.

Accedemos a Neo4j browser desde la consola de Neo4j Aura. Debería ver este botón de abrir. Haga clic en eso y tendrá dos opciones, Neo4j browser que es el banco de trabajo de consultas para Neo4j que vamos a usar, o Neo4j Bloom que es más una herramienta de exploración visual. Cuando hagamos eso, se nos pedirá nuestra contraseña. Esa es la contraseña aleatoria que se generó. Así que queremos tomar eso de donde lo guardamos. Y luego vamos a ejecutar este comando, colon play News Graph en Neo4j browser una vez que hayamos iniciado sesión. Y deberíamos ver algo que se ve así, más o menos en la parte inferior. Esto traerá lo que se llama una guía del navegador que tiene como un carrusel de texto y consultas Cypher incrustadas en las que podemos hacer clic para pasar a la siguiente parte del taller.

Voy a cambiar a Neo4j Aura y ejecutar este comando para mostrar la guía del navegador. Y luego haremos una pausa de unos minutos para darle a todos la oportunidad. Parece que mi instancia de Aura todavía se está iniciando. Así que tendremos que esperar un par de momentos para eso. Creo que esto está tardando más porque cambié la región. Creo que lo que hace es darte una región de forma predeterminada, tal vez esa tenga más asignación disponible. Así que si su instancia está lista, háganoslo saber en el chat, en realidad cuántas personas tienen una marca verde que dice en ejecución. Si tienes eso, ve y abre Neo4j browser. Si no, esperaremos unos minutos. Antoine dice que sí, que todavía está en progreso. De acuerdo. Paul dice lo mismo. De acuerdo, así que esperaremos unos minutos, está bien. Gabrielle dice que todavía está esperando. De acuerdo, sí, está bien. Le daremos unos minutos más para que se inicie. Eso está bien. Mientras tanto, si alguien tiene alguna pregunta, no dude en hacérnoslo saber en el chat si tiene alguna pregunta y podemos profundizar en eso. De lo contrario, tengo una instancia de Neo4j con estos datos cargados. Así que tal vez echemos un vistazo a eso. Genial, este es Neo4j browser. Voy a demostrar cómo se ve aquí y luego, cuando nuestra instancia de Aura esté lista, volveremos a Aura. Este es el Neo4j browser. Básicamente tienes un editor de Cypher aquí, así que escribimos consultas Cypher aquí y luego obtenemos un marco, uno de estos paneles para cada consulta que escribimos. Aquí escribí una consulta que dice coincidir en entre paréntesis. Así que con Cypher, lo que hacemos es crear patrones de gráficos utilizando esta especie de notación similar a arte ASCII. Entonces, coincidir, el comando coincidir significa ir a buscar algunos datos que existen en el gráfico basado en este patrón y vamos a definir algún patrón de gráfico. Entonces, el patrón de gráfico más básico que podemos definir es pensar en él como un patrón de nodo desnudo, supongo, donde dibujamos esta representación de arte ASCII de un nodo, que es como paréntesis abierto y cerrado. Y luego esto en, dentro de ese paréntesis, se convierte en una variable que está vinculada a esa parte del patrón de gráfico. Entonces, en este caso, el nodo al que luego podemos referirnos más adelante. Lo primero que hacemos es coincidir con cada nodo en la base de datos, ese es el patrón más simple que podemos. Y estos nodos que coinciden se vinculan a la variable in y luego podemos referirnos a eso más adelante en nuestra consulta. Y queremos devolver una agregación que es un recuento del número de nodos en la base de datos. Entonces, este conjunto de datos que estoy viendo tiene 16,000 nodos. Podemos crear patrones más específicos. Aquí estamos agregando la etiqueta. Entonces, después del in, esto es decir, encontrar nodos que tengan la etiqueta artículo. Entonces dijimos que las etiquetas son una forma de agrupar nodos. En términos de GraphQL, piensa en esto como un tipo. Entonces, cuando comencemos a trabajar con GraphQL, veremos cómo podemos asignar tipos de GraphQL a etiquetas de nodos. Entonces, si ejecutamos esto nuevamente, tenemos 4,500 nodos de artículo. Veamos el modelo de datos que tenemos. Visualización del esquema de la base de datos y limpiemos los estilos aquí. Ahí vamos. Es un poco más legible. Este es el meta modelo con el que estamos trabajando. Tenemos nodos de artículo que están conectados a temas, personas, geografía, organizaciones y fotos. Esto coincide exactamente con las diapositivas aquí. Este diagrama que vimos antes. Entonces, este es el resultado final con el que vamos a trabajar. Pero usando esta información, veamos cómo podemos crear patrones un poco más complejos. En primer lugar, tenemos alrededor de 4,000 artículos, así que no puedo simplemente devolver todos los artículos. Vamos a devolver unos 10 más o menos. Aquí hay algunos nodos de artículo. Podemos hacer clic en ellos para ver las propiedades. Aquí estamos viendo las propiedades de pares clave-valor que almacenamos en nuestros nodos.

7. Recorriendo Grafos y Usando Caminos de Longitud Variable

Short description:

Puedo recorrer el grafo visualmente haciendo doble clic en los nodos, pero Neo4j Browser es más adecuado para escribir consultas Cypher. Podemos agregar patrones complejos a nuestras consultas, como recorrer desde artículos hasta temas relacionados. Al combinar el operador de camino de longitud variable y la función de camino más corto, podemos encontrar el camino más corto entre nodos en un grafo. Esto es útil para diversos casos de uso, como logística, enrutamiento, redes sociales y grafos de conocimiento. Veamos un ejemplo de cómo usar el operador de camino de longitud variable para encontrar el camino más corto entre dos nodos, 'cheese' y 'Tik Tok'.

Puedo hacer doble clic en estos para recorrer el grafo. Puedo ver que se trata de un eclipse lunar y puedo ver los temas, eclipses, luna, Tierra, espacio y astronomía, y luego una foto conectada a eso. Quiero ver cuáles son los otros nodos de espacio y astronomía. Puedo hacer doble clic nuevamente y hacer otro recorrido. Así que puedo recorrer el grafo visualmente de esta manera, pero Neo4j Browser está realmente diseñado para escribir consultas Cypher y trabajar con los resultados. Así que en lugar de explorar visualmente, si quieres explorar visualmente, ahí es donde usaríamos Neo4j Bloom.

Agreguemos un patrón más complejo a esto. Digamos que para estos 10 artículos, también veamos los temas conectados a los artículos y devolvamos y estoy, y devolvamos estrella, que devolverá cualquier variable con la que hagamos coincidir. Ahora hemos definido un poco de un recorrido en nuestro grafo. Estamos buscando no solo artículos, sino que ahora estamos dibujando esta especie de representación de arte ASCII de una relación, y esto se parece a una flecha que hemos dibujado aquí y estos corchetes indican la relación donde puedo especificar el tipo de relación. Así que quiero seguir la relación HasTopic que sale de nuestros nodos de artículo hacia estos otros nodos de tema, y luego voy a devolver 10 de esos caminos. Devolvamos, digamos, 25 para obtener una representación visual un poco más amplia. Aquí hay un montón de artículos sobre ejercicio. Un montón de artículos sobre ejercicio. También podemos cambiar esto para ordenar por fecha de publicación. Ahora deberíamos obtener los artículos más recientes, oh no, obtenemos los más antiguos, en orden descendente por fecha de publicación. De forma predeterminada, obtenemos el orden ascendente. Así que queremos los artículos más recientes y sus temas. Y lo bueno de Cypher es que si la respuesta a nuestra pregunta es un recorrido más complejo a través del grafo, solo agregamos un patrón de grafo más complejo. Así que ahora, si quiero decir, está bien, para todos estos temas de los artículos de hoy, ¿cuáles son los otros artículos que tienen esos mismos temas? Solo agregamos esa parte a nuestro patrón. Así que ahora estamos comenzando con los artículos más recientes ordenados por fecha de publicación en orden descendente, recorriendo los temas de esos artículos y luego encontrando otros artículos que están conectados a esos mismos temas. Hagamos esto, hagamos, obtengamos algunos caminos más aquí. Así que 300, ahí vamos. Y termina con muchas cosas sobre el coronavirus y la vacuna, porque hay muchos artículos sobre esos dos temas en nuestro conjunto de datos.

Ok, eso es un pequeño vistazo a Cypher. Volvamos a Neo4j Aura. Parece que todavía se está cargando aquí en Aura. Muy bien. Sigamos viendo Cypher entonces. Por cierto, si quieres seguir, esta base de datos es pública, aquí está la URL. Lo dejaré en el chat. Y hay un usuario de solo lectura, que es newsgraph, y la contraseña es simplemente newsgraph. Así que puedes abrirlo si quieres seguir. Hemos hablado de Cypher. Hemos hablado de escribir patrones de grafo en Cypher. También tenemos algunos patrones más complejos con los que podemos trabajar, como el operador de camino de longitud variable. Permíteme mostrar las tarjetas de referencia de Cypher, una referencia útil. Así es, aquí están las tarjetas de referencia de Cypher, que tienen mucha información diferente sobre Cypher, diferentes comandos y ejemplos. Así que hay muchas funcionalidades aquí para trabajar con Cypher. Una cosa que quería ver es el camino de longitud variable. Voy a decir MATCH. Ahora aquí voy a usar una sintaxis ligeramente diferente donde en lugar de donde la variable se define en línea en el patrón, la defino aquí afuera y esto es porque voy a trabajar con un camino en lugar de solo una parte de un patrón. Pero estoy interesado en el camino más corto y cierro algunos de estos marcos para que no nos molesten aquí. Estoy interesado en el camino más corto desde, qué tal desde queso, estaba mirando este antes. Queso a Tik Tok. Aquí estoy definiendo un patrón de nodo. Así que busco un nodo de tema y luego estos corchetes. Así indicamos las propiedades. Esto dice que coincida con el nodo que tiene la etiqueta tema donde el valor sea queso para la clave nombre. Y luego creo que tenemos Tik Tok aquí. Estaba pensando en esto antes. Creo que es Tik Tok y luego su empresa matriz, Bite Dance, algo así, y luego devolvemos...

8. Recorriendo el Grafo y Construyendo APIs de GraphQL

Short description:

Esta parte cubre el recorrido del grafo para encontrar el camino más corto desde queso hasta Tik Tok. Discutimos el poder de Cypher en Neo4j y verificamos el estado de nuestra instancia de Aura. Luego pasamos a construir APIs de GraphQL con Neo4j, explicando las similitudes entre el modelo de datos de grafo de propiedades y el modelo de datos de GraphQL. También proporcionamos una descripción general de GraphQL, su sistema de tipos, definiciones de tipos y funciones de resolución. Por último, exploramos la implementación de una API de GraphQL en el backend utilizando funciones de resolución para obtener datos de una base de datos.

Entonces, esto va a recorrer el grafo para encontrar el camino más corto desde queso hasta Tik Tok. Y resulta ser un camino corto. Aquí hay un artículo sobre la escasez de queso crema en Nueva York que también tiene el tema de la cuarentena. Y aquí hay otro artículo sobre influencers de las redes sociales, que, por supuesto, está conectado a Tik Tok. Puedo hacer doble clic en estos para expandir cualquier otro nodo intermedio que esté conectado.

De acuerdo, genial, eso espero que les dé una idea del poder de Cypher que podemos usar con Neo4j. Verifiquemos nuestra instancia de Aura. Si aún no está lista, podemos seguir adelante. Supongo que todos los demás todavía están esperando que se inicie. Aura debe estar teniendo un día lento hoy. Muy bien, sigamos adelante ya que no queremos pasar todo nuestro tiempo esperando a que nuestra instancia de Aura esté lista. Está bien, podemos usar esta base de datos news.graph.zone. Eso está bien. Eso cubre en cierta medida el primer módulo sobre Neo4j. Si alguien tiene alguna pregunta, háganoslo saber en el chat. Oh, también puedes levantar la mano en Zoom si quieres hablar y hacer una pregunta. Adelante y hazlo. Si tienes una pregunta sobre Neo4j, simplemente haz clic en levantar la mano y me enviará alertas y podremos responder tu pregunta de esa manera. Si no quieres ponerlo en el chat, pero el chat también está bien.

Genial, sigamos adelante. Volveremos a nuestra instancia de Aura una vez que todas estén listas. Por lo general, solo toma uno o dos minutos, así que no estoy seguro de qué está pasando hoy. Hablemos de cómo construir APIs de GraphQL. Así que tenemos nuestros datos en Neo4j, este conjunto de datos de artículos de noticias. Vimos cómo consultar eso con Cypher en Neo4j Aura. Sin embargo, a menudo, cuando estamos construyendo una aplicación, no queremos simplemente exponer nuestra base de datos públicamente a nuestras aplicaciones cliente. Queremos tener esta capa de API que se encuentra entre el cliente y la base de datos, donde podemos controlar cosas como la autorización, la lógica personalizada, y controlar qué partes de nuestros datos realmente estamos exponiendo y cómo queremos representar esos datos para los clientes. Y esta es la arquitectura común. GraphQL tiene mucho sentido para trabajar con datos de grafo como los datos en Neo4j porque, como dijimos antes, el modelo de datos de grafo de propiedades y el modelo de datos con el que trabajamos en GraphQL son muy similares. Entonces hablemos de cómo construir APIs de GraphQL con Neo4j. Ahora estamos en el punto en el que tenemos nuestros datos en la base de datos. Sabemos que queremos construir esta aplicación, queremos construir esta capa de API como el siguiente paso. Entonces, ¿cómo lo hacemos? Hablemos un poco sobre GraphQL. Sé que creo que la mayoría de las personas dijeron que tenían cierta familiaridad con GraphQL, pero hablemos un poco sobre GraphQL a un nivel general antes de continuar. Así que todos estamos en la misma página. GraphQL es un lenguaje de consulta para APIs. Tenemos un sistema de tipos estricto con GraphQL. Definimos los datos disponibles en la API, incluyendo qué entidades y atributos existen en los datos y cómo se conectan esos tipos. Entonces, eso es la parte de grafo de GraphQL o que podemos tener campos que hacen referencia a otros tipos en nuestro esquema. Entonces, nuestras definiciones de tipo, estos son un concepto importante en GraphQL. Definen los datos disponibles en nuestra API, ¿verdad? Entonces tenemos tipos y tenemos campos del tipo. Por lo general, usamos el lenguaje de definición de esquemas para crear nuestras definiciones de tipo. Podemos crearlos programáticamente utilizando la implementación de GraphQL con la que estamos trabajando. Pero creo que SDL, el lenguaje de definición de esquemas, es realmente una excelente manera independiente del lenguaje para hacer esto. Eso significa que nuestras definiciones de tipo pueden transferirse entre implementaciones de GraphQL. No depende del lenguaje en el que estemos escribiendo nuestra API. Una operación de GraphQL es una consulta, una mutación o una suscripción que especifica un punto de entrada. Los puntos de entrada son un campo en el tipo de consulta, el tipo de mutación o el tipo de suscripción. Y luego tenemos argumentos opcionales que también podemos pasar. Aquí estamos buscando películas donde el título es 'A River Runs Through It'. Y luego especificamos un conjunto de selección. Entonces, el conjunto de selección se puede pensar como un recorrido a través del grafo de datos. El conjunto de selección es esta estructura anidada que también puede tomar argumentos para los campos anidados. Y también estamos especificando en el conjunto de selección los datos que se devolverán. Entonces, el conjunto de selección define la forma de los datos que se devuelven. Aquí está la respuesta a esta consulta de GraphQL. Estamos buscando la película 'A River Runs Through It' y el título, los actores conectados a la película, los directores y luego, para los directores, las otras películas que también dirigieron. ¿Quién dirigió 'A River Runs Through It'? ¿Qué otras películas dirigieron? El conjunto de selección no solo define el recorrido a través del grafo para obtener esos datos, sino también la forma de los datos que se devolverán que coincide exactamente con nuestro conjunto de selección. Esos conceptos son cómo escribimos consultas de GraphQL. ¿Cómo escribimos operaciones de GraphQL? Entonces, ¿qué pasa con la implementación de una API de GraphQL en el backend? ¿Cómo se ve eso? Bueno, típicamente eso implica crear nuestras definiciones de tipo de GraphQL de las que hablamos y luego implementar lo que se llaman funciones de resolución. Entonces, las funciones de resolución son funciones que definen la lógica real para ir a la capa de datos para obtener datos de una base de datos o consultar otra API, lo que sea. GraphQL es agnóstico a la capa de datos, por lo que realmente podemos construir una API de GraphQL sobre cualquier fuente de datos. En este ejemplo, esto proviene de una API de GraphQL para datos de conferencias, por lo que tenemos sesiones de conferencias. Las sesiones están en una sala, las sesiones tienen un tema y luego tenemos sesiones recomendadas que son otras sesiones en las que podrías estar interesado si te gustó esta sesión. Y cada una de estas funciones de resolución, esto se llama un mapa de resoluciones porque es un objeto de funciones en JavaScript, por lo que puedes ver que tenemos query.session como una función de resolución, session.room es una función. Y en cada una de estas funciones, lo que estamos haciendo es ir a una especie de base de datos ficticia utilizando esta especie de sintaxis ORM para, en primer lugar, buscar sesiones por algunos términos de búsqueda. Así que imagina que estamos en el sitio web de la conferencia y estamos buscando todas las sesiones de GraphQL. Entonces vamos a la base de datos una vez para encontrar todas las sesiones que tienen 'GraphQL' en el título o lo que sea. Y luego, si pedimos la sala, bueno, ahora estamos llamando a esta función de resolución para volver a la base de datos. Y para todas las sesiones que coinciden con 'GraphQL', ahora dime la sala en la que se encuentran, eso es lo que se devuelve.

9. Resolutores de GraphQL y Beneficios

Short description:

El problema de la consulta N más uno ocurre cuando se realizan múltiples solicitudes de ida y vuelta a la capa de datos, lo que resulta en problemas de rendimiento. Esto se puede solucionar utilizando el patrón del cargador de datos o integraciones de bases de datos. La biblioteca de Neo4j GraphQL puede generar automáticamente funciones de resolución y optimizar las consultas a la base de datos, resolviendo el problema de la consulta N más uno. GraphQL permite obtener datos precisos, evitando el exceso o la falta de datos. Sin embargo, presenta desafíos en áreas como el manejo de errores y el almacenamiento en caché, que requieren enfoques diferentes a los de REST. A pesar de estos desafíos, GraphQL ofrece beneficios significativos en términos de recuperación eficiente de datos.

Y luego haga lo mismo para el tema y haga lo mismo para recomendado. Así que puedes ver que debido a la forma anidada en que se llaman estas funciones de resolución, a menudo terminamos haciendo múltiples solicitudes de ida y vuelta a la capa de datos, a la base de datos, para cada una de nuestras selecciones, esencialmente en nuestro conjunto de selección anidado. Esto es lo que se llama el problema de la consulta N más uno, donde terminamos haciendo múltiples solicitudes de ida y vuelta a la capa de datos. Esto tiene problemas de rendimiento porque cada una de esas solicitudes de ida y vuelta a la capa de datos incurre en ciertos costos adicionales para ser mucho más eficiente, ya que podemos hacer una sola solicitud a la capa de datos y obtener todos nuestros datos de vuelta.

Entonces, el problema de la consulta N más uno, esto es algo con lo que te encontrarás si has construido APIs gráficas antes. Hay algunas formas diferentes de abordar esto. Una se llama el patrón del cargador de datos donde podemos almacenar en caché y agrupar los datos para que, en primer lugar, descubramos, ok, ¿cuáles son todas las consultas que vamos a enviar a la base de datos y luego las enviamos todas de una vez? O podemos utilizar integraciones de bases de datos que generan una sola consulta a la base de datos a partir del resolutor raíz basado en nuestra solicitud de GraphQL. Y eso es lo que haremos hoy con la biblioteca de Neo4j GraphQL, que hará dos cosas relacionadas con los resolutores. Una es, en primer lugar, generará automáticamente todas nuestras funciones de resolución. Por lo que no tenemos que escribir ninguna de esta lógica de obtención de datos. Pero también, y igual de importante, supongo, generará una sola consulta a la base de datos a partir del resolutor raíz. Eso soluciona el problema de la consulta N más uno. Envía una sola consulta a la base de datos. La base de datos luego puede averiguar cómo optimizar esa solicitud, ¿de acuerdo?

Entonces, esos son los resolutores de GraphQL. ¿Cuáles son algunos de los beneficios de GraphQL en general? Creo que esta idea de exceso o falta de datos es importante, donde enviamos exactamente los datos que el cliente ha solicitado, nada más, nada menos. Y el cliente puede construir una consulta que diga, dame todos los datos que necesito para renderizar esta vista. Por lo que el cliente no tiene que hacer múltiples solicitudes a la capa de API. Es una sola solicitud de API para obtener todos los datos que el cliente necesita. Creo que ese es realmente uno de los principales beneficios al trabajar con GraphQL. Por supuesto, hay muchos desafíos que surgen al trabajar con GraphQL. Hablamos del problema de la consulta N más uno, pero también creo que en general, una de las principales categorías de desafíos es que muchas de las prácticas bien entendidas de REST no se aplican en GraphQL. Cosas como los códigos de estado HTTP, el manejo de errores, el almacenamiento en caché, esas cosas se manejan de manera un poco diferente. Hay herramientas y mejores prácticas para abordar todo esto, pero estas son algunas cosas de las que debes tener en cuenta.

10. Usando GraphQL Playground y Consultando la API

Short description:

Hoy vamos a usar el playground de GraphQL para consultar nuestra API de GraphQL. El playground ha sido descontinuado. En su lugar, verás cosas como GraphQL o Apollo Studio que nos permiten consultar una API de GraphQL desde el navegador, aprovechando la introspección. Abramos el playground de GraphQL y familiaricémonos con la estructura de la API. Dediquemos unos minutos a trabajar con la API, realizar consultas y explorar los datos disponibles. Esta API consulta la misma base de datos de Neo4j que vimos anteriormente. Pausaremos durante un par de minutos para escribir algunas consultas de GraphQL y comprender mejor los datos con los que trabajaremos.

Hoy vamos a usar el playground de GraphQL para consultar nuestra API de GraphQL. El playground ha sido descontinuado, por lo que probablemente lo verás menos en el futuro. En su lugar, verás cosas como GraphQL o Apollo Studio, que nos permiten consultar una API de GraphQL desde el navegador, aprovechando una característica de GraphQL llamada introspección. Así podemos hacer una introspección de una API de GraphQL, que nos dice: `Dime los tipos, los datos disponibles en esta API`. Eso es introspección. Una vez que tenemos eso, podemos construir herramientas que nos brinden, por ejemplo, documentación de la API. ¿Cuáles son todos los puntos de entrada? ¿Cuáles son todos los tipos de la API? O herramientas como el autocompletado, mientras escribo mi consulta, puedo obtener autocompletado porque sé qué campos están disponibles, los tipos de esos campos, y así sucesivamente. Así que hoy vamos a usar el playground de GraphQL para familiarizarnos con él y también con la API que vamos a construir. Echemos un vistazo a un ejemplo. Así que adelante y abre esta URL en un navegador, y dejaré un enlace en el chat. news-graph.beursel.app/API/GraphQL. Eso abrirá el playground de GraphQL. Y lo que queremos hacer es dedicar unos minutos a familiarizarnos con la estructura de esta API y también con el playground de GraphQL si no lo hemos usado antes.

Aquí hay un par de consultas. Copiaré y pegaré estas en Discord, tal vez sea lo más fácil. Así que si estás en Discord en nuestro canal, aquí está la primera consulta y aquí está la segunda. De lo contrario, si tienes las diapositivas abiertas, simplemente puedes copiar y pegar estas, pero ejecuta estas consultas en el playground de GraphQL. Echa un vistazo a la pestaña Docs para ver qué datos están disponibles. Juega con el autocompletado Control Space para ver, por ejemplo, en artículos. ¿Puedes incluir también temas? ¿Puedes incluir cosas como la región geográfica? Y así sucesivamente. Dediquemos unos minutos a trabajar con esto. Esta API de GraphQL consulta la misma base de datos en Neo4j que vimos anteriormente. Así que si miramos en la pestaña Docs, podemos ver que tenemos artículos. También tenemos count y aggregates. También podemos hacer agregaciones. Podemos buscar artículos, autores, temas, y así sucesivamente. Aquí estamos buscando, hagamos esto un poco más grande, cuatro temas donde el nombre es película. Entonces, tema películas, y luego, ¿cuáles son todos los artículos conectados al tema películas? Y podemos ver cosas que podemos hacer. Por ejemplo, solo muéstrame 10 artículos. También podemos obtener la URL, la fecha de publicación. Tal vez queremos saber qué organizaciones se mencionan u otros temas para cada uno de estos. Así que dediquemos unos minutos a consultar esta API, darnos una idea de qué tipo de datos estamos trabajando. Nuevamente, dejé un enlace en el chat y algunos ejemplos de consultas, lo mostraré en pantalla. Pero hagamos una pausa por solo un par de minutos para que todos tengan la oportunidad de escribir algunas consultas de GraphQL. Y esta es la API exacta y los datos con los que vamos a construir la API de GraphQL en el siguiente paso. En el siguiente paso, veremos cómo crear el código para esta API. Así que haré una pausa por solo un par de minutos y nuevamente, si tienes alguna pregunta o problema, déjalo en el chat.

11. Implementando API con la biblioteca Neo4j GraphQL

Short description:

Implementemos la API utilizando la biblioteca Neo4j GraphQL, que permite el desarrollo basado en GraphQL. Definimos nuestros tipos y sus conexiones, lo que impulsa el modelo de datos en la base de datos. Esto elimina la necesidad de múltiples esquemas y simplifica el desarrollo.

Solo avísanos. De acuerdo, ¿todos tuvieron la oportunidad de escribir algunas consultas GraphQL? ¿Y alguien descubrió algo interesante o una consulta GraphQL interesante en esta API? Si lo hiciste, siéntete libre de compartirlo en el chat. Así que déjame ver si eso está en el chat. Genial, supongo que estás familiarizado con el playground de GraphQL y escribir consultas GraphQL y la API que vamos a construir.

Veamos cómo podemos implementar esta API utilizando la biblioteca Neo4j GraphQL. Hablamos sobre el enfoque básico de construir una API GraphQL, donde definimos nuestras definiciones de tipos y definimos nuestras funciones de resolución para obtener los datos. Y mencioné esta idea del problema de la consulta n más 1 y escribir muchos resolutores de boilerplate y algunas herramientas que abordan algunos de esos problemas son integraciones de bases de datos que facilitan la construcción de API GraphQL respaldadas por ciertas bases de datos. Estamos trabajando con Neo4j, por lo que utilizaremos la biblioteca Neo4j GraphQL. Esta es una biblioteca de Node.js JavaScript que podemos usar con cualquier implementación de GraphQL en JavaScript. Veremos algunos ejemplos.

Hablemos sobre algunos objetivos de la biblioteca Neo4j GraphQL. Bueno, el primero es esta idea de desarrollo basado en GraphQL, donde queremos tomar nuestras definiciones de tipos GraphQL. Entonces comenzamos allí, definimos los tipos, los campos disponibles en los tipos, cómo se conectan esos datos, y eso impulsa el modelo de datos en la base de datos. Por lo tanto, no necesitamos mantener múltiples esquemas para la API, para la base de datos, en cambio, nuestras definiciones de tipos GraphQL lo definen todo.

12. Validación de Consultas y Detección Temprana de Errores

Short description:

AC preguntó si se pueden detectar errores durante la creación de consultas en lugar de después de ejecutarlas. En GraphQL Playground, los errores de sintaxis se indican con líneas rojas, lo que permite una detección temprana. Esto es posible gracias a la introspección, donde el playground sabe que el campo del objeto requiere una subselección. El proceso de validación de consultas en el lado del cliente ayuda a identificar y corregir errores de sintaxis antes de enviar la consulta al servidor.

Antes de continuar, veo una buena pregunta en el chat de nuestro ejercicio anterior. Así que volvamos a Playground. AC está preguntando, ¿podemos detectar errores durante la creación de consultas en lugar de solo saberlo después de ejecutarlas? Temas de campo. Deben tener una selección de subcampos. Sí, esta es una buena pregunta. Por ejemplo, podrías obtener este error. Digamos, veamos algunos artículos. Aquí, tenemos 10 artículos. Voy a traer el título y la URL. Y si miramos en la documentación de los artículos, podemos ver que, okay, sí, tenemos temas conectados al artículo. Así que vamos a obtener los temas. Podemos agregar los temas aquí. Pero si ejecutamos esto, obtenemos un error. Y creo que este es el error que AC publicó en Discord. Que tendríamos una selección de subcampos. ¿Quisiste decir temas? La validación de GraphQL falló. Y sí, lo que este error está diciendo es que los temas, este es un campo de arreglo de objetos. Por lo tanto, esto es como una referencia a los nodos de temas en el grafo. Y no puedo simplemente devolver estos objetos de temas. Necesito, en mi conjunto de selección, definir qué campos quiero devolver específicamente. Esa es la forma en que funciona un conjunto de selección de GraphQL. Tengo que definir mi conjunto de selección, estos escalares que quiero devolver para cualquier campo de objeto. La pregunta de AC fue, ¿cómo sé que hay un error aquí antes de enviar realmente la consulta al servidor? Y una cosa que GraphQL Playground nos dará es esto, si puedes verlo aquí, pero hay una pequeña línea roja aquí en la línea cinco, que indica que hay algún error de sintaxis. Si resalto esa línea en GraphQL Playground, puedo ver que esto me está mostrando el error en el lado del cliente. Por lo tanto, puedo ver esto antes de enviarlo. Y esto es esta idea de introspección donde GraphQL Playground sabe que este es un campo de objeto. Por lo tanto, me está dando el error aquí y me está diciendo que necesito agregar una selección escalar en GraphQL Playground. AC dice que no tiene el indicador rojo. Bueno, eso no es bueno. Esa es una forma, supongo, solo en GraphQL Playground y también en otras herramientas, como si estuviéramos en DS code y estamos escribiendo código, lo cual pasaremos a trabajar con código en un minuto aquí. Y estamos escribiendo código. Si tenemos la extensión de GraphQL instalada y está apuntando a nuestra API, puede hacer una introspección de la API y saber que, oh, este es un campo de objeto que necesita tener una subselección. Entonces, AC, publicaste esa captura de pantalla. ¿Qué pasa si quitas la selección de nombre debajo de TopX? Entonces, solo deja, solo dice título URL y TopX. ¿Tienes la línea ondulada roja entonces, si quitas el nombre? Okay, genial. Sí, lo ves ahí. Sí, entonces arreglamos nuestro error de sintaxis, luego la línea ondulada desaparece. Sí, eso es el proceso de validación de consultas en el lado del cliente que ocurre allí. Genial, sí, eso es una característica súper útil, es poder hacer una introspección de la API y usar esos tipos en las herramientas, tanto en cosas como GraphQL Playground como en otras herramientas de desarrollo.

13. Objetivos y Funcionalidades de la Biblioteca Neo4j GraphQL

Short description:

La Biblioteca Neo4j GraphQL permite el desarrollo basado en GraphQL, generando operaciones de API de GraphQL basadas en tipos definidos. Traduce las solicitudes de GraphQL a consultas Cypher individuales, eliminando el problema de la consulta N más uno. Se proporciona funcionalidad CRUD sin código adicional y se puede implementar lógica personalizada utilizando la directiva cypher-graphql-schema.

Genial, estamos hablando de la Biblioteca Neo4j GraphQL y de construir esta capa de API que se encuentra entre el cliente y la base de datos. Ahora estamos hablando de los objetivos de la Biblioteca Neo4j GraphQL. Entonces, dijimos que es una idea de desarrollo basado en GraphQL donde definimos nuestros tipos, nuestras definiciones de tipo GraphQL y eso impulsa el modelo de datos en la base de datos. Una vez que definimos nuestros tipos y los entregamos a la Biblioteca Neo4j GraphQL, la Biblioteca Neo4j GraphQL generará operaciones de API de GraphQL. Específicamente, generaremos los tipos de consulta y mutación con puntos de entrada para, por defecto, cada campo, cada tipo en el esquema y agregaremos cosas como ordenamiento, paginación, filtrado, agregaciones, este tipo de cosas. Por lo tanto, no tenemos que definir todo eso, eso se genera automáticamente en función de los tipos.

Luego, en el momento de la consulta, la Biblioteca Neo4j GraphQL tomará una solicitud de GraphQL y la traducirá a una única consulta Cypher. Ya vimos algunos ejemplos de Cypher anteriormente donde estábamos dibujando recorridos, dibujando representaciones de arte ASCII de recorridos a través del grafo. Puedes pensar en eso como mapear a un conjunto de selección anidado. Un conjunto de selección anidado también define un recorrido a través del grafo. Al generar una única consulta a la base de datos, esto significa que nos deshacemos del problema de la consulta N más uno donde podríamos hacer múltiples viajes a la base de datos. En cambio, enviamos una única consulta Cypher. La base de datos determina cómo optimizar eso y continúa desde allí. Hasta ahora, las funcionalidades de las que hemos hablado han sido principalmente de tipo CRUD. Obtenemos operaciones de creación, lectura, actualización y eliminación para cada tipo que definimos básicamente sin escribir ningún código adicional. Pero, ¿qué pasa si tenemos lógica personalizada? Digamos, por ejemplo, que queremos generar recomendaciones personalizadas. Bueno, para hacer eso, podemos usar lo que creo que es mi característica favorita y probablemente la más poderosa de la Biblioteca Neo4j GraphQL y eso es la directiva cypher-graphql-schema. Las directivas de esquema de GraphQL son como anotaciones en nuestras definiciones de tipo que indican que hay alguna lógica personalizada que debe ocurrir en el servidor. Por lo tanto, las directivas de esquema son el mecanismo de extensión incorporado de GraphQL.

14. Lógica personalizada con la directiva Cypher-GraphQL-Schema

Short description:

La directiva cypher-graphql-schema nos permite adjuntar lógica personalizada a un campo en GraphQL utilizando Cypher. Por ejemplo, podemos recorrer las reseñas de los usuarios para encontrar negocios recomendados. Esto se llama recorrido de grafo de filtrado colaborativo. Con esta función, no necesitamos escribir nuestros propios resolutores y podemos enviar una sola consulta a la base de datos.

La directiva cypher-graphql-schema nos permite básicamente adjuntar una declaración de Cypher a un campo en GraphQL para definir alguna lógica personalizada. Entonces, en este caso, en este ejemplo, tenemos un campo recomendado donde estamos devolviendo negocios recomendados. Por ejemplo, podemos hacer eso recorriendo las reseñas de los usuarios. Esto proviene de un conjunto de datos donde tenemos reseñas de usuarios de negocios. Podemos decir que, para el negocio actualmente resuelto, ahí es donde entra esta palabra clave. Para el negocio actualmente resuelto, encontramos todos los usuarios que escribieron una reseña de este negocio. Y luego, ¿qué otros negocios están revisando esos usuarios? Eso podría ser una buena recomendación. ¿Verdad? Entonces, si te gusta este negocio, ¿qué otros negocios te gustan? Ese es un ejemplo de lo que se llama un recorrido de grafo de filtrado colaborativo. Básicamente, podemos usar esta característica de la directiva de esquema de Cypher para adjuntar lógica personalizada, definida utilizando cualquier funcionalidad básica que podamos definir en Cypher. Muy poderoso. No tenemos que escribir nuestros propios resolutores y esa consulta de Cypher que adjuntamos a nuestro esquema, se adjunta a la consulta única generada en la base de datos. Así que seguimos enviando una sola consulta a la database.

15. Construyendo una API de GraphQL con Neo4j

Short description:

Echemos un vistazo a un ejemplo de inicio rápido de cómo construir una API de GraphQL con la biblioteca Neo4j GraphQL. Instalamos las dependencias necesarias, definimos las definiciones de tipo de GraphQL, creamos una conexión a la base de datos y generamos un esquema ejecutable de GraphQL utilizando la biblioteca Neo4j GraphQL. Con un código mínimo, podemos ejecutar el playground de GraphQL localmente y consultar nuestra API, similar a la API de artículos que vimos anteriormente.

Echemos un vistazo a un ejemplo de inicio rápido. No es necesario que sigas los pasos. Vamos a clonar un repositorio en un momento, pero solo para darte una idea de cómo se ve la construcción de una API de GraphQL con la biblioteca Neo4j GraphQL. Aquí estamos instalando algunas dependencias. La biblioteca Neo4j GraphQL, la implementación de referencia de GraphQL en JavaScript, el controlador de Neo4j, esto nos permite crear una conexión a nuestra base de datos y luego Apollo Server, que es un servidor de GraphQL muy bueno para node.js. Hay otros que podríamos usar con la biblioteca Neo4j GraphQL, pero Apollo Server es bueno porque simplemente entregamos un objeto de esquema ejecutable. Aquí está el fragmento mínimo viable.

Vamos a revisar esto en un par de partes. Primero estamos importando nuestras dependencias de la biblioteca Neo4j GraphQL, el controlador de Neo4j JavaScript, y Apollo Server, y luego estamos definiendo nuestras definiciones de tipo de GraphQL. Aquí tenemos unas definiciones de tipo bastante simples. Películas y géneros son dos tipos, y en estos campos de relación, donde vemos que una película tiene géneros. Entonces los géneros y las películas están conectados, hemos agregado esta directiva de esquema de relación. Entonces antes decíamos que el modelo de gráfico de propiedades que usamos con Neo4j es muy similar al modelo de datos con el que trabajamos en GraphQL. Entonces, la biblioteca Neo4j GraphQL mapea los tipos a etiquetas de nodos y los campos a propiedades. Entonces eso es prácticamente un mapeo uno a uno. Sin embargo, en un modelo de gráfico de propiedades cada relación tiene un tipo y una dirección. Y en GraphQL, nuestras relaciones no tienen dirección. Entonces necesitamos codificar esa información para poder manejar el modelo de gráfico de propiedades en Neo4j a partir de nuestra definición de tipo de GraphQL. Por eso usamos la directiva de esquema de relación para definir la dirección de la relación en la base de datos. Entonces en este caso, estamos diciendo que el campo géneros en las películas en la base de datos sigue la relación de género hacia adentro con la dirección de salida de ir de película a género. Entonces lo siguiente que hacemos es crear una conexión a nuestra base de datos utilizando nuestra cadena de conexión para la base de datos. En este caso, nombre de usuario y contraseña. Y luego tomamos las definiciones de tipo que escribimos anteriormente y esta instancia del controlador de Neo4j. Pasamos eso al constructor de la clase Neo4j GraphQL. Esto proviene de nuestra biblioteca Neo4j GraphQL. Y luego eso nos da un esquema ejecutable de GraphQL que pasamos a Apollo Server que luego puede manejar el aspecto de red de nuestra API de GraphQL. Así que ten en cuenta que no escribimos ninguna función de resolución de GraphQL. No escribimos ningún código de plantilla que especifique cómo obtener datos de la base de datos.

16. Biblioteca Neo4j GraphQL y Modelado de Gráficos

Short description:

La biblioteca Neo4j GraphQL maneja operaciones como crear, leer, actualizar y eliminar. Traduce consultas de GraphQL a consultas de Cypher y admite ordenamiento, paginación y filtrado. La biblioteca también permite filtrado y ordenamiento anidados. Los datos geográficos y las relaciones se pueden filtrar utilizando estructuras anidadas. Se pueden crear diagramas de gráficos utilizando herramientas como arrows.app, que puede generar definiciones de tipo de GraphQL. Este proceso iterativo de modelado de gráficos ayuda a definir las entidades, relaciones y consultas en la API.

Todo eso fue manejado por nosotros por la biblioteca Neo4j GraphQL. Así que todo eso estaba en un solo archivo. Si ejecutamos eso, veríamos el playground de GraphQL ejecutándose localmente. Ahora podemos consultar nuestra API. Este es un ejemplo de una API de libros. Es bastante similar a la API de artículos que acabamos de ver en el playground de GraphQL porque la API generada se genera utilizando la biblioteca Neo4j GraphQL. Entonces, los filtros, los puntos de entrada de consulta, etc. Voy a repasar esto un poco rápido, pero quiero tocar algunos de estos conceptos y luego comenzaremos a escribir código.

Por defecto, cada tipo tiene operaciones de crear, leer, actualizar y eliminar generadas como un campo en el tipo de consulta y mutación que se mapea a las etiquetas de nodo en la base de datos. Y, por supuesto, podemos construir consultas de GraphQL arbitrariamente complejas y estas se traducen a consultas de Cypher y se envían a la base de datos por nosotros. Ya hemos visto algunos ejemplos de esto para ordenar y paginar, tenemos este argumento de opciones en nuestros campos de consulta que nos permiten hacer ordenamiento, limitar, desplazar para paginación. También podemos hacer paginación basada en cursor utilizando tipos de conexión al estilo de Relay. Entonces, notarás que para nuestros campos de relación también verás el nombre del campo de conexión y estos se mapean a tipos de conexión al estilo de Relay que admiten paginación basada en cursor. Para el filtrado, vimos un ejemplo de esto donde filtramos una película por título. Las entradas generadas aquí dependen del tipo del campo. Entonces, para campos numéricos, tenemos mayor que, menor que, igual, ese tipo de cosas, para campos de cadena, tenemos operaciones de comparación de cadenas como comienza con, termina con, contiene, ese tipo de cosas. También podemos hacer filtrado y ordenamiento anidados para que los argumentos where se puedan aplicar en la raíz y también anidados en el conjunto de selección. Pero ten en cuenta que el filtrado se aplica en el nivel del conjunto de selección donde lo usamos. En este ejemplo, estamos buscando libros con un precio menor a $20. Y luego, para todos esos libros, las reseñas que se crearon después del 1 de enero de 2021. Esto no significa que solo se muestren los libros que cuestan menos de $20 y tienen reseñas que se crearon después de esta fecha. Por lo tanto, es posible que no veamos ninguna reseña si estamos filtrando porque el filtro se aplica en el nivel del conjunto de selección donde usamos ese argumento. Podemos trabajar con datos geográficos. No creo que tengamos datos geográficos de punto con los que trabajemos hoy, pero podemos usar filtros si tenemos datos de puntos, latitud y longitud. Aquí tienes un ejemplo. Entonces, dije hace un minuto que los filtros se aplican en el nivel del conjunto de selección donde los usé en los argumentos. Entonces, por ejemplo, si queremos filtrar a través de una relación, aquí en el ejemplo de libro que estábamos viendo, teníamos pedidos, y luego tenemos nodos de dirección que están conectados a los pedidos, y la dirección tiene un tipo de punto de latitud y longitud en ellos. Queremos filtrar los pedidos donde la ubicación está dentro de una cierta distancia de un punto. Entonces eso se aplica en función de un valor en el nodo de dirección. Queremos filtrar nodos de pedido basados en eso. Bueno, para hacer eso, simplemente usamos una estructura anidada en el argumento where. Entonces decimos donde se envía a, que ese es el campo de relación a la dirección, donde la distancia es menor a un kilómetro desde este punto. Entonces, ahora en este caso, porque aplicamos el filtro en la raíz al especificar el argumento aquí. Ahora estamos filtrando pedidos basados en la relación con los nodos de dirección. Genial, esa es la biblioteca Neo4j GraphQL. Puedes ver que una gran parte de la configuración para la API se basa en las definiciones de tipo de GraphQL que escribimos. Ya hemos dibujado nuestro modelo de datos de gráfico. Vimos que tenemos datos sobre artículos, temas, regiones geográficas, etc. Entonces, lo que vamos a hacer es definir definiciones de tipo de GraphQL que definan ese modelo de datos. Ampliemos un poco aquí. Esto es un poco más fácil de leer. Entonces, lo que hemos hecho aquí es definir un tipo de tema. El tema tiene campos como título, URL, y luego campos de relación con el autor, la persona del tema, la organización. Entonces, puedes ver que estamos usando esta directiva de esquema de relación para codificar la dirección de la relación y el tipo de relación. También estamos usando la directiva de exclusión aquí. Esta va a ser una API de solo lectura. No queremos admitir, crear, actualizar o eliminar en este momento. Entonces, usamos la directiva de exclusión para decir básicamente, `oye, no generes mutaciones para este tipo`. Estos diagramas de gráficos se crearon utilizando esta herramienta arrows.app, a la que también dejaré un enlace en el chat. Arrows.app. Entonces, arrows es bueno porque nos permite crear estos diagramas de gráficos. Así que puedo arrastrar nodos. Un video podría tener, no sé, tal vez tenga una calificación. Ups, esto debería ser una etiqueta de nodo. No una leyenda, ahí vamos. Una etiqueta de nodo. Un video tiene, no sé, llamémoslo una calificación o algo así. Ejemplo inventado. Pero nos permite crear estos diagramas, que luego podemos guardar como imágenes. También podemos exportar, por ejemplo, el JSON que lo define y guardarlo en el control de versiones, eso es bastante bueno. Pero también podemos generar las definiciones de tipo de GraphQL basadas en el diagrama que creamos. Así que pasamos por este proceso de modelado de gráficos, que creo que es realmente este proceso iterativo donde descubrimos cuáles son las entidades en las que estamos interesados, cómo están conectadas, esas se convierten en relaciones. y observamos una travesía a través del gráfico para pensar si podemos responder las preguntas que tenemos. Si podemos, entonces nuestro modelo está completo y podemos simplemente generar nuestras definiciones de tipo de GraphQL que definen ese modelo de gráfico. Estas son las definiciones de tipo que funcionan con la biblioteca Neo4j GraphQL. Esa puede ser una buena manera de pasar por este proceso de modelado de datos y obtener las definiciones que coincidan con la API con la que quieres trabajar.

17. Configuración de Next.js con Neo4j

Short description:

Discutimos la biblioteca Neo4j GraphQL y cómo escribir definiciones de tipo GraphQL. Next.js es un marco de trabajo de React de pila completa con características como renderizado del lado del servidor y enrutamiento basado en archivos. Podemos definir puntos finales de API en nuestra aplicación Next.js utilizando rutas de API. Proporcionamos un repositorio de GitHub con código de inicio para una aplicación Next.js. Explicamos cómo clonar el repositorio, actualizar las variables de entorno y ejecutar la aplicación Next.js localmente. Tomemos unos minutos de pausa para permitir que todos sigan estos pasos.

De acuerdo, hablamos sobre la biblioteca Neo4j GraphQL. Hablamos sobre cómo escribir definiciones de tipo GraphQL basadas en el modelo de datos con el que queremos trabajar hoy, artículos, temas, y demás. Echemos un vistazo al código y pongámoslo en funcionamiento con Neo4j.

Vamos a usar Next.js. Así que Next.js es un, lo considero como un marco de trabajo de React de pila completa. React es un marco de trabajo de JavaScript para construir interfaces de usuario, a menudo aplicaciones cliente de front-end. Next.js se basa en React y agrega muchas otras características. Cosas como renderizado del lado del servidor, enrutamiento basado en archivos, donde puedes crear archivos que se mapean a nuevas rutas en nuestra aplicación. Next.js también tiene soporte para algo llamado rutas de API. Aquí podemos ver todas las funcionalidades de Next.js. Pero las rutas de API. Eso significa que podemos definir puntos finales de API en nuestra aplicación Next.js. Podemos definir tanto el código backend como frontend en Next.js. Por eso vamos a usar Next.js para ejecutar nuestro servidor GraphQL, nuestros puntos finales de API GraphQL.

Genial. Echemos un vistazo al código y trabajemos con GitHub y Next.js. Hay un repositorio de inicio... Un repositorio de inicio de GitHub. Permíteme copiar el enlace aquí. Este enlace lleva a un repositorio de GitHub que tiene algo de código de inicio para nosotros y una aplicación Next.js. Lo que queremos hacer es abrir ese enlace en GitHub. Este es un repositorio de plantilla, lo que significa que en lugar de clonar este repositorio, queremos hacer clic en `Usar esta plantilla`, lo que creará un nuevo repositorio bajo tu usuario de GitHub. Luego, lo que quieres hacer es clonar ese repositorio que se creó a partir de una plantilla de este. Y la razón de esto es porque vamos a usar Vercel para implementar esto directamente desde GitHub. Y es más fácil que si descargas todo desde este repositorio y luego sigues los pasos para crear tu propio repositorio, etc. Puedes hacerlo con un solo clic, usar esta plantilla.

Esto es lo que vamos a hacer ahora. Vamos a hacer una pausa de unos minutos y abrir este repositorio en GitHub, hacer clic en `Usar esta plantilla`. Ahora crearemos un nuevo repositorio de GitHub. Y cuando hayas creado el nuevo, lo que quieres hacer es clonar ese repositorio de GitHub y luego seguir estos pasos aquí para ejecutar la aplicación next.js. Hay un paso aquí para actualizar las variables de entorno, pero creo que puede haber un problema con la provisión de nuestras instancias de Aura. Así que solo usaremos la predeterminada, que ya está completada en el archivo .env. Así que déjalo como está. Luego quiero abrir una terminal. Y en CD next JS, vamos a hacer npm install o yarn, si usas yarn, también está bien. Esto instalará nuestras dependencias. Luego haré npm run dev. Esto iniciará esta aplicación Next.js y la ejecutará localmente, en mi caso en el puerto 3000. Entonces, si ahora voy a localhost:3000, debería ver esto, que es la bienvenida a Next.js, esta es la aplicación básica que obtienes cuando creas una nueva aplicación Next.js. Genial, hagamos una pausa para darle a todos la oportunidad de seguir estos pasos. Si tienes algún problema, si tienes alguna pregunta, pregúntalo en el chat. Lo que queremos hacer es abrir el repositorio de plantilla en GitHub, hacer clic en `Usar esta plantilla` para crear un nuevo repositorio de GitHub bajo tu nombre de usuario de GitHub, clonar ese repositorio. Y luego abrirlo en un editor de código y en la terminal, hacer una instalación de npm y ejecutar npm run dev. Y si ves algo que se vea así, entonces estás bien. Así que espero que haya sido suficiente tiempo para que todos creen un nuevo repositorio, lo clonen, y ejecuten su aplicación Next.js.

18. Analizando el Código y el Tema en Next.js

Short description:

AC publicó una captura de pantalla de su configuración. Nos encontramos con un problema con las instancias de Aura que no se están iniciando debido a una interrupción del DNS de AWS. AWS está resolviendo el problema. Ahora, centrémonos en el código. Tenemos una página de bienvenida básica en Next.js. Sumergámonos en VS code y revisemos el tema. Si tienes problemas para leer el código, avísame.

AC publicó una captura de pantalla, parece que tiene su configuración lista. Eso es genial. ¿Alguien más pudo hacer que funcione? Si no, avísanos. Oh, tengo más información sobre el problema de Aura. Veamos, ¿nuestras instancias de Aura se iniciaron alguna vez? No, parece que no. Aparentemente, hay un problema de DNS de AWS que afecta al almacenamiento, lo cual impide que AWS procese estas solicitudes de creación de base de datos. Entonces, sí, por eso no podemos aprovisionar nuevas instancias. AWS está resolviendo eso, tengo un ticket y no. Todas esas solicitudes de creación de base de datos se completarán una vez que se resuelva el problema. Me alegra saber que no somos los únicos. De acuerdo, genial, tenemos este repositorio funcionando. Echemos un vistazo al código y veamos qué está pasando. No gracias, Robert. Ups, no sé por qué sigue pidiéndome que actualice una contraseña. No, no necesitamos preocuparnos por eso ahora. Genial, aquí está nuestra página de bienvenida básica de Next JS. Vamos a entrar en VS code. ¿Está bien este tema? Tal vez pueda cambiarlo por algo más legible. Este, creo que he tenido buena suerte antes con él en videos. De todos modos, avísame si no se puede leer bien.

19. Dependencias y Estructura del Código

Short description:

En la aplicación de Next JS, tenemos dependencias para React, Next JS, Neo4j driver, micro, GraphQL, Apollo server, Neo4j GraphQL library y Apollo client. Esto nos permite tener una base de código única tanto para la aplicación de React como para la API de GraphQL.

Veamos qué está sucediendo aquí. En primer lugar, en el directorio de Next JS, es donde tenemos nuestra aplicación de Next JS. Y primero, podemos ver el archivo package JSON para ver qué dependencias estamos utilizando. Estamos utilizando React y React dom y Next JS, y estamos utilizando Neo4j driver, micro que es un servidor web, y GraphQL, la implementación de referencia. Y luego estamos utilizando esta variante de micro de Apollo server, micro es un servidor web que funciona bien con Next JS, por eso lo estamos utilizando. Veremos dónde lo utilizamos en un momento. Y luego también estamos utilizando la biblioteca de GraphQL de Neo4j y Apollo client. Apollo client es una herramienta para consultar APIs de GraphQL. Como puedes ver aquí, tenemos un par de cosas de frontend y backend mezcladas. Básicamente, tenemos las dependencias que necesitamos para nuestra aplicación de React y como Apollo client para obtener datos en nuestra aplicación de React. Pero también hemos instalado las dependencias que necesitamos para construir nuestra API de GraphQL. Todo eso está en una sola aplicación de Next JS, lo cual me parece bastante bueno, es práctico para tener una base de código única para trabajar.

20. Next JS File-Based Router and Data Fetching Basics

Short description:

Next JS utiliza un enrutador basado en archivos con recarga en caliente. Podemos crear nuevas páginas y obtener nuevas rutas. La página de artículos muestra una lista de artículos obtenidos de nuestra API de GraphQL conectada a Neo4j.

Next JS, por defecto, cuando vamos a localhost:3000, utiliza un enrutador basado en archivos. Entonces, en el directorio de páginas, tenemos algunas páginas diferentes, tenemos index.js. Y index.js, esto es lo que vemos cuando vamos a localhost:3000. Aquí es donde tenemos la bienvenida a Next JS y básicamente todo lo que se está renderizando en esta pantalla. Entonces, si editamos eso, en lugar de eso podríamos decir bienvenido a full stack GraphQL y tenemos recarga en caliente. Por lo tanto, eso se actualiza de inmediato, lo cual es genial. Así que eso es básicamente lo básico para el frontend. Si creamos una nueva página, obtendremos una nueva ruta. Podemos ver que hay una aquí para artículos. Entonces, si vamos a localhost:3000/articulos, podemos ver que tenemos una lista de artículos. Así que tenemos estos enlaces. Puedes hacer clic en uno. Esto es data que proviene de nuestra API de GraphQL leyendo data de Neo4j y simplemente mostrándonos una lista. Así que te advertí antes que no nos íbamos a enfocar demasiado en el frontend. Pero mejoraremos esto un poco pero solo quiero tocar los conceptos básicos de obtención de data primero.

21. Configuración de Rutas de API y API de GraphQL

Short description:

Exploramos la función de rutas de API en Next.js, que nos permite definir puntos finales de API en nuestra aplicación de Next.js. Estos puntos finales se implementan como funciones sin servidor. Demostramos cómo crear y modificar rutas de API, como /api/hello y /api/graphql, que se asignan a funciones específicas en nuestro código. La ruta /api/hello devuelve 'John Doe' como un objeto JSON, mientras que la ruta /api/graphql proporciona un entorno de juego de GraphQL para interactuar con nuestra API de GraphQL. Examinamos el código responsable de configurar la API de GraphQL, incluidas las dependencias, las definiciones de tipo y la instancia del controlador de Neo4j. Hablamos sobre cómo el código genera un esquema ejecutable de GraphQL y lo pasa a Apollo Server. También cubrimos el uso de variables de entorno y el modo de depuración en la biblioteca de Neo4j GraphQL.

Entonces, estos datos provienen de nuestra API de GraphQL, que proviene de Neo4j, pero ¿dónde se ejecuta la API de GraphQL? Eso es lo siguiente que queremos ver. Entonces, hablamos de que Next.js tiene este enrutador basado en archivos donde creamos un nuevo archivo y eso se asigna a una ruta. Tenemos index, tenemos articles/articles, pero también podemos tener rutas de API. Echemos un vistazo a la documentación de esto. Esta es una característica realmente genial. Las rutas de API nos permiten definir puntos finales de API en nuestra aplicación de Next.js. La convención aquí es que cualquier cosa dentro del directorio API dentro del directorio de páginas se asigna a una ruta de API en ese punto final. Y cuando vamos a implementar esto, vamos a usar Vercel para implementarlo en un minuto. Cada uno de estos puntos finales se implementa como una función sin servidor. Entonces, creo que tenemos /api/hello, por lo que si vamos a /api/hello, obtenemos 'John Doe'. Si miramos en nuestro código en pages/api/hello.js, esta es la función que se llama. Podemos cambiar esto para que devuelva, por lo que estamos devolviendo un objeto JSON, cambiemos esto para que devuelva full stack GraphQL. Guardaremos y nuevamente, con esa recarga en caliente, obtenemos eso actualizado. Entonces, también tenemos una ruta de API, /api/graphql. Entonces, si vamos a /api/graphql, deberíamos ver el entorno de juego de GraphQL y, ¡ups! Tengo una variable de consulta antigua. No necesito eso. Pero aquí, esto debería ser familiar para nosotros, esto es muy similar a la API de GraphQL que estábamos ejecutando en uno de los ejercicios, estábamos escribiendo consultas y buscando artículos, etc. Y eso es exactamente lo que tenemos localmente. Echemos un vistazo a lo que está sucediendo en este código. Este será el punto de partida para nuestra API de GraphQL. Estamos importando algunas dependencias, estamos importando Apollo Server desde esta versión específica, nuevamente, micro es un servidor web que funciona bien con Next.js, por eso lo estamos usando, luego con las últimas versiones de Apollo Server, Apollo Studio es el valor predeterminado, obtienes cuando abres un punto final de GraphQL, obtienes una redirección al estudio Apollo alojado. Estoy usando Apollo, estoy usando un entorno de juego de GraphQL aquí. Me gusta poder abrir los puntos finales y tener Apollo o entornos de juego de GraphQL justo allí para trabajar, pero en realidad es la misma funcionalidad. De hecho, creo que Apollo Studio ahora tiene más funcionalidad que el entorno de juego. De todos modos, por eso estamos importando este complemento de página de inicio de juego de GraphQL. Estamos importando el controlador de Neo4j y la biblioteca de Neo4j GraphQL. Luego definimos nuestras definiciones de tipo de GraphQL. Entonces, vimos esto antes, básicamente estamos creando tipos que se asignan al modelo de gráfico que creamos en Neo4j. Tenemos artículos, autores, temas, personas, organizaciones, geos y fotos. Y todos estos tipos tienen una directiva de esquema de exclusión, que nos permite excluir las operaciones de creación, actualización y eliminación al generar la API. Entonces, no se generarán mutaciones. Y de hecho, podemos verificar eso si vamos a GraphQL Playground, miramos en la pestaña Docs, no aparecen mutaciones. Esta es la API de solo lectura, solo tenemos operaciones de consulta. También estamos usando la directiva de esquema de relación para codificar la dirección de la relación. Esto coincide exactamente con este modelo, que llamamos db.schema.visualization en Neo4j. Y hagamos un reinicio de estilo para poder leerlo. Esto coincide con este modelo de gráfico que tenemos en la base de datos. Ahora hagamos un reinicio de estilo. Creamos una instancia del controlador de Neo4j. Estamos leyendo la cadena de conexión y el nombre de usuario y la contraseña de las variables de entorno. Y eso se establece en este dotenv.local. Por lo general, no verificarías el archivo dotenv, pero con el propósito de tener un esqueleto que funcione de inmediato, lo hemos hecho. Por defecto, apuntamos a esta instancia de Neo4j news.graph.zone, que es la misma base de datos de Neo4j que estábamos consultando anteriormente utilizando este usuario de solo lectura de gráficos de noticias. XJS funciona con estos archivos dotenv. Entonces los estamos configurando aquí. Más adelante, cuando vayamos a implementar esto con Vercel, tendremos que configurar estas variables de entorno en Vercel para anular este archivo dotenv, porque realmente no deberíamos tener eso verificado en GitHub. También estamos configurando un par de otras variables de entorno. Debug, hablaremos de eso en un minuto. Y también hablaremos de esta próxima URI de GraphQL pública. Volveremos a eso. Ups, eso no es lo que quería. Quiero páginas GraphQL. Ok. Ahí es de donde vienen nuestras variables de entorno. Luego pasamos las definiciones de tipo y la instancia del controlador de Neo4j al constructor de Neo4j GraphQL. Y obtenemos un esquema ejecutable de GraphQL que pasamos a Apollo Server. También habilitamos el entorno de juego y nos aseguramos de habilitar la introspección de forma predeterminada en el modo de desarrollo. Estos están habilitados, creo que en producción están deshabilitados por defecto, el entorno de juego y la introspección, creo que están deshabilitados por razones de seguridad. Así que los estamos habilitando explícitamente. Luego definimos la función de inicio del servidor. La función de inicio del servidor, solo tenemos que iniciar nuestra instancia de Apollo Server antes de poder hacer referencia a ella en el controlador. Recuerda que esto se implementa como una función sin servidor. Entonces, esto se ve un poco diferente que la sintaxis que acabamos de ejecutar esto como una aplicación de nota regular con Apollo Server. Pero básicamente estamos definiendo la ruta que Apollo Server va a servir como nuestro punto final. Genial, ese es el código básico para nuestros puntos finales de GraphQL. Entonces, eso se ejecuta localmente como parte de nuestra aplicación de Next JS que se está ejecutando aquí. Viste una de las variables de entorno que configuramos fue debug. Y tenía un valor de Neo4j GraphQL: star, creo. Sí, así que ¿qué está pasando aquí? Bueno, esto habilita el modo de depuración en la biblioteca de Neo4j GraphQL, que podemos ver en la documentación.

22. Depuración y Traducción de Consultas

Short description:

Vamos a la documentación de la biblioteca Neo4j GraphQL y configuramos la variable de entorno de depuración para registrar toda la información de depuración. Podemos ejecutar una consulta GraphQL simple para recuperar el título de los primeros 10 artículos. La consulta se traduce en una consulta Cypher que se ejecuta en la base de datos para obtener los datos solicitados. La consulta Cypher coincide con los nodos de los artículos y devuelve los títulos de los artículos con orden y límite.

Vamos a la documentación de la biblioteca Neo4j GraphQL, a la cual he enlazado en las diapositivas, pero este es un buen documento de referencia para tener disponible. Específicamente en la sección de solución de problemas, donde hablamos sobre el registro de depuración al configurar esta variable de entorno. Entonces, si establecemos debug igual a Neo4j slash GraphQL colon star, eso registrará básicamente toda la información de depuración que se genera desde la biblioteca, que es lo que queremos. ¿Entonces, qué es esto? Bueno, ejecutemos una consulta GraphQL simple aquí. Vamos a devolver solo el título de los primeros 10 artículos. Cuando hagamos eso, si volvemos a nuestro código y miramos en la consola, podemos ver varias cosas que se registraron. Básicamente, está diciendo que, de una solicitud GraphQL entrante, aquí está la solicitud GraphQL, no hay variables GraphQL, no hemos habilitado la autenticación, por lo que no hay un token web JSON del que hablar. Y luego, esa GraphQL se traduce en esta consulta Cypher. Entonces, aquí puedes ver la consulta Cypher que se genera y se ejecuta en la base de datos para resolver los datos que solicitamos en GraphQL. Y aquí podemos ver lo que está sucediendo, estamos buscando nodos de artículos y luego hacemos una proyección donde solo devolvemos el título del artículo y luego hacemos nuestro orden y límite aquí.

23. Obtención de datos y configuración del front-end

Short description:

Ahora, si agregamos más campos, podemos ver que nuestra consulta Cypher generada es más complicada. Estamos devolviendo el título, la URL y los temas. Las consultas Cypher que generamos proyectan un solo objeto que coincide con los datos que espera nuestra API de GraphQL. En el front-end, tenemos un componente simple de artículos que obtiene datos utilizando el hook useQuery de Apollo Client. El componente mapea el array de artículos y muestra una lista de títulos de artículos vinculados a sus URL. Configuramos Next.js para trabajar con Apollo Client en el archivo _app.js, creando una instancia de Apollo Client y configurando la caché. El Apollo Provider envuelve el componente de la aplicación de nivel superior, lo que hace que la instancia de Apollo Client esté disponible para todos los componentes de la aplicación.

Ahora, si agregamos más campos, podemos ver que nuestra consulta Cypher generada es más complicada. Estamos devolviendo el título, la URL y los temas. Si ejecutamos esa consulta, ahora podemos ver que nuestra consulta Cypher generada es un poco más complicada. Esto se ve un poco diferente a las consultas que estábamos escribiendo anteriormente, pero porque se generan programáticamente utilizando una proyección de mapa y características de comprensión de patrones de Cypher, que normalmente es más fácil de escribir como un patrón de coincidencia largo en lugar de proyectar los patrones que deseamos devolver, pero eso también es válido en Cypher. Esa funcionalidad está inspirada en GraphQL y Cypher. De todos modos, aquí podemos ver que estamos devolviendo el título, la URL y, para los temas en el objeto que estamos devolviendo, aquí es donde estamos realizando la travesía desde el nodo de artículo resuelto actualmente para encontrar los nodos de temas a los que estamos conectados y devolver el nombre de esos temas. Entonces, las consultas Cypher que estamos generando proyectan básicamente un solo objeto que se devolverá y que coincide con los datos que nuestra API de GraphQL espera devolver. Genial.

Entonces, eso es el back-end, esa es nuestra ruta de API como una ruta de API en Next.js. Vimos que tenemos esta lista muy simple, si vamos a localhost:3000/articles, tenemos esta lista muy simple de artículos que estamos devolviendo, que se vinculan a algunos de nuestros datos de la API de New York Times. Así que echemos un vistazo ahora al front-end para este componente de artículos, cómo funciona. De acuerdo, ahora voy a ir a pages/articles.js, y este es un componente bastante simple, estamos importando el hook useQuery de React de Apollo Client. Entonces, Apollo Client tiene la funcionalidad para ver consultas y el tamaño, y tiene integraciones para muchos frameworks front-end diferentes. Estamos usando Next.js, que se basa en React, por lo que estamos usando la integración de Apollo Client para React, que creo que es como la integración predeterminada que obtienes. El hook useQuery nos permite básicamente definir y luego tenemos este hook disponible en nuestros componentes de React que podemos usar para trabajar con la obtención de datos. Esta es la forma más simple en la que podemos hacerlo, definiendo una consulta GraphQL. Aquí estamos, envolvemos esto en la etiqueta de plantilla GQL. Esta etiqueta de plantilla GQL proviene de la importación de Apollo Client también. Lo que hace esto es analizar nuestra consulta GraphQL. Y estamos buscando, ¿qué es esto, los 25 artículos más recientes y luego obteniendo el título, la URL y la fecha de publicación. Entonces, aquí está nuestro componente de React. No tenemos ninguna prop. Nuestros datos provienen de una llamada al hook useQuery y estamos pasando la consulta de artículo que definimos aquí. Esto va a nuestra API de GraphQL para obtener datos basados en esta consulta. Y luego este objeto de datos contendrá nuestros datos de resultado. También hay un estado de carga y un objeto de error también que podemos incluir aquí para verificar si actualmente se está cargando o si hay un error, pero no estamos manejando esos casos aquí. Solo estamos devolviendo una lista desordenada. Estamos mapeando los artículos. Entonces, esta consulta, así que podemos simplemente copiar esto, ejecutar esto en GraphQL Playground. Este es el objeto de datos con el que estamos trabajando en nuestro componente de React. Tenemos data.articles, y eso es una matriz de estos objetos de artículo donde tenemos título, URL y fecha de publicación. Entonces, mapeamos ese array de artículos y devolvemos un elemento de lista que es básicamente el título del artículo vinculado a la URL del artículo. Bastante simple, y eso es lo que muestra esta lista. Estos son los 25 artículos más recientes de nuestra API de GraphQL que proviene de Neo4j. Otra cosa que quiero mencionar mientras hablamos del aspecto de obtención de datos del front-end es cómo configuramos Next.js para trabajar con Apollo Client para obtener datos de GraphQL, y eso está en este archivo _app.js. Entonces, este archivo _app.js es como si necesitamos inyectar cosas en la jerarquía de componentes de nuestra aplicación, aquí es donde venimos a hacerlo y eso es exactamente lo que hemos hecho aquí. Estamos importando ApolloProvider, ApolloClient, InMemoryCache y HTTPLink de Apollo Client. Luego, esta función createApolloClient primero crea una nueva instancia de HTTPLink pasando una URI. Entonces, ¿qué es HTTPLink? Bueno, Apollo Client para la capa de red tiene este concepto de enlaces componibles. Puedes pensar en esto como algo así como un middleware donde puedo tener varios enlaces por los que pasa mi solicitud a través de múltiples procesamientos de middleware. En este caso, esto simplemente crea una conexión a nuestra URI de GraphQL, que especificamos como una variable de entorno. Y eso proviene de r.env.local. Entonces, nuestra URI de GraphQL pública siguiente es /API/GraphQL, que es donde se ejecuta nuestra ruta de API. La razón por la que esto es siguiente público es que esto no es una variable de entorno real porque este es código del cliente, ¿verdad? Entonces, este es código en el navegador donde no hay realmente un mismo concepto. Entonces, Next.js, vamos a ver la documentación para esto. Variables de entorno de Next.js. Vamos a saltar este enlace en el chat aquí. Esto habla sobre cómo podemos establecer valores en r.env.local y esos se establecen como variables de entorno y están disponibles para la obtención de datos en la ruta de API. Entonces, eso es lo que hicimos para establecer nuestras credenciales de conexión para Neo4j. Pero luego, para exponer variables de entorno al navegador, cualquier cosa que pongamos como next_public_ y eso básicamente se reescribe en el código que se envía al navegador. Entonces, nos permite usar la misma idea de variables de entorno aquí. Y esto está bien, podemos exponer esto. No importa realmente si el cliente sabe dónde estamos ejecutando nuestra API de GraphQL. Eso está perfectamente bien. Underscore AppJS, ahí vamos. Entonces, creamos un nuevo HTTPLink que básicamente le está diciendo a Apollo Client a qué puntos finales de GraphQL enviar solicitudes. Y luego, cuando creamos nuestra instancia de Apollo Client, también necesitamos crear una instancia de la caché. Aparte de tener integraciones realmente excelentes con frameworks front-end, otra cosa que Apollo Client hace por nosotros es mantener una caché. Entonces, si enviamos otra solicitud de GraphQL solicitando los mismos datos, los mismos objetos, en lugar de obtener esos datos nuevamente del servidor, podemos almacenarlos en nuestra aplicación cliente y esos datos se leen directamente de la caché. Por supuesto, podemos tener diferentes tipos y control sobre la implementación de la caché. El más simple es esta caché en memoria. Podría ser como leer de un clúster Redis o algo así. Entonces, aquí abajo, envolvemos el componente de la aplicación de nivel superior de nuestra aplicación Next.js con el proveedor de Apollo. Esta es la sintaxis del proveedor en React que nos permite inyectar cosas en la jerarquía de componentes de React utilizando lo que se llama la API de contexto. Aquí estamos inyectando nuestra instancia de Apollo Client. Entonces, ahora esa instancia de Apollo Client está disponible para cualquier componente en nuestra aplicación, por eso si miramos nuestro componente de artículos, esa instancia de Apollo Client está disponible para nuestro uso del gancho de consulta aquí. Por lo tanto, sabe exactamente a qué punto final gráfico nos referimos. No tenemos que configurar nuestros puntos finales gráficos en cada componente donde tenemos código de obtención de datos, lo cual es bastante agradable. De acuerdo.

Entonces, eso creo que es una buena mirada rápida al código aquí. Lo que queremos hacer a continuación es implementar esto para que en lugar de ejecutarse localmente en nuestras máquinas, viva en la nube.

24. Implementación de la aplicación en Vercel

Short description:

Vamos a implementar nuestra aplicación de pila completa, incluyendo el front-end y el punto final de la API de GraphQL, en Vercel. Vercel es una plataforma de implementación en la nube que se enfoca en la experiencia del desarrollador. Ofrece características como integraciones con GitHub, URL de vista previa para compartir aplicaciones en vivo y una CDN para publicar contenido estático. Vamos a conectar nuestro repositorio de GitHub a Vercel, configurar los ajustes del proyecto, establecer variables de entorno y observar la construcción del proyecto. Una vez que la implementación esté completa, tendremos URL para la versión de producción y cada implementación de vista previa. Luego discutiremos cómo agregar lógica personalizada a nuestra API. Sigamos estos pasos para implementar nuestra aplicación en Vercel.

Y para hacer eso, volvamos a nuestras diapositivas. Vamos a usar Vercel. Y para hacer eso, voy a usar mi herramienta de Vercel para decir que quiero usar Vercel. Vercel, lo considero como una plataforma de implementación en la nube para desarrolladores. Un gran enfoque de Vercel es la experiencia del desarrollador. No quiero ver eso, quiero ver la página de inicio. Así que creo que Vercel hace un buen trabajo al centrarse en la experiencia del desarrollador y básicamente nos da la capacidad de implementar aplicaciones con características como integraciones con GitHub. Obtenemos estas URL de vista previa realmente geniales. Básicamente, cada vez que conectamos una implementación a un repositorio de GitHub, cada vez que hay una solicitud de extracción, por ejemplo, o cambios en ese repositorio de GitHub, obtenemos una URL de vista previa donde podemos ver una versión completa y en funcionamiento de esa aplicación alojada en vivo para compartirla con nuestros compañeros y demás. Así que Vercel tiene una CDN a la que publica contenido estático. Funciona con funciones sin servidor para la importación de la API, acaba de anunciar una nueva funcionalidad de controlador de borde, que se ve muy bien. Así que me gusta Vercel para implementar este tipo de aplicaciones de pila completa, y eso es exactamente lo que vamos a hacer. Creo que esa es la única diapositiva que tenemos sobre Vercel. Oh, no, no lo es. Tenemos algunas diapositivas aquí. Así que lo que queremos hacer ahora es tomar nuestro repositorio de GitHub, el repositorio de GitHub que creamos a partir de ese repositorio de plantilla que es específico para ti, lo que vamos a hacer es implementarlo en Vercel, implementar nuestra aplicación de pila completa, el sencillo front-end, así como nuestro punto final de la API de GraphQL. Vamos a conectar nuestro repositorio de GitHub a Vercel, implementar eso para que podamos tenerlo en funcionamiento, y luego vamos a realizar algunas mejoras en nuestra aplicación tanto en el front-end como en el back-end, luego veremos esos cambios en Vercel. Aprovecharemos esa funcionalidad de vista previa de las implementaciones. Si ya tienes una cuenta de Vercel, iniciaremos sesión y agregaremos un nuevo proyecto de GitHub. Si no tienes una cuenta de Vercel, simplemente puedes iniciar sesión con GitHub. Hay un nivel gratuito, que está perfectamente bien. No necesitas ingresar una tarjeta de crédito. Al igual que Neo4j Aura, tenemos un nivel gratuito con el que trabajar. No necesitamos pensar en cuánto nos va a costar, lo cual es bastante agradable también para el desarrollo. Entonces, lo que vamos a hacer es iniciar sesión en Vercel y hacer clic en nuevo proyecto. Y si inicias sesión con GitHub, tu cuenta de GitHub se vincula automáticamente, creo. Si inicias sesión con otro método, es posible que debas vincular tu GitHub. Cuando inicias sesión en Vercel, simplemente uso la autorización de GitHub. Así que haremos clic en nuevo proyecto, y luego tenemos la opción de seleccionar qué repositorio de GitHub queremos importar. Por lo general, se ordena por los más actualizados, lo cual es bastante agradable. También tiene algunas plantillas que podemos clonar, lo cual también es genial para comenzar directamente. Luego veremos la pantalla para configurar nuestro proyecto. Hay un par de cosas que debemos configurar aquí. Vercel hace un buen trabajo al detectar qué marco estamos usando, pero como tenemos nuestra aplicación Next.js en un directorio en lugar de en el nivel superior, solo necesitamos indicarle ese directorio, y lo explicaré en un minuto, así que no te preocupes por prestar demasiada atención. Entonces, debemos decir qué directorio raíz queremos, que en nuestro caso se llama Next.js. Y luego debemos establecer algunas variables de entorno. Y estas, en realidad, supongo que, porque tenemos nuestro archivo .ENV verificado en GitHub para facilitarlo. Probablemente no necesitemos hacer este paso, pero en el mundo real, no tendríamos nuestro archivo .ENV verificado en GitHub, por lo que aquí especificaríamos esas variables de entorno. Luego podemos observar la construcción del proyecto, y cuando esté listo, tendremos una URL. Obtenemos un par de URL. Una es la URL del proyecto. Así que esa es como la versión de producción del proyecto, y obtenemos un certificado SSL. Así que funciona con HTTPS y todo eso, lo cual es muy agradable. Pero luego, cada implementación, recuerda, teníamos esta idea de implementación de vista previa, por lo que hacemos un cambio, por ejemplo, desde una solicitud de extracción en GitHub. No necesariamente queremos que eso sea inmediatamente la versión de producción, por lo que el dominio de producción puede apuntar a una implementación diferente, pero también obtenemos una URL específica para esa implementación que podemos compartir con nuestro equipo o con quien sea, si es un cliente a quien queremos enviar algo antes de enviar algo a producción, obtenemos una URL separada que es específica para esa implementación, lo cual es bastante genial. Genial, así que vamos a hacer eso, implementarlo, y luego vamos a hablar sobre cómo agregar lógica personalizada a nuestra API. Pero sigamos adelante y sigamos estos pasos, y luego haremos una pausa durante unos minutos para que todos tengan la oportunidad de hacerlo. Así que voy a ir a vercel.com, ya he iniciado sesión, pero supongo que ya terminé con GitHub, así que voy a hacer un nuevo proyecto. Y aquí están todos mis repositorios de GitHub. Quiero este que llamé GraphQL Galaxy, taller de pila completa o algo así. Permíteme hacer zoom, esto es un poco más grande. Entonces, el nombre del proyecto, oh, este nombre de proyecto no es bueno. Vamos a cambiar esto a pila completa GraphQL. Y luego esto va a ser Next.js. Si tuviera la aplicación Next.js en el nivel superior, no necesitaría hacer eso. Puede detectar que es la aplicación Next.js, pero la tenemos en el directorio Next.js. Así que necesito hacer clic en editar aquí para decirle que quiero implementar este proyecto en el archivo Next. Y luego va a decir, necesitas implementar este proyecto solo en el directorio Next.js. Esto significa que no va a implementar nada que no esté en ese directorio. La construcción y la configuración de salida, estas están bien. Podemos usar los valores predeterminados, pero necesitamos establecer nuestras variables de entorno. Entonces, el usuario de Neo4j va a ser news graph. Si no tuviéramos ese problema de AWSS y todos tuviéramos nuestras propias instancias privadas de Neo4j Aura, tendríamos múltiples instancias de Neo4j Aura, pero no tenemos eso ahora, está bien. Así que el usuario es news graph. Y nuevamente, no creo que esta parte sea realmente necesaria técnicamente porque tenemos nuestro archivo .ENV verificado, aunque es env.locals. Me da curiosidad si eso realmente se lee para una implementación de producción en Vercel. Supongo que lo descubriremos. Voy a agregar esto de todos modos. Entonces, el usuario de Neo4j, tenemos que neo4j password también es news graph. Y luego la URI de Neo4j es neo4j plus S dos puntos barra barra news.graph.zone.

25. Protocolo Neo4j y Conexión Segura

Short description:

El protocolo Neo4j, anteriormente conocido como bolts, ahora se simplifica a solo neo4j. El plus S indica una conexión segura y encriptada. Si no hay un certificado SSL, se utiliza neo4j dos puntos barra barra.

Entonces, el protocolo neo4j plus S dos puntos barra barra, esto es el protocolo neo4j para la web. Trabajando con instancias de neo4j, el protocolo neo4j, antes conocido como bolt, que es el protocolo binario llamado bolts para enviar datos hacia y desde neo4j. Ahora se llama neo4j para simplificar la forma de trabajar con un clúster. Cuando era bolts, había opciones de enrutamiento con bolts o una sola instancia si no tenías un clúster, pero ahora solo es neo4j, lo cual es mucho más fácil de entender. Pero el plus S significa que queremos una conexión segura y encriptada. Tenemos un certificado en esta instancia de neo4j en news.graph.zone y queremos asegurarnos de utilizar una conexión encriptada. Eso es lo que significa el plus S. Si no tenemos un certificado SSL para nuestra instancia de neo4j, simplemente usaríamos neo4j dos puntos barra barra. Por ejemplo, si estamos utilizando una instancia local o si estamos utilizando Neo4j Desktop o algo similar.

26. Agregando Lógica Personalizada con la Directiva de Esquema Cypher

Short description:

Desplegamos nuestra aplicación GraphQL y Next.js, configuramos variables de entorno y utilizamos la directiva de esquema Cypher para agregar lógica personalizada a nuestra API GraphQL. También podemos implementar resolvers personalizados, pero esto requiere más código y puede resultar en solicitudes anidadas. La directiva Cypher nos permite agregar consultas Cypher a nuestro esquema GraphQL, generando una sola consulta enviada a la base de datos. La directiva de esquema Cypher está disponible con la biblioteca Neo4j GraphQL y es una de varias directivas poderosas. Los argumentos de campo definidos en las definiciones de tipo GraphQL se pasan como parámetros Cypher. Esto nos permite devolver campos calculados y asignar nodos a tipos definidos en el esquema.

la siguiente GraphQL pública. ¿Cómo lo llamamos, la siguiente GraphQL pública URI. Creo que lo llamamos así. Vamos a ver en nuestro archivo ENV. La siguiente GraphQL pública URI es slash API slash GraphQL. Bien, voy a agregar esas variables de entorno y luego hacer el despliegue. Y ahora Vercel va a clonar ese repositorio, hacer una compilación de NPM y el contenido estático que se ha generado se enviará al CDN de Vercel. Los puntos finales de la API, así que teníamos, lo que teníamos slash hello, que era nuestro muy simple y nuestro punto final GraphQL se desplegará como una función sin servidor. Así que podemos echar un vistazo a los registros y ver cómo avanza eso. Una vez que esto esté hecho, entonces tendremos una URL única para nuestro proyecto. Hm. Si voy, mientras espero esto, si voy a mi equipo aquí para ver todos mis proyectos, ahí vamos, aquí está el estado de esto. Supongo que esto ya está hecho. Fullstack-graphQL.vercell.app. Ahí vamos. Bienvenido a Next.js. Si voy a slash articles, debería ver mi lista con viñetas de artículos. Sí, así que eso proviene del punto final GraphQL que se está ejecutando en slash API slash GraphQL. Justo aquí, genial. Así que hemos desplegado nuestra aplicación Next.js, tanto el punto final GraphQL del backend como el frontend también, lo cual es bastante bueno. Y, así que me detendré aquí por otros cinco minutos más o menos para dar a las personas la oportunidad de seguir esto. Así que inicia sesión en Vercel, crea un nuevo proyecto, importa el repositorio de GitHub que creaste a partir de la plantilla, configura esas variables de entorno, y básicamente usa lo que está en.env.local y luego haz clic en desplegar y deberías ver algo como esto. Y si vas a tu dominio slash articles, deberías ver la lista de artículos. Si vas a slash API slash GraphQL, deberías ver GraphQL Playground y puedes escribir algunas consultas GraphQL. Así que nos detendremos en esta diapositiva, supongo, durante cinco minutos y luego pasaremos a la sección final que será agregar recomendaciones de artículos. Así que necesitaremos agregar algo de lógica personalizada a nuestra API GraphQL y luego aprovechar esa funcionalidad en el frontend. Sigamos adelante, en aras del tiempo aquí para hablar sobre cómo agregar lógica personalizada. Entonces, lo que queremos hacer ahora es que tenemos la funcionalidad básica de consulta para obtener artículos pero sería bueno si en lugar de solo mostrar artículos, los artículos más recientes, pudiéramos decir sabes, estoy leyendo un artículo y me gustaría leer otros artículos similares. ¿Puedo recomendar artículos similares basados en el artículo que estás viendo actualmente? Así que queremos agregar esa funcionalidad tanto a la API como también queremos agregarla al frontend para obtener esos datos de la API y mostrarlos en el frontend. Pero para hacer eso primero necesitamos hablar un poco sobre cómo podemos agregar lógica personalizada a nuestra API GraphQL utilizaremos la directiva de esquema Cypher que mencionamos un poco antes pero realmente profundizaremos en el poder de esa directiva de esquema Cypher. Entonces, cuando estamos utilizando la biblioteca Neo4j GraphQL básicamente hay dos formas en las que podemos agregar lógica personalizada a nuestra API GraphQL. Podemos hacer esto utilizando la directiva de esquema Cypher GraphQL donde estamos anotando nuestro esquema GraphQL, agregando lógica personalizada básicamente mapeando una consulta Cypher a un campo en nuestro esquema GraphQL. Y cuando hacemos esto, el beneficio de esto es que se encarga de mucho código repetitivo que no tenemos que escribir, simplemente estamos agregando una consulta Cypher a nuestro esquema GraphQL. Ahora, aún estamos generando una sola consulta Cypher que se envía a la base de datos incluso con nuestra consulta de lógica personalizada, nuestra consulta se integra como una subconsulta en esa consulta generada de la base de datos. Y luego, otra opción para agregar lógica personalizada es implementar un resolver personalizado. Podemos anular los resolvers generados o podemos definir tipos que en realidad no existen en la base de datos y resolverlos usando resolvers personalizados. La desventaja de eso es que es un poco más de código que tenemos que escribir. Podemos hacer básicamente lo que queramos en ese resolver, podemos consultar Neo4j, podemos consultar otro sistema de base de datos, lo que sea que sea. Bueno, otra desventaja es que llamaremos a ese resolver de forma anidada. Primero enviaremos la consulta a la base de datos, luego llamaremos a este resolver que podría resultar en otra solicitud a la base de datos o a otra capa de datos. Así que es importante tener en cuenta las distinciones allí. Así que veamos esta directiva de esquema Cypher. Entonces, dijimos antes que las directivas de esquema son el mecanismo de extensión incorporado de GraphQL. Alguna indicación de que debe ocurrir alguna lógica personalizada. Cypher es una directiva de esquema disponible con la biblioteca Neo4j GraphQL. Hay bastantes, hasta ahora hemos visto exclude y relationship. Echemos un vistazo en la documentación a las otras directivas que están disponibles. Aquí vamos, directivas. Así que dejo un enlace a esta página en el chat. Podemos ver que tenemos bastantes directivas disponibles, cosas como agregar reglas de autorización, Cypher, que vamos a usar en un minuto aquí, exclude, que usamos. ID, que es útil para generar automáticamente IDs. La directiva de relación que vimos que usamos para codificar la dirección de la relación. Así que hay bastantes directivas que son bastante poderosas. Con Cypher, lo que hacemos es agregar la directiva Cypher y una declaración Cypher. En este caso, estamos devolviendo un escalar para un campo float. Así que el ejemplo de esto se refiere a las órdenes que pueden contener varios libros y estamos calculando la suma del precio de esos libros para obtener el subtotal, devolviendo un float. Luego, en el momento de la consulta al cliente de esta API GraphQL, no es obvio que este es un campo calculado, esto simplemente aparece como otro campo en el esquema de la API. También podemos devolver nodos desde nuestra consulta Cypher que se asignan a tipos que hemos definido en el esquema. Entonces, aquí hay un campo recomendado para un cliente que va a devolver libros en los que podrían estar interesados basados en los libros que este usuario ha ordenado y otros libros ordenados por usuarios. Básicamente, ¿qué usuarios están ordenando los mismos libros? ¿Qué otros libros están ordenando esos usuarios? Esos podrían ser buenas recomendaciones. Pero, ten en cuenta que estamos devolviendo, en este caso, REC, que es booknets. Y nuevamente, para los clientes de nuestra API, recomendado simplemente aparece como otro campo, en este caso, un campo de objeto. Cualquier argumento de campo que definamos en GraphQL y nuestras definiciones de tipo para el campo donde estamos usando la directiva cypher se pasan a la declaración cypher como parámetros cypher. Así que aquí en este campo recomendado, hemos agregado un argumento limit, que es un entero con un valor predeterminado de tres. Y cualquier valor que se pase por el usuario en el momento de la consulta, cualquier valor para limit que se pase como un parámetro cypher aquí con esta sintaxis de signo de dólar limit.

27. Uso de Parámetros y Proyecciones en Cypher

Short description:

Podemos utilizar valores predeterminados o campos requeridos para los parámetros en Cypher. Las consultas Cypher pueden devolver proyecciones de datos que pueden no existir en la base de datos, como datos de APIs externas. APOC es una biblioteca estándar para Cypher que permite diversas operaciones, incluyendo consultas a APIs externas y devolución de proyecciones de datos.

Así es como nos referimos a los parámetros en Cypher. Me gusta siempre utilizar valores predeterminados o hacer que estos campos sean requeridos, porque eso facilita el trabajo con Cypher si sabes que el valor ha sido definido para ese parámetro. Aquí estamos diciendo limit uno, solo devolvemos un libro. También podemos devolver proyecciones de estas consultas Cypher para devolver datos que pueden no existir en la base de datos. Así que aquí en este ejemplo, estamos llamando a otra API utilizando APOC load JSON, que es como la biblioteca estándar para Cypher que nos permite hacer muchas cosas. En este caso, estamos consultando una API externa y devolviendo un objeto que coincide con el tipo de clima que hemos definido. Ese tipo de clima no existe en la base de datos, pero podemos devolver una proyección de esos datos.

28. Agregando Recomendaciones de Artículos Similares

Short description:

Podemos usar la directiva cypher en los campos de consulta para crear un índice de texto completo en la base de datos para búsquedas difusas. Esto se puede utilizar para buscar títulos de libros, incluso si están mal escritos. La misma directiva se puede usar en los campos de mutación para lógica personalizada. Podemos escribir una consulta de recomendación para encontrar artículos similares basados en temas superpuestos. Al agregar esta consulta al tipo de artículo, podemos mostrar artículos similares para cada artículo. Comencemos yendo al navegador de Neo4j y escribiendo la consulta de recomendación. Luego la agregaremos a la API de GraphQL y actualizaremos los componentes de React de los artículos para mostrar los artículos similares.

Podemos usar la directiva cypher en los campos de consulta. Así que a nivel de raíz, un ejemplo que podría ser útil es para el índice de texto completo. Aquí podemos crear un índice de texto completo en la base de datos que nos permite realizar búsquedas difusas. Entonces, si buscamos 'graph' pero lo escribimos mal, agregamos esta tilde, esto es lo que hemos visto como un índice, lo hemos visto como un motor de texto. Esto nos permite realizar búsquedas difusas en la base de datos.

Bien, podemos usar eso en un campo de consulta para buscar títulos de libros utilizando este índice de búsqueda de texto completo difuso. Entonces, cuando estamos buscando libros, incluso si los escribimos mal, obtendremos los resultados que estamos buscando. Ahora también podemos usar esto en campos de mutación si tenemos alguna lógica personalizada. No hablamos mucho sobre las mutaciones que son generadas por la biblioteca Neo4j GraphQL. Pero si quieres crear algunas mutaciones específicas además de las generadas para nosotros, podemos hacerlo con directivas cypher. Para los resolutores personalizados, básicamente la forma en que funciona es que agregamos una directiva de ignorar en nuestro esquema que le dice a la biblioteca Neo4j GraphQL que no intentaremos recuperar estos datos como parte de la consulta cypher generada. Básicamente estás diciendo que estamos definiendo un resolutor, somos responsables de recuperar estos datos.

De acuerdo, genial. Aquí está nuestro último ejercicio. Nos quedan unos 12 minutos. Creo que eso debería ser suficiente tiempo. Entonces, lo que vamos a hacer en este ejercicio es usar la consulta de recomendación de artículos del primer ejercicio para agregar un campo similar en el tipo de artículo. Debido a que tuvimos ese problema con el aprovisionamiento de nuestras naranjas, en realidad omitimos la consulta de recomendación de artículos. Eso está bien, lo haremos. Básicamente, lo que queríamos hacer era escribir una consulta cypher que recomendaría artículos similares. Así que haremos eso, y luego tomaremos esa consulta cypher y la agregaremos a un campo similar en el tipo de artículo. Entonces, cuando resolvamos los artículos, podremos ver artículos similares basados en cómo definamos esos temas superpuestos, superposiciones de organizaciones, lo averiguaremos. Pero luego tendremos esa funcionalidad, esa lógica personalizada en nuestra API de GraphQL, y luego deberás actualizar los componentes de React de los artículos para agregar ese campo a nuestra recuperación de datos y mostrar eso al usuario. Entonces, para cada artículo, podrás ver otros artículos similares recomendados.

Entonces, comencemos yendo al navegador de Neo4j, ¿lo tengo abierto aquí? Aquí está. Y este es el news.graph.zone y el nombre de usuario y la contraseña son simplemente newsgraph, todo en minúsculas, newsgraph, newsgraph, algo así. Entonces, ¿cómo escribiríamos una consulta de recomendación? Bueno, comencemos simplemente obteniendo un artículo. Ok, aquí está, estamos diciendo que coincida con los artículos y luego con nos permite simplemente pasar las cosas o podemos hacer agregaciones, limitaciones, filtrado. Entonces vamos a pasar a través de un artículo. Aquí hay un artículo. Y ahora quiero escribir una consulta para encontrar artículos similares. Entonces, si estoy leyendo este artículo, ¿de qué se trata? Células de inmunidad en la médula ósea, algo sobre COVID, ¿de acuerdo? Entonces, ¿cómo encontraría artículos similares? Bueno, una forma sería mirar los temas de este artículo. ¿Cuáles son los temas de este artículo? Hagamos esto un poco más grande. Coronavirus, vacunación, anticuerpos, sistema inmunológico, ciencia, médula ósea. También podríamos mirar la organización, algo de Moderna, algún artículo de NATURE, y luego una foto. La foto no será útil, las fotos son específicas del artículo. Entonces, una forma en que podría definir la similitud sería, bueno, veamos los artículos que tienen un tema similar. Entonces, estás leyendo este artículo sobre médula ósea, ¿hay otros artículos sobre médula ósea? Oh, tal vez estés interesado en este artículo sobre, ¿qué es esto, alguna enfermedad que tenía Colin Powell que estaba en su médula ósea y tenía algo que ver con COVID? Puede que estés interesado en eso. Bueno, tenemos un montón de temas diferentes. Entonces, no queremos recomendar solo uno, queremos encontrar el artículo que tenga el mayor número de temas superpuestos y eso es lo que vamos a recomendar. Entonces, ¿cómo escribiríamos eso? Bueno, se vería algo así, coincidir con a y luego atravesar hacia afuera tiene tema. Este va a ser nuestro nodo de tema aquí. Y luego queremos atravesar hacia afuera a lo largo de la relación de entrada tiene tema hacia nuestros artículos recomendados. Entonces, aquí básicamente seguimos esta travesía desde el artículo que se resuelve hasta un tema, hasta otro artículo que es la recomendación. Pero en realidad es como el campo candidato para las recomendaciones. Esto puede ser un proceso de dos pasos, uno es obtener todos los candidatos para las recomendaciones, que básicamente son todos los artículos con temas superpuestos. Y luego necesitamos calificarlos. Así que vamos a pasar por las recomendaciones y luego vamos a hacer una agregación. Diremos contar estrella como num. ¿Qué está pasando aquí? Cypher tiene una funcionalidad implícita de agrupación incorporada. Si estás familiarizado con SQL y tienes agrupaciones explícitas en SQL, donde puedes hacer agregaciones agrupadas por algún valor, eso es implícito en Cypher. Usamos el comando with, que dijimos que es como un tubo, nos permite hacer agregaciones o limitaciones, ordenar, ese tipo de cosas. Entonces aquí, esto es como decirme un grupo implícito por REC. Para cada uno de estos artículos recomendados, porque vamos a tener un montón de estos, ¿verdad? Como vamos a tener un montón de artículos que tienen uno o más nodos de tema en común. Queremos calificar estos contando, decimos contar estrella, que es el número de caminos que hemos encontrado para el artículo específico. Entonces, esto básicamente cuenta el número de temas superpuestos del artículo, el único artículo que estamos resolviendo aquí, a nuestro artículo recomendado candidato. Ahora num es la puntuación esencialmente para nuestras recomendaciones. Entonces podemos devolver las recomendaciones ordenadas por num en orden descendente y limitarlas a 10. Si ejecutamos eso, obtenemos nuestros 10 artículos recomendados. Si los miramos, como en esta vista de tabla, tenemos células inmunológicas, refuerzos de COVID, variantes de comprensión científica. Estos son todos similares al artículo que estamos resolviendo, que era algo sobre médula ósea y vacunas. Ok, esto se ve bastante bien. Así que copiemos esta parte de nuestra consulta y volvamos a nuestro código aquí. Y voy a ir a mi código de API de GraphQL y en un artículo, voy a agregar, en realidad, hagámoslo como una extensión de tipo. Entonces voy a decir extender tipo artículo. Esta extensión de tipo simplemente facilita la lectura para que no tengamos un montón de campos apretados juntos. Normalmente usarías esto. Si tuviéramos esta parte en otro archivo, podríamos extender los tipos que existen en nuestro esquema. Pero lo voy a hacer aquí por legibilidad.

29. Mejorando las Recomendaciones de Artículos con GraphQL

Short description:

Agregamos el campo similar al tipo de artículo y lo convertimos en un campo de matriz de objetos de artículos. Utilizando la directiva de esquema Cypher, generamos una declaración Cypher para recuperar 10 artículos similares basados en temas superpuestos. Actualizamos nuestra implementación para incluir el nuevo campo y verificamos su presencia en la API de GraphQL. El siguiente paso es utilizar este campo en el componente React, lo cual dejaremos como ejercicio. Proporcionamos recursos como diapositivas, código en GitHub, documentación y la Academia de Grafos de Neo4j para seguir aprendiendo. También mencionamos una charla en la Conferencia GraphQL Galaxy que profundiza en los conceptos y beneficios de construir APIs de GraphQL con la biblioteca Neo4j GraphQL. A pesar del problema de DNS de AWS, animamos a todos a explorar Neo4j Aura y su aprovisionamiento de instancias. Gracias por unirse, esperamos verlos la próxima vez.

Entonces vamos a agregar el campo similar. Esto va a ser un campo de matriz de objetos de artículos. Vamos a agregar la directiva de esquema Cypher, que toma un único argumento, que es una declaración Cypher. Voy a pegar esto aquí. Y esto va a ser bastante similar a la consulta que escribimos en el navegador, excepto que necesitamos cambiar A por esto. Porque A aquí era porque coincidimos con un solo artículo al que nos referimos con la variable A. Aquí, esta es una palabra clave especial que se refiere al artículo actualmente resuelto. Esto nos dará 10 recomendaciones de artículos. Guardamos eso. Se recargará automáticamente, deberíamos poder ir a localhost:3000/api/graphql. Y ahora hagamos articles, options, limit. Vamos a obtener 10 artículos. Y para cada uno de estos artículos, quiero el título, los temas. Y ahora tengo similar. O también podemos obtener el título. En realidad, no necesitamos los temas. Hagamos esto un poco más fácil de leer. Entonces, 10 artículos, el título, y luego para cada uno de ellos, dame artículos similares y solo el título. Así es como terminamos. Para el primer artículo, inmunidad al coronavirus, aquí hay 10 artículos similares basados en el número de temas superpuestos. Aquí hay uno, otro artículo, el mejor momento del día para hacer ejercicio. Y aquí están los artículos similares, dieta baja en carbohidratos, colesterol, ejercicio, ejercicio, aceite de pescado. Estos son artículos relacionados con la salud. Parece que tenemos un algoritmo de recomendación bastante bueno aquí. ¿Qué voy a hacer a continuación? Ahora quiero actualizar mi implementación. Así que voy a ir a la terminal porque ahora solo lo estoy ejecutando localmente. Pero quiero compartir esto con mis compañeros de equipo también. Así que hagamos un GET status, veamos que hemos hecho algunos cambios aquí. Vamos a hacer GraphQL y diremos agregar campo similar en el tipo de artículo. Y lo subiremos a GitHub. Así que si voy a GitHub, puedo ver que he actualizado eso, vamos a mis repositorios. Sí, aquí está, GraphQL galaxy full stack, graphql workshop. Agregar campo similar en el tipo de artículo, aquí está la diferencia, solo agregando este campo de tubería aquí en el artículo. Pero si voy a Vercell, debería ver que Vercell ha recogido ese cambio y lo ha, oops, simplemente lo perdimos en el registro aquí si vamos a nuestras implementaciones. Aquí vamos. Así que aquí está nuestra primera implementación, nuestra confirmación inicial, y luego esto, así que Vercell recogió automáticamente esta confirmación y la promovió a producción. Así que ahora, si vas a full-stack-graphql-vercell.app y vamos a /api/graphql. Y ahora si miramos en la documentación del artículo, el artículo ahora tiene un campo similar. Porque lo subimos a la rama principal, Vercell lo recogió inmediatamente y lo promovió a producción. Si hubiéramos hecho una solicitud de extracción, Vercell habría hecho una compilación de vista previa y nos habría dado una URL de implementación específica de la implementación. Habría sido algo como esto, en lugar de solo el callejón sin salida. Y promoviéndolo a producción. Genial, eso es la mitad del ejercicio. El siguiente paso es ahora utilizar este campo en el componente React. Voy a dejar esta parte como ejercicio para que lo hagas en casa, ya que se nos acabó el tiempo aquí. Ya han pasado tres horas, pero solo para ver lo que haríamos, iríamos a pages/articles.js y actualizaríamos esta consulta para incluir el título y la URL similares para agregar el campo similar. Y luego aquí abajo, mientras iteramos a través de nuestra matriz de artículos y renderizamos elementos de lista, enlazando a artículos. Ahora, para cada artículo, luego iteraríamos a través de ese similar porque ese campo similar, también será una matriz de artículos, y haríamos algo como, artículos similares si estás interesado en esto o a otros les puede interesar. Pero dejaré esa parte como ejercicio para que lo hagas en casa, ya que nuevamente se nos acabó el tiempo. Muchas gracias por unirse hoy. Espero que todos disfruten de la Conferencia GraphQL Galaxy cuando comience mañana o no, el jueves, es el jueves. Aquí hay algunos recursos. Entonces, las diapositivas tienen todo el contenido de hoy. El código también está disponible en GitHub, he vinculado la documentación. También la página de inicio de la biblioteca Neo4j GraphQL tiene una buena explicación de muchas de las diferentes características y enlaces a otros recursos. Hay un curso autoconsumible centrado solo en la biblioteca Neo4j GraphQL que aborda muchas de las diferentes características, incluida la autorización. Entonces, si estás interesado en aprender más sobre la biblioteca Neo4j GraphQL u otros cursos de Neo4j, echa un vistazo, se llama Neo4j Graph Academy. En las diapositivas dejé algunas secciones del otro taller que hicimos sobre autorización porque creo que es el siguiente paso cuando estás construyendo una aplicación, cómo proteger los recursos en mi API. Y hay algunas características de autorización realmente interesantes incorporadas en la biblioteca Neo4j GraphQL. Así que dejé eso en las diapositivas si quieres hacer clic o también los cubrimos en el entrenamiento que hicimos la semana pasada. Tengo una charla en GraphQL Galaxy. Creo que es el jueves en la pista de la Vía Láctea. Oh sí, aquí está a las 10.15, 10.15 mi hora. Así que a las 10.15 hora de la montaña. Poniendo el Grafo en GraphQL con la biblioteca Neo4j GraphQL. Así que profundizando en muchos de los conceptos que hablamos hoy, pero echando un vistazo a algunas de las motivaciones y características más específicas y algunos de los beneficios que tenemos cuando construimos APIs de GraphQL con la biblioteca Neo4j GraphQL. Bueno, genial, se nos pasó el tiempo. Así que lo dejaremos aquí, las diapositivas y todo el código y esa instancia de Neo4j que ejecutamos hoy es pública y permanecerá allí. Siéntete libre de usarlos como recursos y echa un vistazo a Neo4j Aura. Lo siento, tuvimos ese problema de DNS de AWS que nos impidió usarlo, pero esas instancias se aprovisionarán una vez que se resuelva ese problema de DNS con AWS. Puede que ya esté resuelto, tal vez no. Esperemos que se resuelva más tarde hoy. De todos modos, muchas gracias por unirse. Espero que todos disfruten el resto de la conferencia y nos vemos la próxima vez. ¡Saludos, adiós!

Watch more workshops on topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.