Full Stack React — Part 3 (React, GraphQL, Express, MongoDB)
Episode 3: Build our schema (Evernote Clone)
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 likeconst 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 likeconst 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): NotedeleteNote(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