Categories
Uncategorized

How To Setup NodeJS Project with Apollo-Client-Server,TypeScript, And MongoDB

In this guide, we walk through the process of creating a NodeJS project from scratch with Apollo Client, TypeScript, and MongoDB.

Before We Start, Please Check If Nodejs is Installed in Your System or Not.

How to check whether NodeJS is installed in your system or not?

As you can see below there is a simple command to check whether NodeJS is installed or not

node -v

If it shows you the version of NodeJS, it means you have NodeJS already installed in Your System. If it shows you Something else then you need to install NodeJS first in your system.

How To Install Nodejs

Step 1: Download the Installer

Download the NodeJS installer from the official website, as per your system operating system. Make sure you have downloaded the latest version of NodeJS.

Step 2: Install Nodejs

Choose the path where you want to install NodeJS

The following features will be installed by default:

Now the setup is Ready To Install

If you are on Linux operating system, then you can install NodeJS through the command line by following the steps
Step 1: Open your terminal or press Ctrl + Alt + T.
step 2: to install node.js use the following command:
sudo apt install nodejs
Step 3: Once installed, verify it by checking the installed version using the following command:
node -v

So now we Have Nodejs in our system. So, Let’s start Setting up The Project with Typescript, Apollo-client, and MongoDB

Set up a new Project

Step 1 — Initializing the Project

First Let’s create a new folder name NodejsProject and move it into that directory and open the Project in VsCode.

mkdir NodejsProject
cd NodejsProject
code .

Now We Have To initialize Project:

Command: npm init -y

The -y flag tells npm init to automatically say “yes” to the defaults. You can update this information later in your package.json file.

Step 2: Install Some Required Packages for the Project
  • npm install –save express
  • npm install –save mongoose
  • npm install –save apollo-server-express
  • npm install –save graphql
  • npm install –save-dev typescript

As we are using TypeScript in this project, we have to install Package types also:

Example:

npm install –save @types/express
npm install –save @types/Package-Name

For now, our package.json file looks like the below:

{
  "name": "nodejsproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/dotenv": "^8.2.0",
    "@types/express": "^4.17.14",
    "@types/graphql": "^14.5.0",
    "@types/mongoose": "^5.11.97",
    "@types/node": "^18.11.0",
    "apollo-server-express": "^3.10.3",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "graphql": "^16.6.0",
    "mongoose": "^6.6.5",
    "nodemon": "^2.0.20"
  },
  "devDependencies": {
    "typescript": "^4.8.4"
  }
}

Now we will create a tsConfig file in which we will define TypeScript compiler options.

Command to generate tsConfig.json file

npx tsc –init

Some basic points to keep in mind for tsConfig file:
  • rootDir: This is where TypeScript looks for our code we have configured it to look in server/ folder. That’s where we will write our TypeScript.
  • outDir: Where TypeScript adds our Compiled Code. We will set a build/ Folder for that.
  • module: commonjs is the Standard Node Module system in 2022, let’s use that   
  • target: We will use “es2020”
  • Exclude: It Means it will not include in the Build. Generally, we put here our Node Module
Now We are All Set To start.

Let First Create Our Server Folder in Which we Will Create are all file/folder. First We need to create server.ts file

import express, { Application } from "express";

const app: Application = express();

app.use(express.json());

const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
  console.log(
    `Server is runnig at http://localhost:${PORT}/attendanceAndBreak`
  );
});

export default app;

Above are our basic server.ts file in which we are using express Library. Now to use the express library, we created an instance of the express library by calling express() function and it returns an object that the popular convention names app, but you can name it anything you want.

As we are using express.json() i.e inbuilt middleware function in Express. It parses incoming JSON requests and puts the parsed data in req.body

In the end, we are using 4000 Port. You can use .env file also for defining the Port or else your server will run on 4000 Port

Step 3: Connect Database
import mongoose from "mongoose";
import { config } from "dotenv";
config();

const URL: any = process.env.DATABASE;

export default mongoose
  .connect(URL)
  .then((): void => {
    console.log("Database Connected Successfully");
  })
  .catch((error) => {
    console.log(error);
  });

You can see in the above screenshot a Simple Code to Connect with MongoDB. As you can See First we import Mongoose Package To connect With MongoDB and here we are using .env file to pass our Database URL. Its good Practice to pass your Important credentials  into .env file

Now Let’s create a simple MongoDB Schema so that we can create some API’s with Apollo-server-express. In the database folder, we will create a Model folder where we will define our Schema

Now we will create a simple Schema. We Will follow this Schema to create our APIs

import { Schema, model } from "mongoose";

const userSchema = new Schema({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
  },
  age: {
    type: Number,
    required: true,
  },
  address: {
    type: String,
    required: true,
  },
});

const userModel = model("user", userSchema);

export default userModel;
Now Let’s Start Creating API with Apollo-server-express

