Full Stack React — Part 6(React, GraphQL, Express, MongoDB)

Episode 6: Create Note Resolvers (evernote clone)

Photo by David Travis on Unsplash

In the previous episode, we created our MongoDB schema and made reference between them along with updating our GraphQL schema. If you missed it, you can find it here → Part 5

In this episode, we work on creating our notes resolver, no not dummy data either lol this time we will be talking to the DB and storing this information.

Agenda:

• Start Server
• Organize files
• CRD (CRUD) operations on notes resolver
• Test Queries

Start Server

STEP 1: Go into your project folder and start the server yarn start or npm run start

STEP 2: Be sure when you start the server that you are still connected to mongoDB. Pretty sure you need to log into mongoDB site

If you still don’t see connected to mongodb when starting server, open different tab in your terminal and run mongo to get the mongoDB server going. However, I believe you don’t need to start the mongoDB server anymore but just be logged into the site. (image above).

Organize files

Currently we have our dummy resolvers in the schema.js file, I want you to delete ALL of it, because we are going to be start from scratch with resolvers. As of now, no resolvers should be in the schema.js file.

STEP 1: Create a resolvers folder in the root of our project(evernoteclone)

STEP 2: Inside resolvers folder, create an index.js file & users.js file & notes.js file. The users and notes are were we will be storing our resolvers from now on. It should look like this

|--resolvers
  |--index.js
  |--user.js
     // user resolvers
  |--notes.js
    // note resolvers

STEP 3: Inside the index.js file copy this to exports all your resolvers and bundle them up into one main resolver to use in your server.js file

const notesResolver = require('./notes')
const usersResolver = require('./users')
const allResolvers = {
  ...usersResolver,
  ...notesResolver
}
module.exports = allResolvers

STEP 4: In your server.js file require them in, and use as the rootValue and delete the other resolver you had before

const allResolvers = require("./resolvers/index");
app.use( "/graphql",
  graphqlHTTP({
  schema: ourSchema,
  rootValue: allResolvers,
  graphiql: true
})
);

Note Resolvers(CRD) Create, Read, Delete

STEP 1: Head over to the notes resolver file

STEP 2: At the top of the file require the Note model that we need.

const Note = require('../models/notes')

STEP 3: After you require the Note model, create a module.exports. This is were we will store all our note resolvers in.

module.exports = {
// Create note and save in DB
 createNote: async ({noteInput})=> {
   const note = new Note({
     title: noteInput.title,
     content: noteInput.content,
     image: noteInput.image
   }
   let notes;
   try {
     const result = await note.save()
     notes = {
       ...result._doc
      }
     return notes
     }catch (err){
      throw err
     }
  },
 // Read notes in DB
notes: async () =>{
  try {
    const Notes = await Note.find({})return Notes.map(note =>{
    return {...note._doc}
    })
  }catch(err){
    throw err
  }
 },
// Read single note by id
note: async ({_id}) =>{
  try{
    const findNote = await Note.findById(_id)
    return {
      ...findNote._doc
    }
   }catch(err){
      throw err
   }
 },
// Delete note by id
deleteNote: async({_id}) =>}
try {
  const note = await Note.findByIdAndRemove({_id: _id})
  return {...note._doc}
 }catch(err){
    throw err
  }
 }
}

I know you’re probably thinking whoa, wait what just happen? Let me explain what each one is doing.

• The Create note resolver is creating a note using our model, saving that note ( and stored it in a result variable) then returning that document inside an object using the spread operator. The only way to actually get the document of the note is by adding the result._doc . Remember this actually saves our note inside the DB. {...result._doc}
• The Read notes resolver (notes) We created a notes variable and stored all the notes we found in the DB using our notes model, then we map through them and returned those document’s in an object {...notes._doc}.
• The Single note resolver ( note ) we destructed the params to grab the ID we passed in from our graphql schema, we search the DB for a note that has the same ID as the one we passed in as params and returned the single note in an object {...findNote._doc} .
• The Delete note resolver ( deleteNote ) We destructed the params again for the ID, then we searched the DB for a note with the same ID as the one we passed in params. But this time, we returned the note that was deleted so we know for sure it was deleted. {...note._doc} .

Now that we have all of our note resolvers finished we can start testing these queries out in GraphiQL.

Test Queries

Go to your localhost:5000/graphql and create a note, delete a note, find a note, list the notes.

If everything went well you should see the note you just created, and it should be saved inside your mongoDB. I advise to run these same queries to test out the other to make sure everything is working properly :)

Well, that is all for this episode. I hoped you guys enjoyed that, there will be more to come :)

Heres the video version if your interested → Create note resolvers