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

This workshop has been presented at GraphQL Galaxy 2021, check out the latest edition of this Tech Conference.

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.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
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.

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
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
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
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
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
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
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
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.