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

Episode 3: Build our schema (Evernote Clone)

Photo by NordWood Themes on Unsplash

In the previous episode(part 2), we worked on getting familiar with GraphQL.

In this episode, since we’re a bit more familiar on how GraphQL works we can start building out our schema.

Agenda:

• Organize our files
• Build our evernote schema
• Create resolvers
• Test our queries with built-in GraphiQL

STEP 1: Currently we have all of our data inside of our server.js file, as you know this can become very messing if our schema and resolvers get bigger. So we are going to organize our files a bit. Create a schema.js inside the main directory (evernoteclone) and this is where we will store all of our data.

STEP 2: In our schema.js file we need to now require the buildSchema method from graphql so we can use it.

const { buildSchema } = require('graphql') --> add this in schema.js

Let’s start building our schema in small portions, the properties in this notes array will match our schema in our evernote clone app → (title, content, image)

const notes = [
  {
   id: 1,
   title: "my note",
   content: "this is the content of my note",
   image: "some image"
  }
];

we create this array to start off with, that way we can practice querying from this array and mutating it.

// localhost:5000/graphql?query=notes --> what the URL request looks like
const ourSchema = buildSchema(`
  type Query {
   notes: [Note] --> should return array of note
   note(id: ID): Note --> should return single note by given id
}
  type Note{ --> note thats in the array
   id: ID,
   title: String,
   content: String,
   image: String
 }
`);

our structure is similar to the dummy data we built in the last episode. Let’s add a mutation (I’ll only work with add for now)

// localhost:5000/graphql?query=notes --> what the URL request looks like
const ourSchema = buildSchema(`
type Query {
notes: [Note]
note(id: ID): Note 
}
type Query {
notes: [Note]
note(id: ID): Note
}
type Note{
id: ID,
title: String,
content: String,
image: String
}
input noteinput{ --> input fields (text-fields)
title: String,
content: String,
image: String
}
type Mutation { --> modifiers(add, delete, update etc)
createNote(input: noteinput): Note --> create note and should return the note you created
}
`);

STEP 3: Let’s create our resolvers that will actually return that data

const resolver = {
   notes: () => notes, --> returned notes array
   note: ({ id }) => notes[id - 1], --> returned single note by id
   createNote: ({ input }) => { --> destructure input from param
   const note = { --> create note
     id: notes.length + 1, --> id will be notes array count that increments with each add
     title: input.title,
     content: input.content,
     image: input.image
   };
   notes.push(note); 
   return note; --> return the note you just created
   }
};

STEP 4: The last thing we will do is test our queries and mutations, if you’re successful you should see the same results but with different data, our data.

// query for notes will return notes array
{
  notes{
   id, 
   content
 }
}

mutation →

// creates note and we want the id and title of note that was just created
mutation{
   createNote(input: {title: "another title", content: "my second    note", image: "images used"}){
 
 id, 
 title
 
 }
}

I know you might be thinking we are doing the same thing we did in the last episode, yes but I wanted to implement the logic with OUR data we will be using throughout.

Final Code below (be sure to export the schema and resolver, and include them in the server.js file)

const { buildSchema } = require("graphql");
const notes = [
{
id: 1,
title: "tim",
content: "allen",
image: "some image"
}
];
const ourSchema = buildSchema(`
type Query {
notes: [Note]
note(id: ID): Note
}
type Note{
id: ID,
title: String,
content: String,
image: String
}
input noteinput{
title: String,
content: String,
image: String
}
type Mutation {
createNote(noteInput: noteinput): Note
deleteNote(id: ID): Note
}
`);
const resolver = {
notes: () => notes,
note: ({ id }) => notes[id - 1],
createNote: ({ noteInput }) => {
const note = {
id: notes.length + 1,
title: noteInput.title,
content: noteInput.content,
image: noteInput.image
};
notes.push(note);
return note;
}
};
module.exports = {
ourSchema,
resolver
};

Imported to server.js file

// server.js
const { ourSchema, resolver } = require("./schema");
app.use("/graphql", graphqlHTTP({
  schema: ourSchema,
  rootValue: resolver,
  graphiql: true
 })
);

In the next episode, we should be ready to start working with the DB (mongodb) more in the next episode.

Hope you guys enjoy! if you would like to see the video version, you can check it out here → build our schema video