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.

Watch more workshops on topic

Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
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
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
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.
AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced 2022React Advanced 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
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 for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
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.

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

Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
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.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with 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.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
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.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
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: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
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.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
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.