This is part two of the series of building a Full Stack Application using GraphQL API. If you have not checked part one, check that out HERE.
In the last article, we have explored the basics of GraphQL from scratch. In this article, we will create GraphQL APIs for our Full Stack Application.
Clone the repository code of the previous article from HERE
Switch to the code branch
git checkout graphql_initial_code
Create and switch to the new git branch by executing the following command
git checkout -b part2_full_stack_app
Install the required dependencies
yarn add mongoose@5.9.25 lodash@4.17.19
Open schema.graphql
from server/src
folder and replace its contents with the content from HERE
In this file, we have added two queries first for getting all products and another for getting reviews of a specific product.
For mutation, we have added add
, edit
and delete
product and for reviews add
and delete
review queries.
If you noticed mutation, we have mutation like this
addProduct(skuId: ID!, data: ProductInput): Product!
and we have ProductInput
input type declared as
input ProductInput {
name: String!
description: String!
price: Float!
}
So instead of addProduct(skuId: ID!, name: String!, description: String!, price: Float!): Product!
, we have moved the additional arguments to separate input type ProductInput
which a pretty common practice to keep the queries simple and easy to manage.
So while accessing the arguments in mutation instead of args.name
or args.description
we need to use args.data.name
or args.data.description
because we have named the argument as data
in the arguments list (data: ProductInput
).
That’s the only new change here. All other schema code will look familiar if you have read part one of this series.
Now, create a new db
folder inside server
folder and add connection.js
file inside it with the following content
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/ecom_products', {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true,
useFindAndModify: false
});
Here, we have added MongoDB connection details to connect to the local MongoDB database. Check out this article to install the MongoDB database locally if you don’t have it installed.
Create a new model
folder inside server
folder and add Product.js
and Review.js
files inside it.
Inside Product.js
add the following content
const mongoose = require('mongoose');
const ProductSchema = mongoose.Schema(
{
skuId: {
type: String,
required: true,
unique: true
},
name: {
type: String,
required: true
},
description: {
type: String,
required: true
},
price: {
type: Number,
required: true
}
},
{
timestamps: true
}
);
const Product = mongoose.model('Product', ProductSchema);
module.exports = Product;
In this file, we have defined MongoDB database schema with skuId
, name
, description
, price
fields of the Product
collection. skuId
is a unique product Id used in the eCommerce applications.
We also added timestamps: true
property to the model so each document will have createdAt
and updatedAt
timestamps automatically added.
Inside Review.js
file, add the following content
const mongoose = require('mongoose');
const ReviewSchema = mongoose.Schema(
{
title: {
type: String,
required: true
},
comment: {
type: String,
required: true
},
product: {
type: mongoose.Schema.Types.ObjectId,
required: true,
ref: 'Product'
}
},
{
timestamps: true
}
);
const Review = mongoose.model('Review', ReviewSchema);
module.exports = Review;
In this file, we have added title
, comment
and product
fields for the Review
collection. product
is a foreign key field referencing the _id
field from the Product
model.
Open src/index.js
and replace it with the following content
const { GraphQLServer } = require('graphql-yoga');
const Query = require('./resolvers/Query');
const Mutation = require('./resolvers/Mutation');
require('../db/connection');
const server = new GraphQLServer({
typeDefs: './src/schema.graphql',
resolvers: {
Query,
Mutation
}
});
const options = {
port: 4000,
endpoint: '/graphql'
};
server.start(options, ({ port }) =>
console.log(`server started on port ${port}.`)
);
Rename the users.js
file from utils
folder to functions.js
and replace it with the following content
const getMessage = (message) => {
return message.substring(message.indexOf(':') + 1);
};
module.exports = { getMessage };
Now, open Query.js
file from resolvers
folder and replace it with the following content
#development #coding #react #javascript #programming