Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

aurel kurtula
aurel kurtula

Posted on

     

Playing with GraphQL yoga and mongoose

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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
vicradon profile image
Osinachi Chukwujama
Learning server-side development. Creating courses on educative.io

Thanks for the tutorial Aurel Kurtula. You are doing well.

CollapseExpand
 
waiphyo285 profile image
Wai Phyo Naing
404
  • Location
    Yangon, Myanmar
  • Education
    University of Computer Studies, Meiktila
  • Work
    Full Stack Developer
  • Joined

Thanks your tutorial is useful to me and wanna about subscription with related this post

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I love JavaScript, reading books, drinking coffee and taking notes.
  • Joined

More fromaurel kurtula

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp