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.

Let’s get started

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