This is going to be an introduction to using GraphQL yoga, which is a GraphQL server based on Express.
If you don't know what GraphQL is, you might want to go through myprevious tutorial where I use Express and GraphQL. That should get you up to speed. You could then learn how you cancreate a movie website with GraphQL and React but not really required for you to understand this. We're simply recreating the first tutorial with different tooling.
Get started
Let's set up the basic project. In an empty directory run these command lines
npm init -ynpm i -S graphql-yoga mongoosetouch index.js
The first line sets up the npm project, the second line installs the only two packages we will need, and to keep things simple, the entire code is going to go inindex.js
. Let's create a very basic structure:
const { GraphQLServer } = require('graphql-yoga');const typeDefs = `type Query { Greeting: String}`const resolvers = { Query: { Greeting: () => `Hello World` }}const server = new GraphQLServer({ typeDefs, resolvers})server.start({port: 7777}, () => console.log(`The server is running on port 7777`))
We requiredgraphql-yoga
at the top and run the server at the bottom. A GraphQL server needs us to define the type of queries it will be running, and the kind of data each query will respond with.
In our simple version, we have a query ofGreeting
that will return a string. And we specify that when theGreeting
is calledHello World
will be returned.
Now, all we're left to do is run this in the terminalnode index.js
. I highly recommend you installnodemon
but that's beyond the point.
Now you need to runhttp://localhost:7777
in agraphql playground or use anonline graphql playground. Then just run the following query:
{ Greeting}
And you'll get the responseHello World
.
A bit deeper
Let's add an array of objects
const typeDefs = `type Query { People: [PeopleObject]! Greeting: String}type PeopleObject { id: ID first: String! last: String!}`const resolvers = { Query: { Greeting: () => `Hello World`, People: () => [{first: 'Aurel', last: 'Kurtula'}] }}
We've addedPeople
as a possible query. It has to return an array of objects, the properties of the object are defined inPeopleObject
. Note the use of!
makes those properties as required - meaning we have to return that content.
Then we hard-coded an array which will be returned.
In the playground, we could run this
{ Greeting People{ first last }}
Connecting to mongo database
In aprevious tutorial I go through creating a mongo database from mlab. So follow that if you don't already have mongodb installed locally or if you don't know how to set up a mongo database. Then come back, still inindex.js
at the top add the following code.
const mongoose = require('mongoose');const db = mongoose.connect('mongodb://localhost:27017/population');const Schema = mongoose.Schema;const peopleSchema = new Schema({ first: { type: String }, last: { type: String}})const People = mongoose.model('people', peopleSchema)
If you have mongodb installed and running locally, the above would work out as is, if not you'll need to change the url which mongoose should connect to.population
will be created automatically. Then we create a schema. Similar to what we did with Graphql, we need to tell mongoose what type of content will be added to the model, then we specify the model.
From this point forward, as you'll see, we interact only with thePeople
model and thepeople
model in thepopulation
database will be affected.
Mongo and GraphQL
When we queryPeople
in the GraphQL playground we want the data to come from the mongo database and not from the array we hard coded. So let's change theresolvers
const resolvers = { Query: { Greeting: () => `Hello World`, People: () => People.find({}), }}
There we are returning all the entries from the model in the database.
Cleary if we rerun the query in the playground we would get an empty array forPeople
query as there's nothing in the database.
Now we need to add to the database through GraphQL. For this we need to use mutations:
const typeDefs = `type Query { people: [People!]! person(id: ID!): People}type People { id: ID first: String last: String}type Mutation { createPerson(first: String!, last: String!): People}`
First, we specify the type; a mutation namedcreatePerson
it requires two properties and will return thePeople
object. As usual, we need to specify the results of running that mutation, inresolvers
const resolvers = { Query: {....}, Mutation: { createPerson: async (parent, args) =>{ const newPerson = new People({ first: args.first, last: args.last }) const error = await newPerson.save() if(error) return error return newPerson } }}
Similar to other resolvers we want to do something whencreatePerson
runs. This time we need to have access to the variables passed by the user, henceargs
(parent
is beyond the scope of this tutorial).
First we create thenewPerson
object which we want to add to the database, then we create a newPeople
module populated with thenewPerson
object, and finally, we save the object to the database, then we simply return the newly created object to graphQL server.
Back to the GraphQL playground
query people { Greeting People{ first last }}mutation addingPerson{ createPerson(first: "Gregor", last: "Samsa"){ first last }}
There, if you want to run the mutation you runaddingPerson
(by the drop-down menu). And, of course, after you add Gregor you can see the bugger :) when you run thepeople
query.
Finally, let's follow the same logic and add the ability to remove a person from the database.
First, specify the typedeletePerson
:
type Mutation { createPerson(first: String!, last: String!): PeopleObject deletePerson(id: ID!): PeopleObject}
Then let's resolve it as yet another mutation:
const resolvers = { ... Mutation: { createPerson: (parent, args) =>{...}, deletePerson: (parent, args) => { return new Promise( (resolve, reject) => { People.findOneAndDelete(args.id, function(err, result){ if (err) return err; resolve(result) }) }) } }}
It's the exact same logic, mongoose gives us the ability to delete an object by its id - usingfindOneAndDelete
. You can testdeletePerson
as follows:
mutation deleting{ deletePerson(id: "5c1ccc3de652317c2c79d4ee"){ first last }}
And that is it for this tutorial.
You can get the code over atgithub. The code is divided into different files as it would in a fleshed out project
Top comments(2)

- Email
- LocationOwerri Nigeria
- EducationFederal University of Technology Owerri
- Joined
Thanks for the tutorial Aurel Kurtula. You are doing well.

- LocationYangon, Myanmar
- EducationUniversity of Computer Studies, Meiktila
- WorkFull Stack Developer
- Joined
Thanks your tutorial is useful to me and wanna about subscription with related this post
For further actions, you may consider blocking this person and/orreporting abuse