Open GraphQL
Published in

Open GraphQL

Michael Hunger

Jun 26, 2019

4 min read

Build a StackOverflow GraphQL API & Demo App in 10 Minutes

Using the GRANDstack starter project in 5 steps

Update: In May 2020 I did an update and created a with the most recent GRANDstack starter and a Neo4j 4.0 database. The dashboard is running live on .

Building buzzoverflow Twitch Stream Session

We’ve just returned from the GraphQL Conference in Berlin, where we demoed the StackOverflow API GraphQL as a example, which was well received

After I hearing about Neo4j and GRANDstack for the first time yesterday, it took me less than an hour to make it work with my own app using your starter project.

- attendee at GraphQL Conference Berlin

The GRANDstack combines React front-ends with Apollo Client and Server providing a GraphQL API. It uses the Neo4j Database GraphQL integration, which uses the GraphQL schema to translate GraphQL queries into Cypher statements and run them against the database.

Our GraphQL integration augments your simple type SDL with auto-generated queries and mutations that save you from writing a lot of boilerplate code.

GRANDstack request cycle

Get up and running with the GRANDstack starter for StackOverflow

Here are the 3 steps you need to get up and running yourself. With 2 bonus steps for a self-hosted database.

(ONE) Download GRANDstack starter

Download & unzip the .

Note that this is a different branch stackoverflow than the default starter from the website.

We already prepared a Neo4j instance with some StackOverflow data on Neo4j Cloud, whose connection details are preconfigured in the .env file of the starter api directory.
As you can see in the data model below, you have
Users that ASKED Questions which are TAGGED with TAGS and ANSWERED by Answers PROVIDED by other Users.

Neo4j Browser UI with StackOverflow Data Model

(TWO) Start the GraphQL API backend

cd api; yarn; yarn start

It also launches a GraphQL Playground on that allows you to explore the API and Documentation interactively. The top-level queries support filtering by any attribute, pagination (first, offset) and orderBy as well as complex nested filter arguments too.

GraphQL PlayGround with Example Query and Docs for Auto-Generated Queries and Mutations

The API backend augments the to serve your API.

If you look at the types, you’ll see that some of the fields are computed by a @cypher directive.

(THREE) Run the React Application

cd ui;yarn;yarn start

This launches your React app (port 3000) that you can use for listing and filtering StackOverflow users.

If you check the code, you see how it uses the GraphQL API for fulltext search and for listing/selecting fields to render.

React application example

BONUS (FOUR) Launch a Neo4j Instance

Go to to create a blank sandbox instance.

Launched Neo4j Sandbox with Details Tab for credentials.

Adapt the IP-address and Bolt-port and credentials from the sandbox to your .env file of the starter api directory (not the JS Bolt URL which is for web-browser access via websocket).

BONUS (FIVE) Import StackOverflow Data into Neo4j

After launching Neo4j Browser via the link in the sandbox, you can run the following script which loads 10 pages from the StackOverflow API for the given tag into Neo4j. It turns the JSON response of the graph of Users, Questions, Answers and Tags.

Script for Turning StackOverflow API Responses into a Graph

Then you can use the left sidebar to explore the data visually.

If you want to explore the data a bit more, using Neo4j directly, you can enter this command in the Neo4j Browser and start at slide number 5.

:play stackoverflow

Neo4j Browser Guide :play stackoverflow

You can achieve the same on any of the or by and adding the APOC Plugin (in the Manage -> Plugins tab).

Now try to use your own dataset with Neo4j, if you need help importing data check out our data or ask in our .

Michael Hunger

Michael Hunger

A software developer passionate about teaching and learning. Currently working with Neo4j, GraphQL, Kotlin, ML/AI, Micronaut, Spring, Kafka, and more.