10 Things We Learned In Full Stack GraphQL Book Club
Tags: graphql, fullstack, neo4j
Published: 2023-02-27 15:43:00

---
title: 10 Things We Learned In Full Stack GraphQL Book Club
published: true
description: 
tags: GraphQL, Fullstack, Neo4j
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9xj0oda5n79m3p8olr3.png
published_at: 2023-02-27 15:43 +0000
---
My colleague [Alex](https://twitter.com/alexandererdl) and I just wrapped up the [Full Stack GraphQL Book Club livestream series](https://www.youtube.com/playlist?list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn) so I thought now would be a good time to share some of the main takeaways and things we learned about building full stack applications with GraphQL.

[![Full Stack GraphQL Applications](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sk8sjwz8489pje3rpyy.jpg)](https://neo4j.com/fullstack-graphql-applications-react-nodejs-neo4j/)

When my book [Full Stack GraphQL Applications](https://neo4j.com/fullstack-graphql-applications-react-nodejs-neo4j/) was published I thought it would be fun to organize a book club of sorts - a series of livestream episodes where each episode we review a chapter of the book and work through the end of chapter exercises. 

![Full Stack GraphQL book club table of contents](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00ot5jvp5pr6xe1t0cal.png)

[Full Stack GraphQL Applications](https://dev.neo4j.com/graphql-book) is all about how to build web applications using GraphQL, React, Apollo, and Neo4j Database - the so called GRANDstack. The book is designed to show full stack developers how they can leverage the benefits of GraphQL including GraphQL database integrations like the [Neo4j GraphQL Library](https://neo4j.com/product/graphql-library/), cloud services like Netlify, AWS Lambda, Auth0, and [Neo4j AuraDB](https://dev.neo4j.com/neo4j-aura). 

Below for each chapter we'll take a look at the major points from each chapter plus one interesting thing we learned during the livestream.

## Chapter 1: What Is Full Stack GraphQL?

{% embed https://www.youtube.com/watch?v=P6hXgvcuspg&list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn&index=1 %}

Chapter one introduces a mental model of full stack GraphQL. Using an example of a movies search web application we explore the components of a full stack GraphQL application by tracing a GraphQL request from client to database and back.

![Components of a full stack GraphQL Application: GraphQL, React, Apollo, and Neo4j Database - the GRANDstack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvhy5o07kvzfrpqzsidp.png)

*What we learned during book club*
There isn't just one right set of components that make up a Full Stack GraphQL application. For example, we could be building a native iOS app written in Swift that leverages the Swift GraphQL client instead of a React application or perhaps using GraphQL Yoga instead of Apollo Server - it's more important to understand the concepts of how the pieces fit together and then you'll be better able to understand the tradeoffs of choosing different components of the stack.

## Chapter 2: Graph Thinking With GraphQL

{% embed https://www.youtube.com/watch?v=8uXLEG3qOIs&list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn&index=2 %}

The typical approach to building GraphQL APIs starts with writing GraphQL type definitions that define the data available in the API. Then we create resolver functions with the logic for interacting with our data layer to "resolve" our data.

![Graph thinking with GraphQL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zaust729twttu2hneosf.png)

*What we learned during book club*
The N+1 query problem becomes apparent for all but the simplest GraphQL APIs. Multiple round trip requests to the data layer for each GraphQL request can become a big performance bottleneck. Fortunately, GraphQL database integrations like the [Neo4j GraphQL Library](https://neo4j.com/product/graphql-library/) address the N+1 query problem by generating a single database query for each GraphQL operation.

## Chapter 3: Graphs In The Database

{% embed https://www.youtube.com/watch?v=yI3PYW-MVvQ&list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn&index=3 %}

Graph databases like Neo4j allow developers to model, store, and query data as a graph: node and relationships that connect nodes. We use the Cypher query language for working with data in Neo4j. Cypher is all about graph pattern matching.

![Graphs in the database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y29jlmxtg67c8e6v8z5.png)

*What we learned during book club*
The Cypher query language allows us to define complex graph patterns using ASCII-art like notation representing paths in the graph.

## Chapter 4: The Neo4j GraphQL Library

{% embed https://www.youtube.com/watch?v=jilGjRLuKYE&list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn&index=4 %}

The Neo4j GraphQL Library allow us to build fully functional GraphQL APIs backed by the Neo4j graph database by generating database queries from arbitrary GraphQL requests.

![The Neo4j GraphQL Library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27kiho4ymuudm9lwwx6v.png)

*What we learned during book club*
The most powerful feature of the Neo4j GraphQL Library is the [`@cypher` schema directive](https://neo4j.com/docs/graphql-manual/current/type-definitions/cypher/) for adding custom logic to our GraphQL API using the Cypher query language.

## Chapter 5: Building User Interfaces With React

{% embed https://www.youtube.com/watch?v=Wwm8KBkGCrc&list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn&index=5 %}

React.js a JavaScript library for building user interfaces. Starting with the `create-react-app` CLI we see how to create and compose React components to build user interfaces and how to work with data in a React app.

![Using React state variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmzk6nq1mhua0vv8yoli.png)

*What we learned during book club*
Understanding how to work with state variables is an important concept in React. State variables are updated using "hooks" - or functions for hooking into React state and lifecycle features.

## Chapter 6: Client Side GraphQL With Apollo Client

{% embed https://www.youtube.com/watch?v=uPYDtfNjzWA&list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn&index=6 %}

The React integration of Apollo Client introduces a handful of React "hook" functions for interacting with our GraphQL. The `useQuery` and `useMutation` functions are the most common React hooks for querying our GraphQL API.

![Using apollo client for managing local application state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9hofx7ov7r978l7yn0y.png)

*What we learned during book club*
We can also use Apollo Client to manage local application state with the `@client` GraphQL query directive. This can simplify data management code in our React application by using Apollo Client and the GraphQL schema as the single source of application data and state.

## Chapter 7: Adding Authentication and Authorization

{% embed https://www.youtube.com/watch?v=WrWbGml-7x8&list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn&index=7 %}

We can declaratively define authorization rules with the [`@auth` directive](https://neo4j.com/docs/graphql-manual/current/auth/) when using the Neo4j GraphQL Library. We use JSON Web Tokens (JWTs) to encode user identity and implement sign-in functionality with the Auth0 React SDK.

![Using a bind authorization rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gyqejyrabu62no64tq5.png)

*What we learned during book club*
JSON Web Token (JWT) is a standard for identity and access management that means we can implement user auth flow ourselves or choose to integrate with a managed auth service like Auth0.

## Chapter 8: Deploying Our Full Stack GraphQL Application

{% embed https://www.youtube.com/watch?v=rPlYywoN1EE&list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn&index=8 %}

Evaluating managed cloud services and how they work together to choose the best deployment options for our full stack GraphQL application. We use Netlify, GitHub, Auth0, AWS Lambda and Neo4j AuraDB.

![A full stack GraphQL deployment from the developer's perspective](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7cj97qao45629v4zsa7.png)

*What we learned during book club*
Be sure to evaluate deployment options from the perspective of the developer as well as the user. We can deploy our GraphQL API as a serverless function. The Netlify platform can integrate with GitHub to deploy preview builds. We also learn about graph data visualization with Neo4j Bloom and Neo4j AuraDB.

## Chapter 9: Advanced GraphQL Considerations

{% embed https://www.youtube.com/watch?v=d1YvtXB1eK0&list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn&index=9 %}

GraphQL abstract types (unions and interfaces), Relay-style pagination, and working with relationship properties.

![Graph data model using relationship properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbpn534rx4o963u347t5.png)

*What we learned during book club*
Union types can be useful for representing search results when the concrete types do not necessarily share any common fields.

## Takeaway #10: Bonus: Low Code GraphQL With The Neo4j GraphQL Toolbox

![The Neo4j GraphQL Toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2bcmg8yc82rt6fepybe.png)

Being able to focus on the key parts of designing your GraphQL API can be a huge advantage for prototyping and getting new projects up and running quickly. The Neo4j GraphQL Toolbox is a low code web-based tool for building, testing, and exploring GraphQL APIs with the Neo4j GraphQL Library. Give it a try at [graphql-toolbox.neo4j.io](https://graphql-toolbox.neo4j.io/)

### Download Your Free Copy of Full Stack GraphQL Applications

[![Full Stack GraphQL Applications](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sk8sjwz8489pje3rpyy.jpg)](https://neo4j.com/fullstack-graphql-applications-react-nodejs-neo4j/)

Thanks to Neo4j for sponsoring my book it is available for free download at [dev.neo4j.com/graphql-book](https://dev.neo4j.com/graphql-book). You can find the recording of the book club livestreams on the [Neo4j YouTube channel.](https://www.youtube.com/playlist?list=PL9Hl4pk2FsvVg3c74thYEWVsCPPVB1qqn)