Under server folder create a new gateway folder then under gateway folder create one more folder for user panel. In the User Panel, we will create a Resolver Folder where we write our API code and under the user panel folder there will also be a folder called types where we define the types of our API and in user panel we will create one file with schema.ts where we define the schema of graphql and lastly in user panel there will also a types.ts file where we define typescript type for the API

Our Folder Structure will be like the below screenshot when we will create API with Apollo-server-express

Server
DataBase

Model
index.ts

user.ts

gateWay

schema.ts
server.ts resolver
types signUp.ts

signUpTypes.ts
schema.ts
types.ts

Let’s Create a Simple API in which we add a new user with Name, Email, Age, and Address fields

  • First, we will create Graphql Types file under server>user>types Folder
import { GraphQLObjectType, GraphQLString } from "graphql";

const signupTypes = new GraphQLObjectType({
  name: "signUpType",
  fields: () => ({
    message: { type: GraphQLString },
  }),
});

export default signupTypes;

Here we only define one field called “message” that will be a string type, with this we will send a message to Frontend Like “User Successfully Signup”.

  • Now we will define Input type, that we will get from the frontend side
import { GraphQLInputObjectType, GraphQLNonNull, GraphQLString } from "graphql";

const signupInput = new GraphQLInputObjectType({
  name: "signUp",
  fields: () => ({
    name: { type: new GraphQLNonNull(GraphQLString) },
    email: { type: new GraphQLNonNull(GraphQLString) },
    age: { type: new GraphQLNonNull(GraphQLString) },
    address: { type: new GraphQLNonNull(GraphQLString) },
  }),
});

export default signupInput;

Here we have defined four fields “name, email, age, address” that we are using to signup user. These fields we will get from the frontend side all the input should be a string as we define all the input fields as a string.

  • Now We Are Going to Define Types for Typescript
export interface args {
  name: string;
  email: string;
  age: string;
  address: string;
}
export interface response {
  message: string;
  statusCode?: number;
}

In TypeScript Type where args means the Input, we will get from the user and we will send Response as a string. So these TypeScript Typeswe are going to use in our API.

import userModel from "../../../Database/model/user";
import { args, response } from "../../types";
const signUp = async (parent: any, args: any): Promise<response> => {
  try {
    const { name, email, age, address }: args = args.input;

    if (!name || !email || !age || !address) {
      return {
        message: "Please Fill The Field",
      };
    }
    const sameEmail: any = await userModel.findOne({ email });

    if (sameEmail?.email == email) {
      return {
        message: "Email Already Exist",
      };
    } else {
      const result = new userModel({
        name,
        email,
        age,
        address,
      });

      const userSave = await result.save();
      return {
        message: "User Register Successfully",
      };
    }
  } catch (e: unknown) {
    console.log(e);

    return { message: "Server Error", statusCode: 500 };
  }
};

export default signUp;

In the above code snippet, you can see a simple API In which we are creating a User and we are also using types of Typescript in args and response.

  • Now we will connect this API with our schema.ts file
import { GraphQLNonNull } from "graphql";
import signupInput from "./user/types/signupInput";
import signupTypes from "./user/types/signupTypes";
import signUp from "./user/Resolver/signUp";


export const userMutation = {
  signUp: {
    type: signupTypes,
    description: "signUp",
    args: {
      input: {
        type: new GraphQLNonNull(signupInput),
      },
    },
    resolve: signUp,
  },
};

In the above screenshot, you can see we connected all Graphql Types like signup types and Input Type as signupInput

import { GraphQLObjectType, GraphQLSchema } from "graphql";
import { userMutation } from "./gateway/schema";

const mutation = new GraphQLObjectType({
  name: "mutation",
  fields: () => ({
    ...userMutation,
  }),
});

export const schema = new GraphQLSchema({
  mutation,
});

Note: For Example, we have two Many API’s, to manage that we will create A Schema File In Server Folder.

Like above you can pass your all mutation and also with the same method you can pass your all queries also.

In the end, we have to make some changes in the Server file so let’s Quickly Do that

import { config } from "dotenv";
config();
import express, { Application } from "express";
import database from "./Database/index";
import { ApolloServer } from "apollo-server-express";
import { schema } from "./schema";
import bodyParser from "body-parser";
import cors from "cors";

console.log(database);
const app: Application = express();
app.use(cors());

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.json());

const PORT = process.env.PORT || 4000;
const server = new ApolloServer({
  schema,
});

server.start().then((res) => {
  server.applyMiddleware({ app, path: "/attendanceAndBreak" });
  app.listen(PORT, () => {
    console.log(
      `Server is runnig at http://localhost:${PORT}/attendanceAndBreak`
    );
  });
});
export default server;

In the Server File, we just add Apollo Server where we are passing all API’s with the name Schema and also we have to define an End Point called nodeProject.

Leave a Reply

Your email address will not be published. Required fields are marked *