DEV Community: Ganesh Yadav

Launch Your SaaS Startup with Ease | Shipzo.pro Next.js Boilerplate Coming Soon

Ganesh Yadav — Fri, 29 Nov 2024 17:53:08 +0000

Attention developers and SaaS enthusiasts! Imagine having the tools to kickstart your SaaS business in record time. We’re working on something groundbreaking—a Next.js boilerplate designed to redefine how you build, scale, and launch SaaS products.
Though the full release isn’t here yet, you can join us early and be the first to know!

Why Sign Up Now?

We’re building something that will:

Simplify SaaS development: Eliminate the hurdles of starting from scratch.
Accelerate your launch: Spend less time setting up and more time growing your business.
Empower your creativity: Lay a robust foundation and focus on innovating.
Empower Your Ideas: Build your SaaS product effortlessly and focus on innovation.
Transform Your Startup Journey: Skip the complexities and launch with confidence.

While we’re keeping details under wraps for now, signing up ensures:

Exclusive Early Updates: Be the first to know when we’re live.
Priority Access: Join an insider community shaping the future of SaaS development.
Special Launch Offers: Get perks only available to early adopters and early signed-up users only.

Be Part of the Journey—Sign Up Today!

Don’t miss out on this chance to transform the way you build SaaS applications. The journey is just beginning, and we want you on board.
👉Sign up now to reserve your spot and stay updated!

Keep an Eye Out for What’s Next

We’re excited to bring this to life and share the full potential of our boilerplate with you soon. By signing up, you’ll ensure you’re part of the revolution from the start.

Be the first to know. Be the first to build. Be the first to succeed.

Shipzo: Launch Your SaaS Startup in Hours with Best Saas Template

Our NextJS boilerplate help's you to ship your Saas in just hours which come with build in template and other stuff that help you to make $ online

shipzo.pro

Decoding System Design of Rate Limiter: 1( Your Goto Protector for backend APIs)

Ganesh Yadav — Sun, 04 Aug 2024 16:30:13 +0000

Hello readers and welcome back to another article series in which we will decode the system design of a conventional rate limiter and further in the later part we will build our own rate limiter using node.js, so let's get started.

What is a Rate Limiter and what is the Purpose of using it?

The Rate limiter is a limiting technique used to limit network traffic. A kind of filter it puts a cap on how often someone can repeat an action in a given timeframe. e.g. Posting on social media from your account in a given time frame.

In HTTP world a rate limiter would simply limit the number of client requests allowed to be sent over a specified period of time. If the API request count exceeds the threshold defined by the rate limiter, all the excess calls are blocked

The rate limiter helps us to maintain your system performance, by limiting traffic which is directed at an API or on our system, further also rate limiter help us to prevent our system from various malicious activities such as Bot attacks, DDos Attacks and Web scrapping.

Rate limiting also protects against API overuse, which is not necessarily malicious or due to bot activity, but is important to prevent nonetheless.

Where to put the Rate Limiter?

Let us think, about a basic simple client and server application, the rate limiter can be implemented on both sides either by the client or on the server side.
Client-side Implementation: The client-side implementation of the rate limiter is unreliable due to its prone nature of getting forged by malicious actors and uncontrolled behaviour.
Server-side Implementation :Server side implementation is basically added to our backend server as shown below in the diagram.

However, there is another method by which we can implement the rate limiter other than client and server-side implementation. Instead of implementing a limiter at server API, we can implement a rate limiter as a middleware which is also the technology provided by express in node.js. In Express also we can use their in-built rate limiter as a middleware, below is the representation of it.

let us learn how this type of implementation of rate limiter works, suppose your backend APIs support a maximum of 3 requests per second but the client 4 requests per second, in this situation the first 3 requests get passed through the middleware towards the server and the last request will throttle by the rate limiter middleware and will return an HTTP status 429 which means that client has sent to many requests over a period of time. Below is the illustration for the same.

API Gateway:

Nowadays, Cloud microservices a gained significant popularity due to their fully managed services which include services like rate limiting, SSL termination, IP whitelisting, authentication and services static content and these services are included in a simple component called an API gateway.

Although designing a rate limiter can be a tedious task if one does not have enough resources, then you can simply take these fully managed cloud microservices they provide this API gateway which includes an inbuilt rate limiter, the popular example is Amazon API gateway.

Algorithms for Rate Limiter:

There are some great algorithms for building the rate limiter of our choices but each of these different algorithms has its pros and cons, algorithms are listed below

Token Bucket
Leaking Bucket
Fixed window counter
Sliding window log
Sliding window counter

Token Bucket:

Token Bucket algorithm is a simple algorithm which is used to build a rate limiter it is simple and well-understood and it is used by most organisations such as Amazon and Stripe to throttle their API requests.

The algorithm approach is simple, each token Bucket has a fixed capacity in which tokens are filled at a preset interval the bucket gets filled with capacity the token will overflow

when the request arrives we will check for the token if it is available inside the bucket and the request will be allocated this token and passed towards the API server and token count will be decremented from the bucket, but if there is no token available inside the bucket the request will be throttled back with status code 429, below is the basic implementation of the same.

The token bucket algorithm takes two parameters the bucket size and refill rate, the bucket size corresponds to bucket capacity and the refill rate is the rate at which the token gets filled in the bucket per second.

while working with bucket tokens, we need to consider the number of tokens should we use, this depends on the system requirement that you are trying to build suppose you want to throttle the request based on IP address, then you need to add each bucket for each API.

But if you want to configure 10000 requests for your system then the global bucket is the best option for the system, below is the high-level implementation.

Leaking Bucket:

The leaking bucket algorithm is similar to a token bucket but except for the token, it redirects the request to Queue(FIFO), if the queue is empty the requests are processed if the queue is full the request is throttled back or dropped with status code 429, the successful request is then pulled from the queue and processed at a regular interval.

The leaking bucket algorithm takes two parameters, the bucket size which is the same as that of the queue and the outflow rate it defines how many requests should be processed at a regular interval.

Shopify an e-commerce building platform, uses this type of rate limiter on their system, below is the representation of the leaking bucket algorithm.

Summary:

So in this part of the decoding rate limiter, we get to know insight about the rate limiter that is used in modern industries and how they are implemented in such a way that it can reduce the negative impact and the complication that our API faces in case of DDoS attacks and heavy network traffic, we also learn about how to implement this rate limiter our system, we also learn about the two types of algorithms that are widely used in implementation rate limiter.

Although covering all the algorithms is out of scope for this single article i.e., I have covered two algorithms for now and in the later part we will cover the remaining algorithm and also implement our own rate limiter using node.js.

So, stay tuned for the next article.

I have learnt this on the internet and some of the references, I have mentioned below do checkout the link for in-depth understanding.

cloudflare.com

Aggregation Pipeline in MongoDB and the use of $match and $group operator (Part 2)

Ganesh Yadav — Thu, 25 Jan 2024 17:54:54 +0000

Hello and welcome back readers, sorry for the delay in this second part of the MongoDB Aggregation Pipeline series, where we are going to explore the power of the Aggregation Pipeline provided by MongoDB to make a developer's life easy.

If you are new to this article, I would like you to check the first part of the series by clicking here, and for the readers who are reading it on a continuous track let's first revise what we have learned till now.

Till now we have a clear understanding of what is aggregation in MongoDB and what are the different types of aggregation provided by MongoDB such as

Map Reduce Function
Single Purpose Aggregation
Aggregation Pipeline

In this article, we will deeply explore the power of the aggregation pipeline provided with the use of $match and $group operators.

Aggregation Pipeline using $match operator:

$match operator filters the documents to pass only the documents that match the specified conditions to the next pipeline stage.

In General, if you have applied a $match operator to a set of data with mentioned expressions/fields then it will filter out only the documents that will match the field on each document and return the documents.

//Syntax

Syntax:  { $match: { <query> } }

let us understand the $match operator with the basic example where we have the collection of student data

//Collection Students
{ "_id": ObjectId("512bc95fe835e68f199c8686"), "student": "Dave Smith", "score": 80}
{ "_id": ObjectId("512bc962e835e68f199c8687"), "student": "Dave Smith", "score": 85}
{ "_id": ObjectId("55f5a192d4bede9ac365b257"), "student": "Ahn ben", "score": 60}
{ "_id": ObjectId("55f5a192d4bede9ac365b258"), "student": "li xin", "score": 55}
{ "_id": ObjectId("55f5a1d3d4bede9ac365b259"), "student": "Ben hue", "score": 60}
{ "_id": ObjectId("55f5a1d3d4bede9ac365b25a"), "student": "li xin", "score": 94}
{ "_id": ObjectId("55f5a1d3d4bede9ac365b25b"), "student": "Peter parker", "score": 95}

//Now if we apply the $match operator to the above collection with the student's name 
//Dave Smith We get only the documents in which the student is Dave Smith

db.students.aggregate([{$match:{student:"Dave smith"}}])
//we will get the results as shown below
{ "_id": ObjectId("512bc95fe835e68f199c8686"), "student": "Dave Smith", "score": 80}
{ "_id": ObjectId("512bc962e835e68f199c8687"), "student": "Dave Smith", "score": 85}

Aggregation Pipeline using $group operator:

Now we can move to the next operator which is the $group operator, as we know in the aggregation pipeline there is a series of stages which we can introduce, to extract a certain kind of data as per our requirements.

The $group stage separates documents into groups according to a "group key". The output is one document for each unique group key.

syntax:     { $group: { _id: , // Group key : 
              <field1>: {<accumulator> :<expression> }, 
                  ... 
                      } 
             }

The above definition of group operator generally refers to, when it is applied on a set of documents it will return a set of documents with each document containing the field _id as the first field followed by the second field in which the group is done.

for example, as shown below the group operator is applied in the student collection.


//Our student's collection with the name of the student as field "student"
{ "_id": ObjectId("512bc95fe835e68f199c8686"), "student": "Dave Smith", "score": 80}
{ "_id": ObjectId("512bc962e835e68f199c8687"), "student": "Dave Smith", "score": 85}
{ "_id": ObjectId("55f5a192d4bede9ac365b257"), "student": "Ahn ben", "score": 60}
{ "_id": ObjectId("55f5a192d4bede9ac365b258"), "student": "li xin", "score": 55}
{ "_id": ObjectId("55f5a1d3d4bede9ac365b259"), "student": "Ben hue", "score": 60}
{ "_id": ObjectId("55f5a1d3d4bede9ac365b25a"), "student": "li xin", "score": 94}
{ "_id": ObjectId("55f5a1d3d4bede9ac365b25b"), "student": "Peter parker", "score": 95}

//Now if we group the collections based on the student as _id 
db.students.aggregate([{$group:{_id:"$student"}])

//_id is mandatory field for applying $group which always takes the filed in
//which you want your collections to be grouped
//will always return the total distinct names present inside your collections
{"_id": "Dave Smith"}
{"_id": "Ahn ben"}
{"_id": "li xin"}
{"_id": "Peter Parker"}

Now from the above two operators, it is clear that $match can be used when you want to filter out the document based on a certain field and $group can used to group the particular collection based on the "Group key".

Similarly, as we know there can be multiple stages in an aggregation pipeline and we can introduce any number of stages as much as we want, Now we will try to add these two stages in our next example, which utilises both $match and $group operator.

Problem Statement for Two-stage Pipeline:

We want to find the name of the Student who has scored greater than or equal to 80.

From the above problem statement, it is clear that we can use the $match operator to find the student with a score greater than or equal to 80 because in our collection we have the document with a duplicate student name as the student can be present twice, so we have to also use $group operator to also find distinct value.


//Our student's collection with the name of the student as field "student"
{ "_id": ObjectId("512bc95fe835e68f199c8686"), "student": "Dave Smith", "score": 80}
{ "_id": ObjectId("512bc962e835e68f199c8687"), "student": "Dave Smith", "score": 85}
{ "_id": ObjectId("55f5a192d4bede9ac365b257"), "student": "Ahn ben", "score": 60}
{ "_id": ObjectId("55f5a192d4bede9ac365b258"), "student": "li xin", "score": 55}
{ "_id": ObjectId("55f5a1d3d4bede9ac365b259"), "student": "Ben hue", "score": 60}
{ "_id": ObjectId("55f5a1d3d4bede9ac365b25a"), "student": "li xin", "score": 94}
{ "_id": ObjectId("55f5a1d3d4bede9ac365b25b"), "student": "Peter Parker", "score": 95}

//we will be using two stages here for extracting the data
db.students.aggregate([ 
                     {  //first stage will find the document with the score
                        //greater than or equal to 80
                       $match:{"score":{ $gte:80 }}
                     },
                     {  //second Stage will group that distinct name from each document got from the first stage
                       $group:{ _id: "$student"}
                     }
                     ])

//The result we get from this two-stage pipeline is 
//In the first stage we get the four documents with similar names  Dave Smith two times
//from the second stage we will group those documents based on distinct student name
{"_id": "Dave Smith"}
{"_id": "li xin"}
{"_id": "Peter Parker"}

Conclusion:

In this Article, we now get a basic understanding of what is the $match and $group operators, why it is used and how they minimize the filter techniques which involve a tedious process at the front end if it is not filtered from the backend.

But MongoDB's aggregation pipeline can do this thing in merely two lines of command to extract the particular required data, and that is what we call the essence of MongoDB Aggregation Power which can solve a bigger problem.

I hope you like this article a lot and would appreciate my work, I have learned this thing from the internet as well do check the below link, and also stay tuned for further part of this series

Do Like, Comment, Share and Subscribe to my Newsletter for getting my work directly in your inbox.

mongodb.com

Introduction to Aggregation Pipeline in MongoDB (Part 1)

Ganesh Yadav — Sun, 14 Jan 2024 15:46:49 +0000

Hello and Welcome back readers to this amazing series in which we are going to explore deeply the MongoDB aggregation pipeline and how it reduces the number of steps and simplifies the process of data extraction from your database.

But Before moving forward with Aggregation Pipeline, let us learn what are the diiferent types of aggregation that are available or provided by MongoDB.

Types of Aggregation in MongoDB:

So MongoDB provides three types of Aggregation

Map Reduce Function
Single Purpose Aggregation
Aggregation Pipeline

Map Reduce Function:

Map Reduce is used for aggregating results for a large volume of data. Map reduce has two main functions one is a map that groups all the documents and the second one is the reduce which operates on the grouped data.

Although the Map Reduce type of Aggregation is not generally used, because MongoDB provide an Advance Aggregation Pipeline, we will see this Map Reduce for learning purposes and how it is used, the basic syntax for map-reduce aggregation is as follows,

db.collectionName.mapReduce(mappingFunction, reduceFunction, {out:'Result'})

You can see from the above expression, that for the map-reduce type of aggregation, we have to provide three arguments, which are mappingFunction, reduceFunction and out Results format.

The mappingFunction generally selects a key or the fields from the document that is generally mentioned inside the mappingFunction.

These selected types of Documents are then fed as the input to the reduceFunction which performs operations to those selected documents and provides the out Results in the form new Collection.

Now Let us See an Example using Map Reduce,** Where we will group the documents based on age and find total marks in each age group.**

//let the students collections has documents as
{
id:ObjectId("1384y125y1857405745c6d"),
Name:"zack",
age:19,
totalMarks:30
},
{
id:ObjectId("1384y125y1857405745c6d"),
Name:"ray",
age:27,
totalMarks:15
}
{
id:ObjectId("1384y125y1857405745c6d"),
Name:"hiro",
age:27,
totalMarks:30
},
.........
//we can apply map reduce, method of aggregation to 
//calculate the total marks with a particular age group
//here we are mapping the selected key such as age and marks
const mapfunction = function(){emit(this.age, this.totalMarks)}
const reducefunction = function(key, values){return Array.sum(values)}
db.studentsMarks.mapReduce(mapfunction, reducefunction, {'out':'Result'})
//So, we will create two variables first mapfunction 
//which will emit age as a key (expressed as “_id” in the output) and 
//marks as value this emitted data is passed to our reducefunction, 
//which takes key and value as grouped data, and then it performs 
//operations over it. After performing reduction the results are stored 
//in a collection here in this case the collection is Results.
//the results of the operation is stored inside new collection created as
//Results and when we find the document inside these Results collection as
db.Results.find()
{_id:19, value:30}
{_id:27, value:45}
//here we calculated the total marks for each age group

Single Purpose Aggregation:

This type of aggregation is generally used for simple operations such as counting the number of documents present inside the collections and such as fetching the distinct student's name inside our student collection.

The Basic syntax for single-purpose aggregation is shown

//Single Purpose Aggregation
//for finding all distinct student name
db.students.distinct("name")
//will return array of distinct name present inside the collection
["zack","ray","hiro"]

//for finding total count of document
db.students.count()
//return a number of total count of document inside the particular collection
3

Aggregation Pipeline:

Now, we move forward to the next type of aggregation, which is most widely used and is recommended to use for simple as well as advanced aggregation.

As the name suggests, a pipeline is generally a series of stages where the output of one stage is fed as the input of another stage, depending upon your requirements you can put as many stages as you want until you get your desired results.

The basic definition of MongoDB Aggregation Pipeline is mentioned in their official documentation as follows:

"An aggregation pipeline consists of one or more stages that process documents"

Each stage operates on the input documents. For example, a stage can filter documents, group documents, and calculate values.
The documents that are output from a stage are passed to the next stage.
An aggregation pipeline can return results for groups of documents. For example, return the total, average, maximum, and minimum values. The general syntax for the aggregation pipeline is shown

db.collectionName.aggregate([])
//this array inside aggregate function is called the pipeline array which
//generally carries your stages of pipeline and expression insde it.

//Advnaced syntax breakdown
db.collectionName.aggregate([{$group:  //stage
                             { _id:"$id", //Expression
                              total:{$sum:"$fare"}}}])
                            //Accumulator

From the Above Expression, it is clear for using the aggregation pipeline in MongoDB we have to use the .aggregate method as well as we have to provide the pipeline array inside it where all the stages and filtering happens.

The advanced Aggregation pipeline generally uses multiple stages but they have some common things such as there should be the compulsory a Stage operator and there should be also the Expression present which generally refers to the input field inside the actual document in which the aggregation is going to occur such as age and totalMarks field and the third one is called accumulator which generally refers to the thing you want after you filter or grouped the document, such as sometimes we have to $sort the output or we have to $count of all the document present after the pipeline happens.

Conclusion:

So, till now we only got to see what is the aggregation and what are the different aggregation methods that are provided by MongoDB and the most widely used technique of aggregation,

In the further part of this series, we will be going to explore in depth the different stages and grouping operators provided by MongoDB to carry out aggregation pipelines such as $match,$group,$unwind, and $lookup, and how to optimize these aggregation stages to get the required results in the optimized format.

So stay tuned for the further part of the series, as we will explore this beautiful concept of aggregation pipeline in MongoDB.

Do Like, Comment, Share and Subscribe to my Newsletter for getting my work directly in your inbox.

Authentication Using Context in Graphql (Part 4)

Ganesh Yadav — Fri, 12 Jan 2024 17:44:26 +0000

Hello and welcome back once again, to this beautiful series where we are going to explore deeply, what is graphql and how it is been used in today's web development you can read all the previous articles related to this series by clicking here.

Till now, up to the 3 parts of this series which we have discussed previously, we have learned a lot of things in graphql such as

Benefits of using Graphql over REST API.
What is typeDefs, resolvers, and input.
What are the queries and mutations in graphql?
What are Aliases, arguments and fragments in graphql?
We have also seen, what are the parameters accepted by resolvers.
How to Set up our graphQL server.

Now, In this article, we will learn more about the Context in graphql and how to use it in resolvers to provide authentication and authorization.

During a GraphQL operation, you can share data throughout your server's resolvers and plugins by creating an object named contextValue.

Your GraphQL API probably needs to control which users can see and interact with the various data it provides.

In software development, you can control this access of data to the user by using the concept of authentication and authorization, and we can also use this technique in graphql by using contextValue provided by graphql.

Authentication is determining whether a given user is logged in, and subsequently determining which user someone is known.

Authorization is then determining what a given user has permission to do or see.

Putting authenticated user info in your ContextValue:

Whenever we want to restrict the user from accessing certain data, we can authenticate the user in the contextValue, this process of **authenticating **the user in grapql can be done with multiple techniques but one of the very widely used methods is to provide the including HTTP headers and JSON web tokens.

The example below extracts a user token from the HTTP Authorization header included in each operation request. It then fetches the corresponding user object for that token and adds it to the contextValue Object that's passed to every executing resolver. Each resolver can then use this object to determine what data the user has access to.

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

const { url } = await startStandaloneServer(server, {

  // Note: This example uses the `req` argument to access headers,
  // but the arguments received by `context` vary by integration.
  // This means they vary for Express, Fastify, Lambda, etc.

  // For `startStandaloneServer`, the `req` and `res` objects are
  // `http.IncomingMessage` and `http.ServerResponse` types.
  context: async ({ req, res }) => {
    // Get the user token from the headers.
    const token = req.headers.authorization || '';

    // Try to retrieve a user with the token
    const user = await getUser(token);

    // Add the user to the context
    return { user };
  },

});

console.log(`🚀 Server listening at: ${url}`);

Note: In Graphql, Because your contextValue is generated for every request, you don't have to worry about cleaning the user Data at the end of each operation execution.

From the above code, it is clearly understood that a contextValue is a asynchronous function which returns an object, this object is then accessible to your server's resolver.

How to Utilise this ContextValue in Resolvers:

Since we have created a contextValue function in our server, we can now use this contextValue in the resolver to authenticate the user, Let us see how it is done.

import { GraphQLError } from 'graphql';

const resolvers = {
  Query: {
    // Example resolver
    //we can use contextValue, in third parameter of our resolver
    adminExample: (parent, args, contextValue, info) => {
      if (contextValue.user !== ADMIN) {
        throw new GraphQLError('not admin!', {
          extensions: { code: 'UNAUTHENTICATED' },
        });
      }
      else{
        //You can now allow users to access the data
       }
    },
  },
};

In this way, using the contextValue we can now make our graphql server that has the ability to authenticate and authorize the user with particular access to the data based on eligibility.

Conclusions:

Overall, by reading this article we can clearly understand how to authenticate the user using contextValue and how to create this contextValue function inside our server which will return an object.

I hope you find the article valuable and worth reading to gain some insight about contextValue in graphql, I have learned this topic on the internet and as well as graphQL docs which will be shared below, check out these graphql docs to have a better understanding of the topics.

Liquid error: internal

Mutation in GraphQl and how to perform Create,Update and Delete(Part 3)

Ganesh Yadav — Mon, 01 Jan 2024 08:52:17 +0000

Hello Readers and welcome to another article of the series in Mastering Graphql, if you are reading this on a continuous then thank you, and if you are new to this article then I would like you to visit and read the previous parts of the series here.

Now, let us shift our focus to how to create, update and delete a particular data in graphql using the mutation keyword, as we had learned from the previous article graphql is a query language, and to get a particular data we use the query keyword, we have also seen what the use of aliases and arguments.

Mutation:

Most discussions of GraphQL focus on data fetching, but any complete data platform needs a way to modify server-side data as well.

And there comes mutation, as the name suggests, mutation generally refers to the changes, and in graphql mutation is the keyword that is used for mutating the data, which is similar to POST, DELETE and PATCH requests in REST.

Now let us look at each of the examples one by one, such as creating, updating and deleting data using mutation

Create Data using mutation:

Let's now once again head back to our Apollo Studio and the example of adding a post which we discussed in the previous parts, but before moving forward let us see the structure of our mutation, which we going to use to create a post.

you can see that the structure for the creation of a post is what we get as a response.

But, In general, in Apollo Studio you also have to pass the required variable to create a post in this case the post and addPostInput are the type that we have to include in our typeDefs folder which we created during our server creation

//tpeDefs.js
type Mutation {
//addPost is the mutation which returns a particular Post
addPost(post:addPostInput!):Post!
} 

input addPostInput{
  image: String!
  description: String!
  //you can more fields
}
//Furthermore this mutation and add Post need to be resolved in resolvers.js

//resolvers.js
Mutation :{
//you can use the async function as well for error handling
 addPost: (_,args)=>{
       //this is your request which the user sends and post is a variable
       const {image,description}=args.post
        //your logic for handling and validating the request and 
        //save the data in the particular Database
        //e.g. for MongoDB, you can use Models to save the data
    },
}

we can see, how the data is created using mutation and arguments passed as a variable, such as the Apollo studio responds with data that we have created.

Delete Data using mutation:

Deleting data in the graphQL is somewhat similar to what we do in the REST API, in this for deleting a particular data you can pass the argument to a mutation similar to what we did in creating data, but instead, the argument field needs to be a unique value for identifying the particular data or object.

let us now see an example of deleting a post, with a unique postId

//typeDefs.js
type Mutation {
//id represents a unique value for a particular data
deletePost(id:ID!):Post!
}   
// mutation and query which we create in typeDefs needs 
//to be resolved inside  resolvers.js

//resolvers.js
//you can use the async function as well for error handling
deletePost: (_,args)=>{
       //extract the unique value passed through an argument using a variable
        const {id} = args
       //your inside logic for validating a request and deleting a post
      // e.g. in case of MongoDB we use findbyIDAndDelete(id)
      //Return the deleted post or a response
    }

Let us now actually, see how it works in Apollo Studio, how we pass the argument to delete a post, below is a variable as deletePostId the id of the post which we want to delete

Update Data using Mutation:

Updating data in graphql is also similar to REST, but unlike REST which has both the requests such as PUT and PATCH, graphql offers only mutation which can be utilized in both cases based on developer choice, so you have control over whether you want to update only a certain field which user mentions or update a whole data.

We will be utilizing mutation for only the field which the user wants to update, based on arguments passed for updating the data.

let us visualize it in typeDefs and resolvers, which are shown below.

//typeDefs.js
type Mutation {
//we have mention also id here for selecting the post and then updating it
updatePost(id:ID!,update:updatePostInput!):Post!
}

input updatePostInput {
//you can mention your update post field or add more field
image: String,
description: String
}

//resolvers.js
//you can use the async function as well for error handling
updatePost: (_,args)=>{
     //extracting the arguments variable passed 
        const {id}=args
        const {image,description}=args.update
      //logic for validation of the request for the particular id
     // and then updating the required fields which is mentioned
    // e.g. in MongoDB we can use findByIdAndUpdate(id) to update the data
    //return the updated post 
}

Let us now, see how it happens in Apollo studio we are going to pass only one field for updating the particular post along with postID which we have created, during our create post segment, see above.

In the above, we can see how the arguments are passed to update a particular post, you can also see that the update variable only contains a description field which is required to update and hence it is updated successfully as seen in the response.

Conclusion:

From the Above discussion, we now clearly understand the concept of creating, updating and deleting in GraphQL, how it is done using the Mutation keyword, and why there is only a requirement mutation keyword for making the three types of requests available in graphql, which is not in the case of REST APIs and that why the GraphQl also have the upper hand on this type of usage.

Furthermore, until now till these 3 Parts, we can now clearly understand how to fetch data, create data, delete and update the data in grqpgL and perform CRUD operations using both the query and mutation keywords.

please leave a comment, if you have any questions or feedback.

GraphQl with Apollo Server and usage of Query, Aliases,Arguments, Fragments (Part 2)

Ganesh Yadav — Sun, 24 Dec 2023 15:51:07 +0000

Hello and welcome back to another article of the GraphQl series, if you are new to this article I recommend you to visit Part 1 of this article series by clicking here.

In the previous article, we learned about what graphql is, why it is used and what problem it solved which was in the case of REST, further we have also set up our graphql server using Apollo Server.

Now, in this article, we will dive deeper into the functionality of graphql and how to perform advanced Query operations in GraphQL.

Query :

As the name suggests, it's just a query for the specific fields of value that you want on objects. Let's start by looking at a very simple query and the result we get when we run it:

In GraphQl, we represent a query by the keyword "query" at first followed by the name of that particular query e.g. "hero" and the set of fields you want to get as data, for e.g. in the above case look at the query structure and the response structure we get when we queried "hero" both are exactly same we get what we want and that is the most important aspect using GraphQl over REST.

Queries are mostly used for getting the data, just like the GET in REST API, while for updating and manipulating the data in graphql we have another keyword called "Mutation" which we will see later. Now let us head to our server playground which we have created in Part 1.

In the above image of our Apollo server sandbox, you can see that we have a query "getAllPost" and mention the field "description and look at the response structure we get from the server, which is exactly the same as the query.

Arguments :

GraphQl also allows us to pass the argument to our query and we pass different arguments based on our requirements, whenever we pass the arguments to our queries we also have to resolve it in the "resolvers", that we have passed in while creating the Apollo server.

Suppose we want to get the posts of a single user, this can be done by just passing userID as an argument and creating the query for it e.g. userPost(id: ID!) Now we have to resolve it in resolvers as shown below.

//resolvers.js
 const resolvers={
Query:{
userPost:async(parent,args,context,info)=>{
      try {
          //extract id from args
            const {id} = args
          //your logic for getting single post
          //return postModel.findOne({userID:id})
         }
      catch{
            //default error logic
          } 
      }
    }
}

while resolving the particular query which has an argument passed, graphql basically accepts four parameters to resolve the query.

parent: The previous object, which is for a field on the root Query type is often not used.
args: args represents the argument which you specifically passed to a query.
context: A value which is provided to every resolver and holds important contextual information like the currently logged-in user, or access to a database.
info: A value which holds field-specific information relevant to the current query as well as the schema details.

From the above-mentioned code snippets, we can clearly see that we can extract the variable passed inside arguments by a simple destructuring method, Let us how a query works when an argument is passed.

from above sandbox, represents how to pass an argument inside a query and extract the relevant data that we want by mentioning required fields.

Aliases :

Aliases are nothing much, they are just the way to give our response the name which you want to give, for example in the above query we see that when we query "userPost" we get the response with an array of same name as "userPost"

Now we can change this name to our appropriate name, which we want as shown below in an image.

In the sandbox, the query structure remains the same but here we now just have added the "singleUserPost" at the beginning of our query "userPost" and we can see that the array name we get as a response also got changed to "singleUserPost" and this is what we called Aliases in GraphQl.

Fragments :

Let's say we had a relatively complicated page in our app, which lets us look at two heroes side by side, along with their friends. You can imagine that such a query could quickly get complicated because we would need to repeat the fields at least once - one for each side of the comparison.

That's why GraphQL includes reusable units called fragments. Fragments let you construct sets of fields and then include them in queries where you need to.

The above image shows fragments example as two separate queries that can be compared on a single go.

Conclusion:

Therefore, we once again concluded from this article that there are multiple ways we can curate our query in graphQl and how we modify our query in graphQL such that we can get only the specific fields and data that are relevant to us, which were not case of REST because of over-fetching and under-fetching,

furthermore, we learned about the different aspects of using Aliases, arguments and fragments efficiently in GraphQL.

In the Next Article, we will explore more about how to perform the create, update and delete functionality using another keyword called "Mutation" and how to write resolvers for it Efficiently. So, sit tight because there is much more to explore in the series.

graphql.org

Getting Started With GraphQL & Why it is Required (Part 1)

Ganesh Yadav — Tue, 19 Dec 2023 18:29:40 +0000

In this article, we will explore the most loved query language which resolves the most important problem statement in modern web app development

Although there are quite a lot of techniques to work with Graphql, for the sake of simplicity we will be going to use Apollo Server as your server for the Graphql

But before moving forward let us understand, why there is a need for Graphql.

Why Graphql?

Graphql was developed by Facebook in the year 2012, and it was open-sourced in the year 2015, it was developed to address some of the limitations and challenges that were associated with REST APIs, the challenges include

Under-fetching: In REST, endpoints are fixed, and the server determines the structure of the response. This can lead to under-fetching (receiving less data than needed).
Over-fetching: The REST also have an issue called Over-fetching(receiving more data than needed), where generally we get more data than is required which can affect the efficiency.
Single Request for Multiple Resources: With GraphQL, clients can request multiple resources in a single query, reducing the number of HTTP requests needed to retrieve data. This can result in faster and more efficient communication between clients and servers.
Flexible Schema and Strong Typing: GraphQL uses a flexible schema that allows clients to define the shape of the response they expect. It also enforces strong typing, providing clarity about the types of data that can be queried and reducing the chance of runtime errors.

let us now clearly, understand how Graphql reduces under-fetching and over-fetching, by taking the example of the user, in REST we have to create a different endpoint for getting with id /user/id, similarly for getting a post of a particular user /user/id/posts and for followers we have /user/id/followers.

With REST, you have to make three requests to different endpoints to fetch the required data. You’re also overfetching since the endpoints return additional information that’s not needed.

In GraphQL on the other hand, you’d simply send a single query to the GraphQL server that includes the concrete data requirements. The server then responds with a JSON object where these requirements are fulfilled.

Now, let us head toward creating our first GraphQl server using Apollo Server

Creating Our First Server :

Our First step includes creation of a new Project , you have to ensure that your system has node.js installed

 mkdir my-first-graphql-server
 cd my-first-graphql-server

Now, let's Initialize our project using npm(node package manager) and set our type in the package.json file as "module", so that we can use the import statement, the below command will create a package.json file inside your project directory

npm init --yes && npm pkg set type="module"

Install Dependencies, to use the graphql and Apollo server, we have to install the dependencies and also nodemon for running our server.

 npm install @apollo/server graphql nodemon

Now, here comes the most interesting part of creating the server in graphql, we have to define the Graphql Schema which typically represents the structure of our data present and the shape of the query, it is typically denoted with typeDefs, now create an index.js file inside our project directory and import the certain things and create the typeDefs as mentions which refers to ours schema,

 //index.js
 import { ApolloServer } from '@apollo/server';
 import { startStandaloneServer } from '@apollo/server/standalone';

 // A schema is a collection of type definitions (hence "typeDefs")
 // that together define the "shape" of queries that are executed against
 // your data.
 //Adding #graphql to the beginning of a template literal provides 
 //GraphQL syntax highlighting in supporting IDEs.
 const typeDefs = `#graphql
   type Book {
     title: String
     author: String
   }
   type Query {
     books: [Book]
   }
 `;

Again inside our index.js or in other files you can mention your data and export the data if required, again for a simple purpose we are just taking books which represent the array of objects with a particular book title and author.

 //index.js 
 const books = [
   {
     title: 'The Awakening',
     author: 'Kate Chopin',
   },
   {
     title: 'City of Glass',
     author: 'Paul Auster',
   },
 ];

Define the resolvers inside index.js, now that we have created our data set we have to create our resolvers which are basically a function that tells the Apollo server how to fetch the particular data when a certain query is made and what the given query returns, below code snippets will return all the books from the array, when the books query is made.

 //index.js
 // Resolvers define how to fetch the types defined in your schema.
 // This resolver retrieves books from the "books" array above.
 const resolvers = {
   Query: {
     books: () => books,
   },
 };

Now we need to create our instance of ApolloServer, inside the index.js file which will take typeDefs and resolvers,We've defined our schema, data set, and resolver. Now, we need to provide this information to Apollo Server when we initialize it.

 //index.js
 // The ApolloServer constructor requires two parameters: your schema
 // definition and your set of resolvers.
 const server = new ApolloServer({
   typeDefs,
   resolvers,
 });

 // Passing an ApolloServer instance to the `startStandaloneServer` function:
 //  1. creates an Express app
 //  2. installs your ApolloServer instance as middleware
 //  3. prepares your app to handle incoming requests
 const { url } = await startStandaloneServer(server, {
   listen: { port: 4000 },
 });

 console.log(`🚀  Server ready at: ${url}`);

Now for running the server, we have to make some changes in our script object present inside the package.json file, since we have already installed nodemon,it is time we have to utilise it while running the server, add the below code snippet to our package.json files scripts object.

//package.json
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server":"nodemon index.js"  //this runs your index.js file
  },

//now open the terminal and write the start command this will
//start your Apollo server at port 4000 with the URL as http://localhost:4000/
npm run server

Ahh we now have created our first Graphql server using Apollo Server, opened our localhost and make the query in the playground, provided by ApolloServer playground as shown in the the image.

Conclusion :

So, from this Article, we have learned how GraphQl is better than REST API and the benefits it provides over a conventional REST framework and we have also seen how it resolves the challenges of Under-fetching and Over-fetching by utilising the one-only query for different resources.

Further, we have created our first GraphQl server using Apollo server and utilised its querying capabilities, in the next article we will further explore some of the different techniques present in graphql for manipulating the data known as Mutation

I have learned a lot about this topic from the internet and also advise you the same for more exploring and deep diving, do reply and comment on this article for better sharing and good content creation.

Introduction to Apollo Server - Apollo GraphQL Docs

apollographql.com

map() v/s forEach() array function Comparsion

Ganesh Yadav — Fri, 27 Oct 2023 17:49:44 +0000

This article is all about a comparison between the JavaScript Functions available, which operate on the array only.

Function Overview :

Array.map()

The map function iterates over a given array and returns the newly created array:

let array = [1, 2, 3];
array = array.map((item) => {
  return item * 2;
});

console.log(array);  //output : [2, 4, 6]

Array.forEach()

This function allows you to iterate over an array without returning an altered version of the array i.e. basically it doesn't return the new array.

const array = [1, 2, 3];
array.forEach((item) => {
 return item * 2; // effectively, this operation does nothing
});

console.log(array);  //output: [1,2,3]

As you can see from above, both functions return a different output, at all one returns a new array by completely manipulating the original array while forEach only iterates over an array without manipulating any items from the array.

From the above we get the two basic differences between this two functions as mention below.

Return value of Both Functions :

map() returns a new array containing the results of applying the provided function to each element in the original array.
forEach() does not return anything (or returns undefined); it simply iterates over the array elements and applies the provided function.

Use Case of Both Functions:

Use map() when you want to transform each element of an array and create a new array based on the transformation.
Use forEach() when you want to iterate over each element of an array without creating a new array.

Performance comparison of Array.forEach() and Array.map() :

Now, that we have seen and understood the basic difference between the two functions let's now Compare how the performance of these two functions looks like, Do you want to know what the performance impacts are for these two functions?

A quick comparison on jsben.ch suggests that forEach is faster when iterating over an array that contains 1000000 numeric values.

For te BenchMark Comparision we will take this code a benchmark for testing the performance.

// map benchmark code (code block 1)
array.map(item => item * 2);
// forEach benchmark code (code block 2)
array.forEach(item => item * 2);

