What is the GRANDstack?

Last time we looked a bit at neo4j and the benefits of using it together with GraphQL and I briefly mentioned a little thing called the GRAND stack and promised to get more into its details later. So this time let's go deeper and check out what using not two but four technologies together can do for us. The GRAND stack is a full-stack framework for making GraphQL apps, a combination of four technologies which make up the acronym:

GraphQL, React, Apollo and Neo4j Database.

For those curious, yes you can substitute React for another framework like Vue or Angular if that’s your preference, but that would make it a GVAND or GAAND stack which isn't nearly as catchy so bear that in mind.

G for GraphQL

If you’re here you probably know a bit about GraphQL already so let’s get to why GraphQL is used here. Its Schema Definition Language is language agnostic which makes it perspect for interacting with other technologies (like the ones in the stack) and more importantly its namesake graph aspect plays really well into the fact neo4j is a graph database and that means its graphs all the way down from start to finish. To summarize:

• data layer agnostic, GraphQL can be used with any data source
• no under or overfetching, querying with GraphQL gets you exactly and only the data you asked for
• graphs all the way down, all data is handled as a graph and since its data source agnostic you can use this to integrate data from different sources in a transparent and organized way
• introspection, you can ask a GraphQL API for the queries it supports which makes creating documentation a lot easier if not automatic with certain tools like SpectaQL

R for React

React is a component based JavaScript library used for creating User Interfaces. Here it is used for the frontend and handles requests and responses via the Apollo Client React integration, sending them to and receiving them from the GraphQL server. Since React uses components for data handling and UI purposes you can use some component library to get a bunch of popular and ready to use components instead of creating them yourself.

Source: react.dev

A for Apollo

Apollo is a powerful tool which basically focuses on making using GraphQL easier on the side of the client and the server. Apollo Client is a client-side JavaScript library for querying the GraphQL API from the app, it handles interactions with the React frontend. Apollo Server provides a GraphQL Server and is used for the backend handling HTTP requests and responses, the GraphQL operation and schema and all the data. Despite its many shortcomings, Apollo still seems to be the most popular GraphQL client.

Source: apollographql.com

ND for Neo4j Database

Neo4j is the key fit here because it's a graph database so it's made specifically for handling graph data and complex graph traversals which is exactly what we have with GraphQL and its queries. This also means we’re able to maintain the same data model throughout the entire stack. Now if you’ve read my last piece about Neo4j you’re probably thinking about having to learn Cypher. The good news is you don't have to do it straight away thanks to the neo4j-graphql.js package. It handles building basic mutations for you and it also solves the n+1 query problem as well by translating GraphQL queries to a single Cypher query.

Source: neo4j.com/

Not all roses

You could say it's called grand for a reason as you will have to learn Cypher to fully grasp the GRAND stack and that can take a while, especially if you haven't dealt with it before. It is a lot of work and that can be a turnoff, but if you do it's probably worth it just for the neo4j graph database, never mind the whole stack so if you’re already working with GraphQL that could be a nice goal to set for yourself. If not, even without it, it does offer you quite a bit and is probably worth checking out to see if you want to invest your time and work into learning it. If you want to learn more about it make sure to check the GRANDstack official documentation.