DEV Community: Uddesh

Building a GraphQL API for User CRUD with Node.js and MongoDB

Uddesh — Sun, 04 Jun 2023 09:40:40 +0000

In today's digital age, efficient data management is crucial for any application. GraphQL has emerged as a powerful tool for building flexible and performant APIs, while Node.js provides a scalable runtime environment. Combined with MongoDB, a popular NoSQL database, we have the perfect stack for creating a robust user CRUD (Create, Read, Update, Delete) API. In this post, we will explore how to build a GraphQL API using Node.js and MongoDB.

Prerequisites:

Before diving into the implementation, make sure you have the following prerequisites installed on your machine:

Node.js: Download and install the latest version of Node.js from the official website.
MongoDB: Install MongoDB Community Edition and start the MongoDB service.

Step 1: Setting up the Project

To begin, create a new directory for your project and initialize it as a Node.js project by running the following command:

mkdir graphql-api && cd graphql-api
npm init -y

Next, install the necessary dependencies: Express, Express-GraphQL, Mongoose, and GraphQL.

npm install express express-graphql mongoose graphql

Step 2: Creating the MongoDB Schema

In this step, we will define the structure of our user data by creating a schema. Create a new file called models/User.js and add the following code:

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true,
    unique: true
  },
  password: {
    type: String,
    required: true
  }
});

module.exports = mongoose.model('User', userSchema);

Step 3: Setting up the GraphQL Schema

The GraphQL schema defines the operations and data types available in our API. Create a new file called graphql/Schema.js and add the following code:

const { buildSchema } = require("graphql");

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
    password: String!
  }

  type Query {
    getUser(id: ID!): User
    getUsers: [User]
  }

  type Mutation {
    createUser(name: String!, email: String!, password: String!): User
    updateUser(id: ID!, name: String, email: String, password: String): User
    deleteUser(id: ID!): User
  }
`);

module.exports = schema;

Step 4: Implementing the GraphQL Resolvers

Resolvers are functions that handle the GraphQL operations defined in the schema. Create a new file called graphql /Resolvers.js and add the following code:

const User = require("../models/User");

const resolvers = {
  getUser: async ({ id }) => {
    try {
      const user = await User.findById(id);
      return user;
    } catch (err) {
      throw new Error("Error retrieving user");
    }
  },
  getUsers: async () => {
    try {
      const users = await User.find();
      return users;
    } catch (err) {
      throw new Error("Error retrieving users");
    }
  },
  createUser: async ({ name, email, password }) => {
    try {
      const user = new User({ name, email, password });
      await user.save();
      return user;
    } catch (err) {
      throw new Error("Error creating user");
    }
  },
  updateUser: async ({ id, name, email, password }) => {
    try {
      const user = await User.findByIdAndUpdate(
        id,
        { name, email, password },
        { new: true }
      );
      return user;
    } catch (err) {
      throw new Error("Error updating user");
    }
  },
  deleteUser: async ({ id }) => {
    try {
      const user = await User.findByIdAndRemove(id);
      return user;
    } catch (err) {
      throw new Error("Error deleting user");
    }
  },
};

module.exports = resolvers;

Step 5: Creating the Server

Now, let's create the server that will handle the GraphQL requests. In a new file called index.js, add the following code:

const express = require("express");
const { graphqlHTTP } = require("express-graphql");
const mongoose = require("mongoose");
const schema = require("./graphql/Schema");
const resolvers = require("./graphql/Resolvers");

const app = express();

// Connect to MongoDB
mongoose.connect("mongodb://localhost:27017/graphql-demo", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
mongoose.connection.once("open", () => {
  console.log("Connected to MongoDB");
});

app.use(
  "/",
  graphqlHTTP({
    schema,
    rootValue: resolvers,
    graphiql: true,
  })
);

app.listen(3000, () => {
  console.log("Server running on http://localhost:3000/");
});

Step 6: Starting the Server

To start the server, run the following command in your project directory:

node index.js

Congratulations! You have successfully built a GraphQL API for user CRUD operations using Node.js and MongoDB. With this setup, you have a flexible and efficient API that allows you to create, retrieve, update, and delete user data with ease. Remember to handle errors gracefully and enhance the API based on your specific requirements. Feel free to extend this example to include additional functionality or integrate it into your own projects. Happy coding!

Zustand: Yet another state management library for react

Uddesh — Thu, 10 Mar 2022 14:31:37 +0000

When it comes to state management library the first thing that comes to mind is Redux and I think redux does the job pretty well but it becomes overkill for small projects. To fix this issue there are lots of libraries and one of them is Zustand. Let's try to understand why and when to consider zustand.

What is Zustand?

Zustand is a lightweight, fast, scalable, and open-source state management library for react based on hooks with no boilerplate. It works on the same flux principles as redux. As of today it has more than 350000 Weekly downloads.

Why Zustand?

So you might be thinking isn't it the same as redux, What's the difference then? Here's some key features which make it different.

Simple API (With almost no boilerplate)
Lightweight (Almost 1.5kb in size)
Supports asynchronous action out the box
Un-opinionated

It also uses some performance optimisation techniques like memoization. Let's understand this with an example.

Let’s assume we have a state model { apples: 1, oranges: 1 } and two component one uses apples and another uses oranges. Now in case of context api or redux any one of these state changes will re-render both components but in case of Zustand it will render only component which is consuming the particular state.

function Apples() {
  // This component will *only* render when the amount of apple changes
  const apples = useStore(state => state.apples)
  return <div>{apples}</div>
}

Now that we know it is better for some use cases like small applications which need small data to be stored globally let's take a look at its implementation.

Adding zustand to our project

Create a store.

import create from 'zustand'

const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))

Start accessing the data inside store.

Getting total bear counts.

function BearCounter() {
  const bears = useStore(state => state.bears)
  return <h1>{bears} around here ...</h1>
}

Calling increment function.

function Controls() {
  const increasePopulation = useStore(state => state.increasePopulation)
  return <button onClick={increasePopulation}>Add bear</button>
}

Handling async actions

import axios from "axios";

const useStore = create(set => ({
  bears: 0,
  getMoreBears: async () => {
    const response = await axios.get('api endpoint')
    set({ bears: response.data })
  }
}))

That's pretty much it. In just a few lines of code, you can setup your global state.

Hope it will save some of your time. Let's catch up in the next one until then goodbye.

Creating your own bind() (Polyfill of bind)

Uddesh — Sun, 30 May 2021 06:48:50 +0000

So, what is polyfill?

Polyfill is a fallback for a method that is not supported by the browser by default. You can find browser support for any function or method on the mdn website.

Now, what is bind()?

According to mdn

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

This definition sounds really fancy, but what does that mean?

In simple words,

The bind() takes an object as an argument and returns a new function whose this refers to the object we passed as an argument.

Now, we got the idea about polyfill and bind(). So, let's try to implement it.

1). let's create an object that we are going to use as a call site.

let obj = {
  name: 'Jack',
};

2). Create a function that we need to bind with the object.

let myFunc = function () {
  console.log(`${this.name}`);
};

If you call this function now, It will print undefined

3). Add your bind() to the function prototype.

Function.prototype.myBind = function (obj) {
  let func = this;
  return function () {
    func.apply(obj);
  };
};

Putting it all together.

let obj = {
  name: 'Jack',
};

let myFunc = function () {
  console.log(`${this.name}`);
};

Function.prototype.myBind = function (obj) {
  let func = this;
  return function () {
    func.apply(obj);
  };
};

let newFunc = myFunc.myBind(obj)
newFunc() // Jack

This is the basic implementation of bind(), But it has few edge cases. Let's say you want to pass some arguments in myBind(). How will you do that? Currently, we are not accepting arguments other than the object itself. Let's implement this functionality.

The problem

let obj = {
  name: 'Jack',
};

let myFunc = function (id) {
  console.log(`${this.name}, ${id}`);  // id will be undefined
};

Function.prototype.myBind = function (obj) {
  let func = this;
  return function () {
    func.apply(obj);
  };
};

let newFunc = myFunc.myBind(obj, 'a_random_id')
newFunc() // Jack, undefined

We are trying to pass id in myBind but not able to access it.

The solution

let obj = {
  name: 'Jack',
};

let myFunc = function (id) {
  console.log(`${this.name}, ${id}`);  // id will be undefined
};

// Accepting any number of arguments passed to myBind
Function.prototype.myBind = function (obj, ...args) {
  let func = this;
  return function () {
    func.apply(obj, [...args]);
  };
};

let newFunc = myFunc.myBind(obj, 'a_random_id')
newFunc() // Jack, a_random_id

Now we solved an edge case. However, there is one more improvement we can make. What if we want to pass arguments to newFunc()?

The problem

let obj = {
  name: 'Jack',
};

let myFunc = function (id, city) {
  console.log(`${this.name}, ${id}, ${city}`);  // id will be undefined
};

// Accepting any number of arguments passed to myBind
Function.prototype.myBind = function (obj, ...args) {
  let func = this;
  return function () {
    func.apply(obj, [...args]);
  };
};

let newFunc = myFunc.myBind(obj, 'a_random_id')
newFunc('New York') // Jack, a_random_id, undefined

We are passing 'New York' but not able to access it inside myFunc

The solution

let obj = {
  name: 'Jack',
};

let myFunc = function (id, city) {
  console.log(`${this.name}, ${id}, ${city}`);  // id will be undefined
};

// Accepting any number of arguments passed to myBind
Function.prototype.myBind = function (obj, ...args) {
  let func = this;
  // Accepting arguments passed to newFunc
  return function (...newArgs) {
    func.apply(obj, [...args, ...newArgs]);
  };
};

let newFunc = myFunc.myBind(obj, 'a_random_id')
newFunc('New York') // Jack, a_random_id, New York

Now I think we have covered almost all the cases. But, still, if there is anything left, Let me know in the comment section.

Time to celebrate. You have implemented your own bind().

I hope this will be helpful for you.

The minimal server setup guide.

Uddesh — Sun, 02 Aug 2020 09:36:00 +0000

Setting up a server could be painful especially when you are in a hurry. Also, you can't just create an instance on cloud-like AWS or GCP and put your content and serve it. A server needs to be properly set up to secure it from attacks and serve content that you want.

In this post, we will go step by step to set up the server with minimum required things or you can say the right way. So without wasting any time let's get started.

At this point, I'm assuming that you have an instance created on cloud providers like AWS, GCP, or Digital ocean.

1: SSH to your server.

$ ssh -i location/to/your/private_key username@ipv4

This command allows you to ssh or login to your server.

2: The first thing after login into the server is update and upgrade the packages.

$ sudo apt update

$ sudo apt upgrade

Run these commands respectively.

3: Now to secure your server you should always disable root login to do so run this command.

$ sudo adduser user_name

Now, this command just asks for a password and all fill the required information. The command output will look like this.

4: After creating the user we need to add the user to sudo group and grant permission to perform superuser tasks.

$ usermod -aG sudo user_name

// This command will switch user to newly created user.
$ su user_name

5: Now change directory to home and add your ssh key for logging in into new user.

$ cd ~

$ mkdir -p ~/.ssh

// paste your local system public key here and save.
$ sudo nano ~/.ssh/authorized_keys

6: As we added new user we should disable root login now.

$ sudo nano /etc/ssh/sshd_config

This will open a file, find the line PermitRootLogin, and change yes to no.

7: To see these changes in action restart the ssh demon.

$ sudo service sshd restart

That's it for setting up and securing the server quickly.

Now for better security, you should configure your firewall too.

By default, the fireball is inactive you need to activate it first.

8: to see the fireball status.

$ sudo ufw status

9: To enable fireball.

$ sudo ufw enable

10: By default, fireball rejects all requests on all ports so you have to explicitly allow the ports you want to access.

$ sudo ufw allow ssh

$ sudo ufw allow http

These are the common services you need to allow.

After allowing these two fireball status should look like this.

That's it. Now your server is ready, install 'nginx' or apache and start serving your content.

I hope you will find this useful. I'll be back with another post until then Goodbye.

Getting familiar with Objects.

Uddesh — Sat, 11 Apr 2020 14:00:01 +0000

Objects are everywhere in JavaScript. Getting more knowledge of objects will definitely help you at some point in your journey. In this post, we will discover some properties and methods of objects that most the developers don't know about or didn't find useful.

I hope you are already familiar with the syntax of creating an object.

let obj = { key: "value" }

But did you know we can make lots of customizations on these keys and values?

Object.defineProperty method gives you the power to control the behavior of a property. Let's see how it works.

let obj = {}

Object.defineProperty( obj, "a", {
    value: 1,
    writable: false,
    configurable: true,
    enumerable: true
} )

defineProperty takes three arguments.

The object in which you are trying to create a property.
Name of the property.
A configuration object.

Now let's talk about configuration object.

value

Value could be any valid value you want to set on the key (a).

Writable

If you set writable as false. You will not be able to edit the value.

obj.a = "new value"   // Oops, not allowed.

Configurable

If we set configurable as true. We can change the behavior at any time with the same defineProperty method, but if you set it to false, you will not able to change it again. It's a one-way operation.

Enumerable

If we set enumerable to false, it will not be shown in enumerations like for...in loop.

Now, let's take a look at some builtin methods that prevent the extension of an object.

preventExtensions

As its name suggests. It will prevent you from setting more properties on an object.

let obj = { a: 1 };

Object.preventExtensions( obj );

obj.b = 2;   // in strict mode it will throw an error.

console.log( obj.b )   // undefined

Seal

This method works the same as preventExtensions, but it makes all existing properties as configurable: false. So you can't add new properties and also can't reconfigure it. Again one-way operation.

let obj = { a: 1 };

Object.seal( obj );

obj.b = 2;   // in strict mode it will throw an error.

console.log( obj.b )   // undefined

Freeze

This is the highest level of immutability. Freeze set all "data accessor" of an object as writable: false.

let obj = { a: 1 };

Object.freeze( obj );

obj.b = 2;   // in strict mode it will throw an error.

console.log( obj.b )   // undefined

These are the methods I found useful and interesting. If you know some more interesting methods, please comment down below. I will back with another exciting post, until then Bye.

Going serverless with firebase cloud functions.

Uddesh — Wed, 19 Feb 2020 19:08:58 +0000

Firebase provides many services. One of them is Cloud Functions. In this post, we are going to learn how to use cloud functions.

Understanding the problem that cloud functions solve.

I was working on a project in which I need to implement Push Notification whenever we get a new entry in the firebase database. For this, I need to execute a function that makes an API request to a URL.

Now to achieve this functionality you have to create an API run it on a server and keep track of new entries and so on.

Here Cloud Functions come in handy. You just need a function that performs action whenever this event occurs. That's it no backend and nothing fancy.

Implementation

Here comes my favorite part. We will go through step by step.

Here I'm considering that you already have a working project.

1) Install Firebase CLI

npm install -g firebase-tools

2) Login to Firebase

firebase login

3) Initialize Firebase Project.

firebase init

Note:- Keep all options default and choose Functions: Configure and Deploy Cloud Functions for features to use.

Now in the root directory of the project, you can see a new directory called functions which is created by Firebase.

In the functions directory, there will be an index.js file. You will see some already written code there.

const functions = require('firebase-functions');

// Create and Deploy Your First Cloud Functions
// https://firebase.google.com/docs/functions/write-firebase-functions

 exports.helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
 });

This is default code and it sends response Hello from Firebase! to the user. It will sound familiar if you previously worked on express.

4) Deploy Cloud Function.

firebase deploy --only functions

To see the response navigate to your firebase project then goto functions tab and find URL under the trigger tab. Open URL and you can see the message Hello from Firebase!.

If you are getting an error like this while deploying the function. Deploy it again it worked for me in the second deploy.

Going advance.

Now the goal was to trigger this function when we have a new entry in the Firebase database.

For this, we have to add some code to functions/index.js file.

const functions = require("firebase-functions");

exports.sendNotification = functions.firestore
    .document('posts/{id}')
    .onCreate(snapshot => {
        // Make api request or do anything you want.
    });

Let's try to understand the above code.

First of all, there are four functions available to keep track of activity in the database.

1. onCreate => Triggered when a document is written to for the first time.

2. onUpdate => Triggered when a document already exists and has any value changed.

3. onDelete => Triggered when a document with data is deleted.

4. onWrite => Triggered when onCreate, onUpdate or onDelete is triggered.

Here we are using onCreate that fires when we have a new entry in posts collection.

That's it we have cloud function that fullfils our needs and took very less time to setup.

I hope you enjoyed it and learned something from this. I will be back with another new post untill then bye.

Pagination in React.

Uddesh — Mon, 03 Feb 2020 18:05:13 +0000

Pagination is a type of feature you can find everywhere Bloggin website or on any E-Commerce website are the most common examples.

A few days ago I was working on a project in which I need to implement a blogging feature. Especially a timeline page where all posts will be visible. Now users can't see all posts at a time so it's a good idea to paginate data.

Now, there are a whole lot of libraries that can provide the same functionality but I don't want to use them. I want to create my own implementation and I haven't done it before. So I started searching for implementation on google. After a few hours of searching, I got nothing.

I found a few solutions but they were way complicated to understand. So I came up with my own solution. This solution may not be perfect but it's working for me.

Ok, so here how started picturing it.

1) In most of the pagination components, there are 7-page switching buttons. If we have data of length more then 7 pages.

As shown I picture below.

2) We need an array of page numbers to iterate and create page switching buttons.

Here is the logic for returning an array to iterate over.

   if (total <= 7) {
      let arr = [];
      for (let i = 1; i <= total; i++) {
        arr.push(i);
      }
      setPages(arr);
      return;
    }
    if (active <= 4) {
      setPages([1, 2, 3, 4, 5, "...", total]);
    }
    if (active > 4 && active < total - 3) {
      setPages([1, "...", active - 1, active, active + 1, "...", total]);
    }
    if (active > total - 4) {
      setPages([1, "...", total - 4, total - 3, total - 2, total - 1, total]);
    }

Here I have handled four cases.

If we have less content that will fit in less than 8 pages then we simply return an array with numbers from 1 - last page.
Now if we have content that will fit in more than 7 pages. We need 1 - 5 numbers and "..." and last page numbers like [1 2 3 4 5 ... 10] this. Also if the user clicks on page number 1 to 4. The array will be the same.
In the third case, we need pages like [1 ... 4 5 6 ... 10] this.
In fourth case pages will be [1 ... 6 7 8 9 10] this. (considering total pages are 10)

That's all. Take your time if you didn't get my point. Try to understand again. It's really simple.

This is a working example and code.

I hope it will help. See you soon.

Pulling the first Docker image and a few essential commands.

Uddesh — Sat, 04 Jan 2020 15:52:22 +0000

Today we will pull our first docker image and take a look at a few essential docker commands you need to know to get moving in this journey of docker.

Before we start, you should check out the previous post of this series if you are not familiar with docker, and it's the installation process.

Hello World is our favorite message when it comes to getting started with something. Isn't it?

So today, we will pull Hello World docker image from Docker Hub and run it. But first things first, What Docker Hub is?

Well, Docker Hub is a collection of Docker images either created by organizations (ex: nodejs, MongoDB, oracle) or by individual developers. Images on Docker Hub are ready to use images. Someone already configured them for you. You need to pull or download them to use.

Pull Command

Pull command downloads the docker image from the docker hub. That's it.

$ docker pull hello-world

Run Command

Run command used to run docker images that are pulled from the docker hub or build on the local machine. One more thing Run command first looks for images to run locally, and if it doesn't find the image, it will automatically pulls the image for you. So in case you are a bit lazy to pull and run an image. Just type the run command, and it will help you.

$ docker run hello-world

You will see something like this if you successfully ran the command.

Few more basic commands you need to know.

version command used to check the version of the docker.

$ docker version

info command gives you current status like the number of the running containers, paused, stopped, and all other things.

$ docker info

ps command will specifically tell you the information about running containers like container id, name, port, status, etc.

$ docker ps

-all flag will show you information about all containers.

$ docker ps -all

start command will start previously ran container again. Don't confuse between run and start. Run command used to run a new container.

$ docker start <process>

stop command will stop the running container as soon as a container finished its process.

$ docker stop <process>

kill command will stop the container immediately, no matter if it finished its process or not.

$ docker kill <process>

Now docker has a whole lot of commands that we will learn in the future, but I think these are the essential ones. I hope this will help you. I will back with other things about docker until then, Bye.

What and Why of Docker.

Uddesh — Tue, 24 Dec 2019 17:24:34 +0000

If you are a developer and an active community member, you must come across the term Docker. When I heard about Docker, the first question that arose in my mind is, What is Docker? And why is everyone talking about it? 🤔

In this post, we try to understand docker, and it's use cases and installation as well. So without any delay, let's dive into it.

What is Docker?

Docker is a tool that reduces the gap between Development and Deployment phase of a software development cycle.

Imagine the time when developers used to spend their time to make a machine compatible to run their code. They need to install all dependencies, setup database, and so on. This process was very time consuming, and it requires a specialised person to do this stuff.

Another scenario is, assume you have more than one application or webserver to run that uses different languages and versions of the software.

Now you may think this problem could be solved by using VMs (Virtual Machines) so...

Why Docker?

Virtual Machines makes the copy of the whole operating system, which will be GBs in size, whereas Docker needs only the part that you need to run your application. Take a look at the image below. It will help you to visualise the difference.

Docker is like an airtight container that runs independently without interrupting to other processes. This is the reason you can run as many containers you want at a time. Another benefit is, Docker containers are sharable. You need to run a few docker commands, and the application is ready to run, You don't have to invest time in setting up the environment. Now the days are gone when developers use to make an excuse that it works on my machine.

Installing Docker.

Go to docker official page
Signup or log in.
Download Docker Desktop.
Install and login to Docker Desktop.
Open Terminal and run docker command.

You will see something like this.

Congratulations you have successfully installed docker, and it is ready to use now.

In the next post, we will learn how to use official docker images and other commands.

Until then, Bye.

Authentication with Google in NodeJS

Uddesh — Wed, 02 Oct 2019 20:11:42 +0000

While working on OAuth for a long time. I have finally understood the flow. But a few days back I had no idea how OAuth works and I was very frustrated and I need to implement it. So I just started to write some code and messing around with Gmail API. After scratching my head for the whole night I was able to login with google. So I thought I should share the process.

Now without further delay let's get started.

1) Goto google developer console.

2) Create a new project

3) Select the project and click credentials in the sidebar.

4) Now select OAuth client ID

5) Now Select Web Application in application type. The name could be whatever you want, in Authorized JavaScript origins add this line

http://localhost:5000

and in Authorized redirect URIs field add this line

http://localhost:5000/auth/google/callback

and click on create.

6) Download the credentials JSON file by clicking on the tiny download button.

Your credentials JSON file should look like this after few changes.

{
    "client": {
        "id": "put you id here",
        "secret": "put your secret key here",
        "redirect": "http://localhost:5000/auth/google/callback"
    },

    // Don't change the code below this line

    "credentials": {
        "access_token": "your access_token",
        "token_type": "Bearer",
        "expires_in": 3600,
        "refresh_token": "your refresh_token"
    }
}

7) Now open your favorite code editor (mine is vscode) and create an index.js file and put the credential JSON file in the same folder.

8) run npm init command and just set all options to default.

9) Install express npm i express and google API package npm i googleapis

10) Rename your credential JSON file to google_key.json. Just an extra step you can name whatever you want.

11) Paste this code below in index.js file.

const { google } = require('googleapis');
const express = require('express')
const OAuth2Data = require('./google_key.json')

const app = express()

const CLIENT_ID = OAuth2Data.client.id;
const CLIENT_SECRET = OAuth2Data.client.secret;
const REDIRECT_URL = OAuth2Data.client.redirect

const oAuth2Client = new google.auth.OAuth2(CLIENT_ID, CLIENT_SECRET, REDIRECT_URL)
var authed = false;

app.get('/', (req, res) => {
    if (!authed) {
        // Generate an OAuth URL and redirect there
        const url = oAuth2Client.generateAuthUrl({
            access_type: 'offline',
            scope: 'https://www.googleapis.com/auth/gmail.readonly'
        });
        console.log(url)
        res.redirect(url);
    } else {
        const gmail = google.gmail({ version: 'v1', auth: oAuth2Client });
        gmail.users.labels.list({
            userId: 'me',
        }, (err, res) => {
            if (err) return console.log('The API returned an error: ' + err);
            const labels = res.data.labels;
            if (labels.length) {
                console.log('Labels:');
                labels.forEach((label) => {
                    console.log(`- ${label.name}`);
                });
            } else {
                console.log('No labels found.');
            }
        });
        res.send('Logged in')
    }
})

app.get('/auth/google/callback', function (req, res) {
    const code = req.query.code
    if (code) {
        // Get an access token based on our OAuth code
        oAuth2Client.getToken(code, function (err, tokens) {
            if (err) {
                console.log('Error authenticating')
                console.log(err);
            } else {
                console.log('Successfully authenticated');
                oAuth2Client.setCredentials(tokens);
                authed = true;
                res.redirect('/')
            }
        });
    }
});

const port = process.env.port || 5000
app.listen(port, () => console.log(`Server running at ${port}`));

12) Run index.js

Google will ask you to sign in and allow access. Then you will be signed in and as we are fetching only Gmail labels in this API. You will get output in the console like this.

Note:- If you get some error due to not having https enabled don't panic. Click on See more button and allow google to access your profile manually.

Click on show advance and then click on Go to 'your app name'(unsafe) and allow it.

I hope this will help. I'll be back with another one, until then Bye.

Building first web server with NodeJS

Uddesh — Thu, 20 Jun 2019 19:10:59 +0000

This is the first part of the series. In this series, we will start with the basics of NodeJS and move towards building a Restful API with all the features like Authentication, Database integration and much more.

Now the first question comes in mind is Why Node ?

NodeJS is a runtime environment of JavaScript so the developers already familiar with JavaScript can easily learn and use NodeJS.
Another benefit is Single threaded event loop that is responsible for abstracting I/O from external requests. There are many more reasons as well but these two are sufficient I think.

Now without wasting any time, we will directly jump to building an amazing restful API.

We will use express to build this API. If you have any queries regarding express go to their homepage and try to read the documentation.

Environment setup

Download and Install NodeJS. Go for the LTS(long term support) version if you are confused.
Download and install your favorite code editor. I prefer VSCode
Create a project directory.
Open terminal (windows user can use git bash), browse to project directory and write npm install express and hit enter.
That's it for now.

Hello World in Node

As you are already familiar with JavaScript hello worlds. It will be the same for Node.

console.log('Hello World')

First Web Server with Node and express

const express = require('express')
const app = express()

app.get('/', (req, res) => {
    res.send('Hello World')
})

const port = process.env.PORT || 3000
app.listen(port, () => console.log(`App is listning on port ${port}`))

Explaination

In the very first line of the above code, we imported the express module which returns a function that we stored in a variable called express. In the second line, we called express function which returns an object and we stored it in a variable called app. After that, we have written the code to handle GET request. This get method takes two arguments.

The path or the URL i.e. '/' (Root of the website)
A callback function that will be called when we have an HTTP GET request. Now, this callback has two arguments req i.e. request and res i.e. response. The response is used to send the responses we want.

Now there are many different types of requests and we will talk about them in the upcoming posts.

In the last two lines, we are setting a port to listen to the requests.
We passed the port number and an optional callback function (it will log a message to the console) in the listen method.

Now to check things working properly

Run the program node
Open your favorite browser and goto localhost:3000. You will see a Hello World that indicates everything is working fine.

Finally Congrats you have successfully created a web server that can respond to your get requests.

Happy learning.

Spread Operator(...) in JavaScript.

Uddesh — Sun, 07 Apr 2019 06:45:12 +0000

Hello again, Just a quick reminder, This is the third part of the series Strange JS so if you haven't checked out yet go and read previous two posts.

So without further wasting time let's get started. Today we are gonna talk about Spread Operator but I call them Super Dots because I like it. 🙃

Now the biggest question is What the hack is Spread Operator??

In simplest words Spread Operator convert a list into an array and an array into a list. Sounds confusing?

Let's understand with some examples. Assume that you created a function which takes 2 or 3 arguments and you just called that function but you have an array and function needs a list. for example.

function sum(a, b, c) {
    console.log(a + b + c)
}

let array = [1, 2, 3]
sum(...array)

// 6

This was the one scenario, but it can be used for a variety of cases like array manipulation.

You can concat two arrays.

const num = [1,2,3,4]
const words = ['Hey', 'Hellow']

console.log([...num, ...words])

//[1, 2, 3, 4, "Hey", "Hellow"]

These are only two examples but it can be lots of use cases so get your hands dirty with Spread Operator.

I'll be back with something new and strange until then Good bye.