GRAND Stack Workshop

Benoit Simard (@logisima)

Welcome !

Welcome everyone


Please say hi to each other.

We’ll spend the afternoon together.

Benoit Simard



  • WIFI : network: SKEMA_GUEST | login: event2018 | password : Riviera1

  • Working together today : Pair on the exercises | Ask relevant questions immediately, raise your hand if you have problems

  • 1 break of 15 min exactly

  • Slides :


Use hosted online demo services



  • What is this Stack ?

  • Why a new stack?

  • Build a simple Movie application

    • A graph model with Neo4j

    • How to query it ?

    • GraphQL Schema definition

    • Implement GraphQl schema with Apollo

    • React’ing

La GRAND stack


A quick overview


  • A new paradigm for building APIs

  • Schema definition

  • Query language for APIs

  • Community of tools


  • JavaScript library for building user interfaces

    • Web, mobile (React Native)

  • Component based

    • Reusable

    • Composable

react code



“A set of tools designed to leverage GraphQL and work together to create a great workflow”

Client-side tooling

  • Frontend framework integrations

  • Caching

  • Code generation

Server-side tooling

  • Schema creation

  • Mocking

  • Schema stitching

  • Performance monitoring


  • Is a graph database (ACID compliant)

  • Is a graph database (Native)

  • Schema less

  • Exists since 2010

  • Open-source

neo4j browser

A movie application

movie app

A movie application

movie app info

Focus on Neo4j



Neo4j is a database

neo4j database

Neo4j is a native graph database

neo4j graph database

A graph of properties



  • The entity of your model

  • Can have labels

  • Can have properties


  • Links two nodes, with a direction and a type

  • Can have properties

A local approach



Aims to deliver a full and open specification of the industry’s most widely adopted graph database query langage.

cypher pattern

Ascii Art : Node

  • () or (n)

    • Surrounded with parentheses

    • Use an alias to refer to our node later

  • (n:Label1:Label2)

    • Specify a Label, starts with a colon :

    • Group nodes by roles or types, think of labels as tags

  • (n:Label {prop: 'value'})

    • Nodes can have properties

Ascii Art : Relationship

  • -→ or -[r:TYPE]→

    • Wrapped with hyphens & square brackets

    • Like labels, a relationship type starts with a colon :

  • < > Specify the direction of the relationship -[:KNOWS {since: 2010}]→

    • Relationships can have properties too!

The movie dataset

movie graph

Exercice 1

Goal: Query for Movie by title and find recommended movies

  • Sign in to Neo4j Sandbox:

  • Create a “Recommendations” sandbox

  • Explore the data in Neo4j Browser

  • Write two Cypher queries:

  • Search for a Movie by title substring

  • For a given movie, find recommended movies

    • Hint: explore the browser guide for ideas

    • Save these queries, we’ll use them in the next exercise

For those that want to do it locally, you can download the dataset here :

Exercice 1: answer

  • Search for a Movie by title substring

  • For a given movie, find recommended movies


reco graph

Focus on GraphQL

A large adoption

graphql adoption

What is GraphQl

“A query language for your API”

  • Developed by Facebook iOS team for iOS app

    • Reduce number of round trip requests in face of low latency

  • Declarative, state what fields you want Alternative to REST Self documenting (schema and types) Limited support for “queries” Logic is implemented in server


  • “A query language for your API, and a server-side runtime for executing queries by using a type system you define for your data”

  • “GraphQL isn’t tied to any specific database or storage engine”

  • “A GraphQL service is created by defining types and fields on those types, then providing resolver functions for each field on each type”

graphql model

Your application model is a Graph !

movie graphql

Your application model is a Graph !

GraphQl First Development

graphql first dev

Schema is your friend, and GraphQl schema is the API spec

  • Design API schema

  • Build UI and backend

  • Deploy !

Schema Definition Language

  • Type : The graph model definition

  • Query : What queries you can do

  • Mutations : What changes you can do

Exercice 2

Define the GraphQl schema of our web application

  • Take a look at the Neo4j model

  • Think about entities and queries we need




Queries / Mutation



API Workflow

graphql api workflow



How to fetch the data

Apollo Launchpad

apollo lauchpad

GraphQl Server

Just an express.js server with some custom endpoints.

GraphQl Server - II

Use The Schema, Luke

Translate your schema directly in Cypher, thanks to drirectives.

graphql to cypher
neo4j graphql js

Exercice 3

Goal: Build a GraphQL service that connects to Neo4j, allow for querying movies and recommended movies via GraphQL

  • Start with skeleton Launchpad:

  • Fork it, then add your Neo4j Sandbox credentials to secrets

  • Complete the GraphQL service implementation by adding your Cypher queries from Exercise 1

  • [optional] Use the JS GraphQL→ Cypher integrations instead of Cypher in resolver functions.

Exercice 3 : answer

Note the GraphQl endpoint, we will use it later

Focus on React

Everything is component

app react

React Apollo : client

Create an Apollo client by providing the GraphQl endpoint

React Apollo : wrap application

Wrap your react application with ApolloProvider

React Apollo : component



  • Using React’s Higher Order Component feature : we can populate a component’s props to a GraphQL query

  • graphql() enhancer function

  • Now whenever TodoApp component is rendered, the GraphQL query is executed

React Apollo : Use the query component


app codesandbox

Exercice 4

Goal: Complete the skeleton React app by adding Apollo Client and fetch data from the GraphQL API you created in Exercise #2

Exercice 4 : answer

Any questions ?