From the above comparison of both the codes, during the first testing, we see that forEach() outperforms the map()

However, if we want to keep the comparison fair, we'll have to get the same result for both benchmarks.

Remember, map returns an altered version of the original array. In this case, it multiplies each value with 2.

To achieve the same with the forEach function, we'd have to create a new array to which we push each result:

// map benchmark code
array.map(item => item * 2);

// forEach benchmark code
const result = [];
array.forEach(item => result.push(item * 2));

From the above comparison, of the two functions by changing the benchmark code we see a clear difference in performance as map() out-performs forEach() in this fair benchmark comparison.

Which one should you use?

From the above, I have already mention depending upon the use Cases which function would be suitable for the usage by keeping in mind the performance factor also.

Having the performance benchmarks in mind, you should use the function that suits your use case the best.

Do you want to change each value of the array and also want the newly created array as a return value? Use map.

Do you want to do other operations for each of the values of a given array by simply iterating over the given array? Use forEach.

It doesn't make sense to use map if you don't want to change the array, and forEach if you want to change each value. As we saw, performance will suffer and the readability of your code as well.

Conclusion:

From this article, you should now have a clear understanding of what is the main difference between the two important array functions i.e. forEach() and map() and you also have a clear understanding of which function to use depending upon the use Cases and the performance factor of the two functions.

Further to summarize this article, the map() function returns a new array while forEach() does not if you want to perform an operation on an array and return the modified array, you should use map(). If you simply want to loop over the array and do something with its elements, use forEach().

References:

Array.prototype.map() - JavaScript | MDN

The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

developer.mozilla.org

Array.prototype.forEach() - JavaScript | MDN

The forEach() method of Array instances executes a provided function once for each array element.

developer.mozilla.org