The GRAND dilemma

a guide to setting up the GRAND stack with Typescript.

Background

I ventured out to build a social media grapher using Neo4J and GraphQL. This is when I came across the GRAND stack. Getting started with Neo4J was fairly simple, but making Neo4j work with React, GraphQL and Typescript was a different story.

I hope this article helps those interested in the GRAND stack and makes their setup process a little bit easier. I have a fully working project on my Github (here) that you’re welcome to look at for reference.

Technologies

1. GraphQL + Apollo
2. Express JS
3. React JS
4. Neo4j
5. Neovis (neo4J client visualizer)
6. Typescript
7. Webpack

Typescript Configuration

The most challenging part of setting up the server, was the limited documentation on using GRAND with Typescript. Especially the web-pack settings. These are my final settings:

webpack.config.js

as you can see, I have some environment variables that I’m using in the front end for Neo4J. You’ll also need a tsconfig file.

tsconfig.json

The settings above are a combination of trial and error, and using what other people have done in the past, but they cover all the bases.

Server Configuration

For my server, I used Apollo server, GraphQL, Express and Neo4J driver. There are countless tutorials on how to set up GraphQL with Neo4j but I found two libraries to be the most useful.

1. neo4j-graphql-js
2. apollo-server-express

Here’s why, I wanted to create a basic model that had tweets and users. Users would be connected to tweets and vice versa. By using makeAugmentedSchema from neo4j-graphql-js, I was able to autogenerate resolvers on my GraphQL schema.

GraphQL schema

By defining my schema like this, I had access to queries and mutations like:

1. Fetch users
2. Fetch tweets
3. Add user to tweets
4. Add tweet to users
5. Get user tweets

All of this without writing a single additional resolver. This made the relationship between GraphQL and Neo4j much more interesting to me. The rest of the process is pretty straight forward if you have used Apollo before.

React

We’ve covered the G, the A and the ND (Neo4J Database) of GRAND, but we can’t forget about the R. Which is after all, all that matters to our users. To visualize my Neo4j backend, I used a library called Neovis, which of course was not optimized for use with React.

But before I could show something, I had to create some data. I made a simple form that an user can enter their name in, as well as a tweet. I would then make a mutation that would store that data in my Neo4j database.

Social Grapher UI

Because of those ‘magic’ methods created by our backend library, we can easily create users and tweets and assign them to each other. Here’s an example of a mutation I used to create a new tweet and assign it to a user.

new tweet mutation

Both CreateTweet and AddUserTweets were autogenerated for me by our Neo4j-GraphQL libraries.

Summary

The biggest challenge was to setup all of this AND use Typescript with it. I love the stack and hope to use it again in the future. The potential is immense, even for a small project like mine, I can’t think of another stack that combines graph databases and queries as well as the GRAND stack does.

Neo4j visualization in React

As I mentioned earlier, I have a fully working example on my Github. Thank you for reading and happy coding!