Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel

Rate this content
Bookmark

In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura

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

FAQ

The primary objective of the workshop is to build a full-stack application using JavaScript, including creating a GraphQL server, working with a Neo4j database, building a Next.js React application, and deploying it to the cloud using Vercel.

Neo4j AuraDB is a hosted version of the Neo4j graph database in the cloud. It allows users to quickly spin up private Neo4j instances without needing a credit card or incurring fees, especially when using the free tier.

The workshop uses JavaScript, GraphQL, Neo4j AuraDB, Next.js, React, Vercel, GitHub, and the Neo4j GraphQL library.

The application is deployed to the cloud using Vercel. Vercel allows for easy deployment with a focus on developer experience, providing features like automatic previews for every commit and pull request, and seamless integration with GitHub.

The workshop uses real-world data from the New York Times API, specifically focusing on news articles. The data includes articles, topics, authors, organizations, geographic regions, and photos.

Cypher is a query language designed for working with graph data in Neo4j. It allows users to create and query graph structures efficiently, similar to how SQL is used for relational databases.

The Neo4j GraphQL library is a Node.js library that simplifies building GraphQL APIs backed by the Neo4j database. It auto-generates GraphQL resolvers and translates GraphQL queries into optimized Cypher queries for efficient data retrieval.

The Cypher schema directive is a feature in the Neo4j GraphQL library that allows developers to attach custom Cypher queries to GraphQL fields. This enables the inclusion of custom logic directly within the GraphQL schema.

Next.js is used to build both the front-end and back-end of the application. It provides server-side rendering, file-based routing, and API routes, allowing the creation of a full-stack application within a single framework.

Vercel is crucial for deploying the full-stack application. It offers seamless integration with GitHub, automatic SSL certification, preview URLs for pull requests, and deployment of serverless functions, enhancing the overall developer experience.

William Lyon
William Lyon
161 min
07 Dec, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Workshop covered various topics related to building a full stack news article application using Neo4j AuraDB, GraphQL, and Next.js. It discussed graph data models, traversing graphs, and building GraphQL APIs backed by Neo4j. The Neo4j GraphQL library was highlighted for its ability to generate resolver functions and optimize database queries. The Workshop also covered Next.js and deploying the application to Vercel. Custom logic was added to the GraphQL API using the Cypher-GraphQL-Schema directive.

1. Getting Started with Neo4j AuraDB

Short description:

In this part, we will get started with Neo4j AuraDB and build a full stack news article application using GraphQL and Next.js. We will cover how to handle data fetching with GraphQL in a React app and specifically with Next.js. We'll start off in Neo4j Aura, import some data on news articles, and use the query language Cypher to work with the data. Then, we'll build GraphQL APIs backed by Neo4j using the Neo4j GraphQL library. Finally, we'll run our GraphQL server in Next.js and deploy the application to Vercel.

All right, let's get started. You know this is a JavaScript course, so it's been around for a little over a hundred years. But here, we're gonna go into a couple of points that ought to help you understand where you need to get started. First of all, it takes a lot of effort to type into the language itself. We're gonna talk a little bit about catalogs and figure that out pretty quickly here, but before that, let's talk about the JavaScript language.

So, make it simple, and learn things about Graph technology. So, here's kind of the rough outline for today. So, the goal of today is to build a full stack application, including building the GraphQL server, working with the database, building a Next.js React application that queries our GraphQL API, and then we're going to deploy that to the cloud with Versal. So, we'll be using a Neo4j AuraDB, as we said that Neo4j is a Graph database, Neo4j Aura and AuraDB is like a hosted Neo4j in the cloud, so it allows us to spin up Neo4j instances in the cloud that are private to us. We're gonna use the free tier of Neo4j Aura, so we don't need to have a credit card or incur any fees or anything like that. We will be using GitHub, so you should have a GitHub account. And then we'll be using Vercell to deploy our application. Vercell also has a free tier, so we just need to create a Vercell account.

So, we're gonna start off talking about Neo4j and getting started with Neo4j AuraDB. So, we're going to work with some data about news articles. We're gonna build a full stack news article application using GraphQL and Next.js. We're not gonna focus so much on front end design, we're mostly gonna focus on how the pieces fit together. But we will, we will cover how to handle data fetching with GraphQL in a React app and specifically with Next.js. Cool, so that's, yeah, that's kind of the order we're gonna go in, starting with Neo4j. We'll start off in Neo4j Aura, we'll import some data on news articles, we'll see how to use a query language called Cypher to work with the data, including things like, can we recommend similar articles, the sort of thing, recommendation personalization queries. Then we're going to see how to build GraphQL APIs backed by Neo4j, so we're gonna build a GraphQL API using the Neo4j GraphQL library, which is a Node.js library. We will see how to actually run our GraphQL server in Next.js, so for Next.js, we're gonna use Next.js both for the backend, the API routes functionality, and then also for the front-end React application. Then we will deploy our application to Vercel, so both the front-end React app and our GraphQL API will be deployed as server-less functions.

2. Deploying to Vercel and Introduction to Neo4j

Short description:

We will deploy our application to Vercel and make it interactive and hands-on. We'll have hands-on exercise segments and provide starting code. Let's talk about Neo4j and Neo4j Aura DB. The workshop is scheduled for three hours, and we'll see how it goes.

Then we will deploy our application to Vercel, so both the front-end React app and our GraphQL API will be deployed as server-less functions. Cool, so let's get started. I do want this to be as interactive and as hands-on as we can, so as we go through this, if you have questions and comments, drop it in the chat and I'll definitely address those as we move along. You'll also see this hands-on exercise icon, so definitely want this to be hands-on, so there will be, oh, I think we have five or six, so sort of hands-on exercise segments where we're gonna work through some exercises together as we build up our application.

Not gonna start from scratch, we'll have some starting code to help us along, but yeah, try to make this as hands-on as possible. So definitely ask questions in the chat, let us know how things are going. And when you see this hands-on exercise icon in the slides, that means we're gonna spend a few minutes working on something together.

Great. So to get started, let's talk a bit about Neo4j and Neo4j Ora DB. I guess we should also talk about the time here. So this is scheduled I think as a three-hour workshop. We haven't done this one before. This is kind of new. So we will play it by ear. I think three hours will probably be good, but we certainly won't go over. Not sure if we'll finish early.