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

FAQ

Neo4j AuraDB es una versión alojada en la nube de Neo4j, una base de datos de grafos. Permite crear instancias de Neo4j en la nube que son privadas y no requieren tarjeta de crédito ni incurrir en cargos para el nivel gratuito.

Para comenzar con Neo4j AuraDB, primero debe acceder al enlace de Neo4j Aura, registrarse y crear una nueva instancia gratuita de AuraDB. Durante el proceso, se generará una contraseña aleatoria que debe guardar, ya que la necesitará para futuros accesos.

GraphQL es un lenguaje de consulta para APIs que permite a los usuarios pedir exactamente lo que necesitan y nada más, lo que hace que las integraciones con clientes sean más eficientes. En este proyecto, se utiliza GraphQL para construir y consultar la API que gestiona los datos de los artículos de noticias.

Vercel es una plataforma de despliegue en la nube que ofrece integraciones con GitHub para desplegar automáticamente aplicaciones cuando se actualizan los repositorios. Es ideal para desplegar aplicaciones de Next.js como se demostró en el proyecto, donde se utiliza para servir tanto el frontend como la API de GraphQL.

La recomendación de artículos se implementa usando una consulta Cypher en Neo4j, que identifica artículos con temas superpuestos al artículo actual. Esta consulta se integra en la API GraphQL mediante una directiva de esquema, permitiendo que los clientes de la API obtengan recomendaciones directamente al consultar un artículo.

El navegador Neo4j es una interfaz gráfica de usuario para trabajar con Neo4j. Permite a los usuarios escribir y ejecutar consultas Cypher, visualizar los resultados de estas consultas en forma gráfica, y explorar visualmente las estructuras de datos en la base de datos de grafos.

William Lyon
William Lyon
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.

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.

Watch more workshops on topic

Construir con SvelteKit y GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Construir con SvelteKit y GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
¿Alguna vez has pensado en construir algo que no requiera mucho código de plantilla con un tamaño de paquete pequeño? En esta masterclass, Scott Spence irá desde el hola mundo hasta cubrir el enrutamiento y el uso de endpoints en SvelteKit. Configurarás una API de GraphQL en el backend y luego usarás consultas de GraphQL con SvelteKit para mostrar los datos de la API de GraphQL. Construirás un proyecto rápido y seguro que utiliza las características de SvelteKit, y luego lo desplegarás como un sitio completamente estático. Este curso es para los curiosos de Svelte que no han tenido una experiencia extensa con SvelteKit y quieren una comprensión más profunda de cómo usarlo en aplicaciones prácticas.

Tabla de contenidos:
- Inicio e introducción a Svelte
- Inicializar el proyecto frontend
- Recorrido por el proyecto esqueleto de SvelteKit
- Configurar el proyecto backend
- Consultar datos con GraphQL
- Recuperación de datos en el frontend con GraphQL
- Estilización
- Directivas de Svelte
- Enrutamiento en SvelteKit
- Endpoints en SvelteKit
- Despliegue en Netlify
- Navegación
- Mutaciones en GraphCMS
- Envío de mutaciones GraphQL a través de SvelteKit
- Preguntas y respuestas
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
En este masterclass, obtendrás una visión de primera mano de lo que es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React.
Prerrequisitos: - Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) utilizar VS Code para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript
GraphQL para Desarrolladores de React
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL para Desarrolladores de React
Featured Workshop
Roy Derks
Roy Derks
Hay muchas ventajas en utilizar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la obtención de datos y la gestión del estado, sino que también obtendrás una mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión

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

Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Concurrent React y Server Components están cambiando la forma en que pensamos sobre el enrutamiento, la renderización y la obtención de datos en las aplicaciones web. Next.js recientemente compartió parte de su visión para ayudar a los desarrolladores a adoptar estas nuevas características de React y aprovechar los beneficios que desbloquean.En esta charla, exploraremos el pasado, presente y futuro del enrutamiento en las aplicaciones de front-end y discutiremos cómo las nuevas características en React y Next.js pueden ayudarnos a arquitectar aplicaciones más eficientes y con más funciones.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Todos amamos GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡No más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, verás lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas Redwood Easy!
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
¿Cuántas veces has implementado el mismo flujo en tu aplicación: verificar si los datos ya se han obtenido del servidor, si es así - renderizar los datos, si no - obtener estos datos y luego renderizarlos? Creo que lo he hecho más de diez veces yo mismo y he visto la pregunta sobre este flujo más de cincuenta veces. Desafortunadamente, nuestra biblioteca de gestión de estado predeterminada, Vuex, no proporciona ninguna solución para esto.Para la aplicación basada en GraphQL, había una alternativa para usar el cliente Apollo que proporcionaba herramientas para trabajar con la caché. Pero, ¿qué pasa si usas REST? Afortunadamente, ahora tenemos una alternativa de Vue a una biblioteca de react-query que proporciona una buena solución para trabajar con la caché del servidor. En esta charla, explicaré la distinción entre el estado de la aplicación local y la caché del servidor local y haré algo de codificación en vivo para mostrar cómo trabajar con este último.
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
Top Content
¿Cansado de reconstruir tu marco de trabajo web basado en React desde cero para cada nuevo proyecto? ¡Estás de suerte! RedwoodJS es un marco de aplicación web de pila completa (piensa en Rails pero para desarrolladores JS/TS) basado en React, Apollo GraphQL y Prisma 2. Nosotros hacemos el trabajo de integración pesada para que tú no tengas que hacerlo. También integramos de manera hermosa Jest y Storybook, y ofrecemos soluciones incorporadas para la obtención de datos declarativa, autenticación, pre-renderizado, registro, a11y y mucho más. Despliega en Netlify, Vercel, o vuelve a la vieja escuela en AWS o metal desnudo. En esta charla aprenderás sobre la arquitectura de RedwoodJS, verás las características principales en acción, y te irás con una sensación de asombro y admiración en tu corazón.
El Nuevo Enrutador de Aplicaciones de Next.js
React Summit 2023React Summit 2023
27 min
El Nuevo Enrutador de Aplicaciones de Next.js
Next.js 13.4 lanzó recientemente la versión estable del "Enrutador de Aplicaciones" - un cambio transformador para el núcleo del framework. En esta charla, compartiré por qué hicimos este cambio, los conceptos clave que debes conocer y por qué estoy emocionado por el futuro de React.