This demo is for GraphQL beginners (who already read the docs) to practice concepts. It uses Graphpack to create a GraphQL server and setup the GraphQL Playground browser tool to interact with some data about Keanu Reeves movies.
It shows GraphQL operations:
Query
— readMutation
— create, update, and delete
Look in the /src
folder for:
db.json
— The small JSON file representating a database.schema.graphql
— The GraphQL schema that models data structures and types.resolvers.js
— The logic for responding GraphQL operations.
First, install Node (version 10.15.0
at time of publication).
Open your terminal and run these commands:
git clone git@github.com:gravitydepartment/graphql-demo.git
cd graphql-demo
npm install
npm run dev
Voila, GraphQL Playground is running at: http://localhost:4000
In GraphQL Playground, copy/paste each snippet into a new tab and press the play button to see what happens.
query {
movies {
id
title
year
name
role
rating {
source
value
}
}
}
query {
movie (id: 3) {
id
title
year
name
role
rating {
source
value
}
}
}
mutation {
createMovie (
id: 5,
title: "John Wick",
year: 2014,
name: "John Wick",
role: "Retired hitman"
) {
id
title
year
name
role
rating {
source
value
}
}
}
mutation {
deleteMovie (id: 5) {
title
year
}
}
mutation {
updateMovie (
id: 3,
name: "Neo",
role: "The One"
) {
title
name
role
}
}
You can console.log()
from inside resolvers.js
but it won't appear in your browser's dev tools. Check your terminal for debugging output.
This demo is based on a GraphQL tutorial written by Leonardo Maldonado.
A few bugs were fixed, and the example data was deepened to show queries on a multi-dimensional schema.