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 Twitch Stream and created a GH project “buzzoverflow” with the most recent GRANDstack starter and a Neo4j 4.0 database. The dashboard is running live on buzzoverflow.com.
We’ve just returned from the GraphQL Conference in Berlin, where we demoed the StackOverflow API GraphQL as a GRANDstack 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.
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 GRANDstack starter for Stackoverflow.
Note that this is a different branch
stackoverflowthan 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.
(TWO) Start the GraphQL API backend
cd api; yarn; yarn start
It also launches a GraphQL Playground on http://localhost:4001/graphql 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.
The API backend augments the type definitions below 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.
BONUS (FOUR) Launch a Neo4j Instance
Go to neo4j.com/sandbox to create a blank sandbox instance.
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.
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
You can achieve the same on any of the cloud marketplaces or by installing Neo4j Desktop 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 import guides or ask in our Neo4j Community.
