DEV Community: aravind_akay

Why do we need MCP Context

aravind_akay — Tue, 23 Jun 2026 13:34:57 +0000

Ever since the AI boom, it feels like everyone wants to integrate AI into their applications to supercharge the user experience.

Here is what I've learned: standard AI models and search engines are fantastic at fetching publicly available information. However, our custom applications rely on private data securely tucked away in our own databases. An out-of-the-box LLM can't just magically see what's inside our private DB!

So, how do we bridge the gap?

I discovered that major AI providers—like OpenAI, Anthropic, and Gemini actually give us a way to let their models interact directly with our applications.

To make this magic happen, we write a specific piece of code called a tool (or function calling).

This tool acts as a smart middleman that tells the AI exactly how to fetch the right information from our app.

The workflow is so cool and looks exactly like this:

User Query --> LLM --> Tool --> Your Server --> Your DB

But here is the current puzzle I’m trying to solve: the setup isn't universal!

Every LLM provider gives a each unique way to interact.

For example, Lets setup a simple server with node and express.


const express = require("express");

const app = express();
const PORT = 3000;

app.use(express.json());


let employees = [
  {
    id: 1,
    name: "John Doe",
    salary: 50000,
    location: "Bangalore"
  },
  {
    id: 2,
    name: "Jane Smith",
    salary: 70000,
    location: "Chennai"
  }
];


app.get("/employees", (req, res) => {
  res.status(200).json({
    success: true,
    data: employees
  });
});


app.get("/employees/:id", (req, res) => {
  const id = Number(req.params.id);

  const employee = employees.find(emp => emp.id === id);

  if (!employee) {
    return res.status(404).json({
      success: false,
      message: "Employee not found"
    });
  }

  res.status(200).json({
    success: true,
    data: employee
  });
});


app.post("/employees", (req, res) => {
  const { name, salary, location } = req.body;

  if (!name || !salary || !location) {
    return res.status(400).json({
      success: false,
      message: "name, salary and location are required"
    });
  }

  const newEmployee = {
    id: employees.length
      ? Math.max(...employees.map(emp => emp.id)) + 1
      : 1,
    name,
    salary,
    location
  };

  employees.push(newEmployee);

  res.status(201).json({
    success: true,
    message: "Employee created successfully",
    data: newEmployee
  });
});


app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

I've exposed 3 endpoints
GET/employees -> gives all the list of employees
GET/employees/:id -> gives an employee detail
POST/employees -> creates a new employee

I didn't used any db here. Since its only for demo purpose.

I'd like to focus on only one endpoint now. For more endpoints you can refer my github

Now I want my server to interact with claude.
I need to setup my tool, This is the information about your endpoint.

tools: [
  {
    name: "getEmployees",
    description: "Get all employees",
    input_schema: {
      type: "object",
      properties: {}
    }
  }
]

if I wish my server to interact with gemini, i have to write my tool like this.

const tools = [
  {
    functionDeclarations: [
      {
        name: "getEmployees",
        description: "Get all employees",
        parameters: {
          type: "OBJECT",
          properties: {}
        }
      }
    ]
  }
];

if I wish to use open ai. My tool would be,

const tools = [
  {
    type: "function",
    function: {
      name: "getEmployees",
      description: "Get all employees",
      parameters: {
        type: "object",
        properties: {}
      }
    }
  }
];

There is a next step in which we have to initiate the respective model and handle the tool call. But the core relies on this tool.

Now here comes the MCP to make it universal like an USB-c port for all phones.

MCP provides a way to declare the tools in one config and make use of it in all LLM's.

mcp-server.js file would be like

const { McpServer } = require("@modelcontextprotocol/sdk/server/mcp.js");
const { StdioServerTransport } = require("@modelcontextprotocol/sdk/server/stdio.js");

const server = new McpServer({
  name: "employee-server",
  version: "1.0.0",
});

server.tool(
  "getEmployees",
  "Get all employees",
  {},
  async () => {
    return {
      content: [
        {
          type: "text",
          text: JSON.stringify(employees, null, 2),
        },
      ],
    };
  }
);

Now I jus need to run this server when my custom server runs. Thats all. Now I can access this server in my claude desktop.

Although you need to provide the config detail in the claude_desktop_config.json

So that my claude desktop would know about this mcp-server.

{
  "mcpServers": {
    "employee-server": {
      "command": "node",
      "args": [
        "your-project-folder/mcp-server.js"
      ]
    }
  }
}

I'm attaching the screenshots from my claude-desktop for your reference.

I hope this would clarify why we need mcp in our application.

Sharding in a nutshell

aravind_akay — Sun, 21 Jun 2026 17:02:58 +0000

Sharding is a process of splitting a larger database into smaller pieces called shards.

instead of having all user data in one db.

you could have
shard1 | shard2 | shard3
Data-A | Data-B | Data-C

Allows us to

Handle more data
process more request
reduce load on individual machines
scale horizontally

There are several ways to decide which data goes to which shard.

Sharding techniques

Range Based
Hash Based
Directory Based
Geographical
Dynamic
Hybrid

Range Based Sharding

In range-based sharding , data is divided into shards based on a specific range of values for a given partition key. Each shard would contain specific range of data.

For example you have 10,000 user records.

Ok. the explanation is simple. You would have one thing in your mind. How would my server know which shard I should look for.

const mysql = require('mysql2/promise');

// Connections to different shards
const shard1 = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'user_shard_1'
});

const shard2 = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'user_shard_2'
});

const shard3 = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'user_shard_3'
});

// Shard Router
function getShard(userId) {
  if (userId >= 1 && userId <= 3000) return shard1;
  if (userId >= 3001 && userId <= 6000) return shard2;
  if (userId >= 6001 && userId <= 10000) return shard3;

  throw new Error('User ID out of range');
}

// Insert User
async function createUser(userId, name, email) {
  const db = getShard(userId);

  await db.execute(
    'INSERT INTO users (user_id, name, email) VALUES (?, ?, ?)',
    [userId, name, email]
  );
}

In here getShard function would be helpful for deciding the shard.

Likewise you can manipulate for others.

Hash Based Sharding

Lets say I decide it to do an hash function for my user-id to store the data.

In the following example am using math. But you can decide on which manipulation you'd want.

For example I would insert user-id:1 into shard1, user-id:2 into shard2 and user-id:3 into shard3

function getShard(userId) {
  const shardKey = userId % 3;

  if (shardKey === 0) return shard1;
  if (shardKey === 1) return shard2;
  return shard3;
}

// Insert User
async function createUser(userId, name, email) {
  const db = getShard(userId);

  await db.execute(
    'INSERT INTO users (user_id, name, email) VALUES (?, ?, ?)',
    [userId, name, email]
  );
}

Directory Based Sharding

Consider our file system where you would store a data into specific folder. Based on some scenario I decide it to store it in particular shard. It would have a lookup table to support this kinda architechture.

Imagine you run a software application responsible for sending notifications to various applications. In practical it'd be Firebase Cloud Messenger or Apple Notification Service.

An user enroll their application in that system, it could be Youtube, Instagram, Facebook and etc.

Based on appName. I would decide which shard to return.
Instagram -> shard1
Facebook -> shard2
Youtube -> shard3
But first I would look for the shard in a Lookup.

async function getShard(appName) {
  const [rows] = await directoryDb.execute(
    'SELECT shard_name FROM app_directory WHERE app_name = ?',
    [appName]
  );

  const shard = rows[0].shard_name;

  if (shard === 'shard_1') return shard1;
  if (shard === 'shard_2') return shard2;
  if (shard === 'shard_3') return shard3;

  throw new Error('Invalid shard');
}

// Store notification
async function sendNotification(appName, userId, message) {
  const db = await getShard(appName);

  await db.execute(
    'INSERT INTO notifications (user_id, message) VALUES (?, ?)',
    [userId, message]
  );

  console.log(`Notification stored in ${appName}'s shard`);
}

I think you would have some better idea. Creating pool is common across all the app. Moving forward I'd give only examples.

Geographical Sharding

As the name suggests it would be purely based on geographical locations.

function getShard(country) {
  if (country === 'India') return indiaShard;
  if (country === 'USA') return usShard;
  if (['Germany', 'France', 'Italy'].includes(country)) {
    return euShard;
  }

  throw new Error('Unsupported region');
}

Dynamic Sharding

Dynamic Sharding means the shard is not decided by hardcoded ranges, hashes, or regions. Instead, the application checks a configuration table and decides where to store data at runtime.

This allows you to add new shards without changing application code. It similar to elasticity of a server to scale in real time.

Hybrid

Hybrid sharding is when you combine multiple sharding strategies together to get the benefits of each.

A very common real-world pattern is:

Directory-based (app → shard group) + Hash-based (within shard group)

This gives:

Flexibility (move apps easily)
Even distribution (avoid hotspots inside shards).

async function sendNotification(appName, userId, message) {
  const group = await getShardGroup(appName);      // directory step
  const shard = getShardFromGroup(group, userId);   // hash step

  await shard.execute(
    'INSERT INTO notifications (user_id, message) VALUES (?, ?)',
    [userId, message]
  );

  console.log(`Stored in ${appName} → ${group}`);
}

In this example you can see I've used directory based and hash based.

How redux works in simple terms

aravind_akay — Sun, 21 Jun 2026 16:19:01 +0000

If you’ve ever built a React app, you know that passing data between components can feel like playing a stressful game of "telephone." One component tells its parent, who tells the grandparent, who finally tells the cousin.

Redux fixes this by creating a "Single Source of Truth." Instead of data being scattered everywhere, it lives in one central vault.

The Redux Coffee Shop Analogy
To understand Redux, imagine a coffee shop:

The Store (The Vault): This is the giant ledger where the shop keeps track of everything: how many beans are left, the list of orders, and who is working.

The Action (The Customer's Order): A customer doesn't just walk behind the counter and grab a latte. They "order" it. An action is a plain object that describes what happened.

Example: { type: 'ADD_TODO', text: 'Buy Milk' }

The Reducer (The Barista): The barista is the only one allowed to update the ledger. They take the current state of the shop and the customer's order, then they create a new version of the ledger.

The Dispatch (The Cashier): The cashier takes your order and hands it to the barista. In Redux, dispatch is the function that sends your action to the store.

Seeing it in Code: A Simple Todo App
Let’s look at how this looks in a real JavaScript environment.

Define the Actions First, we define what can actually happen in our app. We want to add a task and toggle whether it's finished.

// Actions
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';

// Action Creators
const addTodo = (text) => ({
  type: ADD_TODO,
  payload: { text, completed: false }
});

The Reducer (The Brain) The reducer decides how the state changes. Crucial Rule: Reducers never change the old state; they always return a brand new copy of it.

const initialState = [];

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      // We return a NEW array with the old items + the new one
      return [...state, action.payload];

    case TOGGLE_TODO:
      return state.map((todo, index) => {
        if (index === action.index) {
          return { ...todo, completed: !todo.completed };
        }
        return todo;
      });

    default:
      return state;
  }
}

The Store (The Home) Finally, we bring it all together.

import { createStore } from 'redux';

const store = createStore(todoReducer);

// Let's add a todo!
store.dispatch(addTodo('Learn Redux today'));

console.log(store.getState()); 
// Output: [{ text: 'Learn Redux today', completed: false }]

Why go through all this trouble?
You might think, "Why not just use a simple variable?"

As your app grows to include login screens, shopping carts, and user profiles, having a predictable "Store" makes debugging a breeze. If something goes wrong, you can look at the history of Actions to see exactly when and why the data changed. It’s like having a "black box" flight recorder for your website.

Summary
Store: Where your data lives.

Action: A note saying what you want to change.

Reducer: The logic that performs the change.

Dispatch: The trigger that sends the note to the logic.

Happy coding! If you found this helpful, feel free to share it.

Power of Generics

aravind_akay — Wed, 28 Jun 2023 18:20:25 +0000

Today I want to discuss very shortly about one such use case of generics. Nowadays everyone want to leverage the usecase of typescript. A quick introduction about generics also would be better to begin with.

What are Generics in Typescript ?

From my point of view , generic is something an alias for a data type which would be unknown. According to google, by definition

Generics are code templates that you can define and reuse throughout your codebase. They provide a way to tell functions, classes, or interfaces what type you want to use when you call it.

Lets say you have a function

function helper(param:string):string {
  return param;
}

Here you can see you are passing a string as a parameter which is denoted by param:string and return type is string which is denoted by ():string.

let's say you have a situation that you don't know what data would come here as a parameter and the same data type you are gonna return .

This is where generics are useful. You can type your function as

function helper<T>(param:T):T {
  return param;
}

Now this function knows your data type and assigns your same data type as return.
In my View

function helper<UnknownDataType>(param:UnknownDataType):UnknownDataType {
  return param;
}

I think you have an understanding about generics. Lets dive into the use case.

We have a situation that you should allow all the strings and selective strings. For example,

You should allow the user to enter size as 'L' and 'XL' means

this compiler giving me options as L and XL as an autoComplete.But if I type other string it will give error.

We can do like this

type Size = 'L' | 'XL' | string;

But compiler loosing the autoComplete for 'L' and 'XL' and at the same time Size is becoming string data type.

here is the solution

type Size = 'L' | 'XL' | Omit<string, 'L' | 'XL'>

Now you can see compiler giving me the auto-complete for L and XL

Also it didn't complain when I give other string

Lets put this in generic way

type Selective<T extends string> = T | Omit<string,T>

Now the code is like

type Selective<T extends string> = T | Omit<string,T>

type Size = Selective<'L' | 'XL'>

function makeShirts(i:Size) {
  return 'hello'
}

makeShirts('XS')

Adios. Love Coding. Give it a thumbsup if you like it. Thanks.

render prop and children in react

aravind_akay — Sun, 15 May 2022 16:40:17 +0000

render prop

Hello guys I want to give an introduction about what render prop is.

According to the official documentation

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

From my point of view its just an another prop but it will share some of the code but you can name it whatever you want as prop.

Foe an example,

import "./styles.css";
import ListItem from "./ListItem";

export default function App() {
  return (
    <div className="App">
      <ListItem render={"Simply a prop"} />

    </div>
  );
}

The output is

Traditionally it has been used as this following way,

In App.js
<ListItem render={(data) => <li>{data}</li>}  data="Simply a prop"/>

In ListItem.js
const ListItem = (props) => {
  return <div> {props.render(props.data)}</div>;
};

The output is

I think that solves your doubts with render prop.

children prop

children prop is nothing but the ui rendered between the elements. what do I mean by that. Lets say you have a div in between you write a lot of code , all the codes you've written between that div is children to that div.

Apply the same logic for components.

For example consider the same ListItem component,

//In App.js

<ListItem> <div>Hello Guys , this is considered as the children </div> </ListItem>

//In ListItem.js

const ListItem = (props) => {
  return <div> {props.children}</div>;
};

The output is

I think you should try this example and comment if there is any doubt. Happy coding.

Top 7 features of ES6 in Javascript

aravind_akay — Wed, 04 May 2022 17:50:11 +0000

1.let and const keyword

Both the keywords enables the user to define variables, on one hand 'let' keyword is kinda similar to 'var' it can be changed across the code.

let a = 10;
console.log(a) //10

On the other hand 'const' keyword enables the user to define a constants. unlike 'let' and 'var' you can't change or reassign this variable

const PI = 3.14;
console.log(PI); //3.14

In case of objects or array

const obj1 = {name : "John", city:"NewYork"};
obj1.name = "Mike"; //this is valid
obj1 = {name : "Mike", city: "NewYork"} //this is not valid

const arr1 = [1,2,3];
arr1.push(4); //valid
arr1.pop(); //valid
arr1 = [1,2] //not valid

Just remember you can't reassign.

Both are block scoped, let say you define one variable into an if block using 'var' it will be valid through the whole function. But if you define using 'let' or 'const' it will be valid only into that particular if block.

function something() {
if(true) {
    var a = 10;
}
console.log(a); //prints 10
}
something();

If you use const or let

function something() {
if(true) {
    let a = 10;
}
console.log(a); //Reference Error
}
something();

2.Arrow Function

It provides a more concise syntax for writing function expressions by removing 'function' and 'return' keywords.

Arrow functions are defined using the fat arrow ( => ) notation.

//Arrow function
let sum = (a,b) => a+b;
console.log(sum(5,10));  //prints 15

But if there are multiple expressions in the function body, we need to wrap it with curly braces.We also need to use the 'return' statement to return the required value.

3.Default Parameters

In ES6, users can provide the default values right in the signature of the functions. But in ES5, OR operator had to be used.

//In ES6
let calculateArea = (height = 100, width = 50) => {
    //logic
}

//In ES5
var calculateArea = function(height,width) {
    height = height || 50;
    width = width || 100;
    //logic
}

4.Template Literals

ES6 introduces very simple string templates along with placeholders for variables. The syntax for using the template string is ${YOUR_VARIABLE} and it should be used inside of the back-ticked string.

const firstName = "John";
const lastName = "Doe";
let name = `My name is ${firstName} ${lastName}`

5.Enhanced Object Literals

ES6 provides enhanced object literals which make it easy to quickly create objects with properties inside the curly braces. It applies when the variable name and key property of your object is same.

function getName(firstName,lastName) {
   return {
      firstName,
      lastName
   }
}

console.log(getName("John", "Doe")); //Outputs {firstName :"John", lastName: "Doe" }

6.Destructuring Assignment

Destructuring is one of the most popular features of ES6. It can be applied only in non-primitive data types(i.e object and array). Just as enhanced object literals you can use the property key of an object as the variable.

//Object - mapped through keys
let Person = {id : 1, name:"Peter", age: 24}
let {name,age} = Person
console.log(name) //Outputs "Peter"
console.log(age) //Outputs 24

//Array - mapped through index
let apps = ["Netflix", "Amazon", "Whatsapp"];
let [a,b] = apps;
console.log(a); //Outputs "Netflix"
console.log(b); //Outputs "Amazon"
let [,c,d] = apps;
console.log(c); //Outputs "Amazon"
console.log(d); //Outputs "Whatsapp"

You can use alias, suppose if you want that particular destructured variable name as some other name you can use aliases. Let me explain with an example.

//Object
let obj1 = {name1 : "Mike", name2:"Smith"};
let {name1 : firstName, name2 : lastName} = obj1;
console.log(firstName); //Outputs "Mike"
console.log(lastName); //Outputs "Smith"

//I am pretty sure you won't face this problem but in case

let obj2 = {"first Name" : "Mike", "last Name":"Smith"}; //this is valid in JS objects
let {"first Name" : firstName, "last Name" : lastName} = obj2;
console.log(firstName); //Outputs "Mike"
console.log(lastName); //Outputs "Smith"

7.Spread Operator

This is also one of the most used ES6 features. The javascript spread operator (...) allow us to quickly copy all or part of an existing array or object into another array or object.

//Array
const oddNumbers = [1,3,5,7];
const evenNumbers = [2,4,6,8];
const numbersCombined = [...oddNumbers, ...evenNumbers]; //Outputs [1,3,5,7,2,4,6,8]

//Objects
const name = {
   firstName : "Terry",
   lastName : "Brown"
}

const details = {
   age : 42,
   city : "New Jersey"
}

const fullDetails = {...name, ...details};
console.log(fullDetails); //Outputs { firstName : "Terry", lastName : "Brown",  age : 42,city : "New Jersey" }

The spread operator is often used in combination with destructuring. but called as rest parameter

//Array
const numbers = [1,2,3,4,5,6,7,8];
const [one, two, ...remainNumber] = numbers;
console.log(remainNumbers); //[3,4,5,6,7,8]

//Object
const Person = {id : 1, name : "Terry", age: 42, city: "New Jersey" };
const {id, ...rest} = Person;
console.log(rest); //Outputs { firstName : "Terry", lastName : "Brown",  age : 42,city : "New Jersey" }

I hope this would be useful for you guys. Happy Coding. Kudos.

Apollo Client GraphQL with React

aravind_akay — Fri, 22 Apr 2022 18:23:29 +0000

In this article we gonna discuss about the basics about graphQL and how to use it in your react app.

What is GraphQL ?

GraphQL is a Query Language invented by facebook. It solves many of the shortcomings and inefficiencies while interacting with REST API.

It’s more flexible than REST APIs because it allows frontend clients to request exactly the data format the client needs. REST APIs on the other hand typically send back a fixed data format that often contains redundant data that is not required by the client, as example frontend client wants only user email, why I should call web API for a user and get all user information, and we will get an email, full name, age, etc… We only need an email attribute of the user.

In layman's term it is a query language acts as a filter between the data that is fetching and the data we actually get.(or) it is a syntax that describes how to ask for the data.

Why GraphQL ?

You can extract the information you want

Traditionally you make the request to the server and you make use of the data you need but it can actually contain other properties that you may not need to the particular use case.

With GraphQL, users can query the data they are looking for. not less, not more.

Data Fetching

Lets say you have an users api and you want to fetch specific users's post and friends. For this scenario you want to make the endpoints like

/users/:id/posts
/users/:id/friends

or you would get all the info from users/:id and you would use it.

With GraphQL, you can specify with the one route (users/:id) and you can change your query according to your requirement.

The first query will extract the posts and the later query will extract the friends

You can also specify the fields you want in your friends object as well

Use Apollo Client with React

Apollo Client allows you to fetch data from your GraphQL server and use it in complex and reactive UIs.

You need to install apollo client and graphql package to get started.

npm install @apollo/client graphql --save

Now it needs to configure the endpoint of your GraphQL API.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import {ApolloClient, InMemoryCache, ApolloProvider} from '@apollo/client'

const client = new ApolloClient({
  uri : "https://rickandmortyapi.com/graphql/",
  cache: new InMemoryCache()
})


ReactDOM.render(  
  <ApolloProvider client={client}>
  <App />
  </ApolloProvider>
,document.getElementById('root'));

I am using rickandmorty api for this implementation.I've come across another api crwnclothing and you can use this as well.

With the ApolloClient you have to provide uri. InMemoryCache is something acts like an actual cache thats gonna memoize the query we hit and everytime you hit the query it will search for the query in here.

You have to wrap your application with ApolloProvider at the top heirarchy of your app. So I did it in index.js

Our First Query

Typically a query would look like an object that defines the fields we want. You can name the query if you want. The following screenshots would show how to query it in GraphiQL and their results. You can visit to rickandmortyapi and try out the queries.

As I said you can extract the exact information you want.

You need to import gql and useQuery from apollo/client

import {gql, useQuery} from '@apollo/client'

Define our Query

CharactersList.js

import React from 'react'
import {gql, useQuery} from '@apollo/client'

const GET_CHARACTERS = gql`
    query fetchAllCharacters {
    characters {
        results {   
         id
         name
        image
        }
    }
}
`

function CharactersList() {
    const {data, loading, error} = useQuery(GET_CHARACTERS);
    if(loading) {
        return <div> Loading...</div>
    }

    if(error){
        return <div>Error occured {error.message}</div>
    }  
    return (
    <div className='characters-list'>{data.characters.results.map((character) => {
        return <div>
            <img src={character.image} />
            <p>{character.name}</p>
        </div>
    })}</div>
  )
}

export default CharactersList

The output of this characters list would be like

useQuery is purely for GET request only. There is an another hook for useMutation which is for POST and PUT request.

If you want a single Character, you have to pass the Query with variables. The query would look like


const GET_CHARACTER_BY_ID = gql`
    query fetchCharacterById($id:ID!) {
        character(id : $id) {
            id
            name
            image

        }
    }
`

Here We have to specify what kind of parameter that we gonna pass. This specific ID data type gonna assign to the variable id in the character query.

Now you have to wonder , how am gonna pass the id into this thing. Its very simple.

 const {data,loading,error} = useQuery(GET_CHARACTER_BY_ID, {variables : {id: 4}})

Here I pass 4 as the harcoded value but in real scenario it would be a variable.

I hope this would be the best primer to get started with apollo client.Kudos. Happy Coding!

How to use 'useMutation' in React Query

aravind_akay — Tue, 19 Apr 2022 18:25:43 +0000

I'm pretty sure you've read my previous post about how to get started with react-query where I discuss how to use 'useQuery' hook on fetching the data.

So 'useQuery' is only used for fetching the data but 'useMutation' is for post/put request to the backend.

Lets say I have a function for post request.

In userApi.js

import axios from 'axios'


const api = axios.create({
    baseURL : "https://gorest.co.in/public/v2",
    headers : {'Authorization' : `Bearer ${apiToken}`}
}


export const createUser = (newUser) => api.post("/users",newUser).then(res => res.data);

This createUser function takes an user object and it will be posted in the gorest api. For the token you just need to signup in the gorest website.

Let's create a form page which takes name,email,gender and status which are the properties in the gorest api. I just handled the formData using useState here.

UserForm.js

import React, {  useState } from 'react'


function UserForm() {
   const [userData,setUserData ] = useState({
        name : '',
        email : '',
        gender : '',
        status : ''
    })

    const handleFormChange = (e) => {
        setUserData(
            {
                ...userData,
                [e.target.name] : e.target.value
            }
        );
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(userData)

    }

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <div className='field-container'>
            <label htmlFor='name'>Name : </label>
            <input type="text"  name='name' onChange={handleFormChange} value={userData.name}/>
            </div>

            <div className='field-container'>
            <label htmlFor='name'>Email : </label>
            <input type="email"  name='email' onChange={handleFormChange} value={userData.email}/>
            </div>



            <div className='fieldContainer'>
            <label htmlFor='gender'>Gender : </label>
            <input type="radio"  name='gender' onChange={handleFormChange} value='female'/> Female

            <input type="radio"  name='gender' onChange={handleFormChange} value='male'/> Male

            </div>

            <div className='field-container'>
            <label htmlFor='gender'>Status : </label>
            <input type="radio"  name='status' onChange={handleFormChange} value='active'/> Active

            <input type="radio"  name='status' onChange={handleFormChange} value='inactive'/> Inactive

            </div>
            <input type='submit' value={'Submit'} />

        </form>
    </div>
  )
}

export default UserForm

On submitting this form I've just consoled the userData object. You can see the output in the following screenshot.

So for posting the data you need to trigger the function right. But how do we do that using useMutation.Let's see.

import { useMutation } from 'react-query'


const {mutate} = useMutation(createUser);

This mutate is a function which should be triggered whenever you need and the data/payload you want to send should send as a parameter to this mutate function.

so my handleSubmit function would look like

const handleSubmit = (e) => {
    e.preventDefault();
    mutate(userData);

As we handled in useQuery you can have isLoading for posting the data. With all the modifications, I just showed the response in my UI. lets see the code.

import React, {  useState } from 'react'
import { useMutation } from 'react-query'
import {createUser} from './userApi'

function UserForm() {
    const {mutate, isLoading} = useMutation(createUser, {
        onSuccess : (data) => {
            console.log(data) //This is the response you get back
            setResponse(data)
        }
    })
    const [response,setResponse] = useState({})
    const [userData,setUserData ] = useState({
        name : '',
        email : '',
        gender : '',
        status : ''
    })

    const handleFormChange = (e) => {
        setUserData(
            {
                ...userData,
                [e.target.name] : e.target.value
            }
        );
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        mutate(userData)

    }

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <div className='field-container'>
            <label htmlFor='name'>Name : </label>
            <input type="text"  name='name' onChange={handleFormChange} value={userData.name}/>
            </div>

            <div className='field-container'>
            <label htmlFor='name'>Email : </label>
            <input type="email"  name='email' onChange={handleFormChange} value={userData.email}/>
            </div>



            <div className='fieldContainer'>
            <label htmlFor='gender'>Gender : </label>
            <input type="radio"  name='gender' onChange={handleFormChange} value='female'/> Female

            <input type="radio"  name='gender' onChange={handleFormChange} value='male'/> Male

            </div>

            <div className='field-container'>
            <label htmlFor='gender'>Status : </label>
            <input type="radio"  name='status' onChange={handleFormChange} value='active'/> Active

            <input type="radio"  name='status' onChange={handleFormChange} value='inactive'/> Inactive

            </div>
            <input type='submit' value={'Submit'} />

        </form>
        {isLoading && <div>Posting the data...</div>}
        {Object.keys(response).length > 0 && (<div>
            <h4>Response</h4>
            <p>{response.name}</p>
            <p>{response.email}</p>
        </div>)}
    </div>
  )
}

export default UserForm

The onSuccess method will be triggered once your post request is success and the data is the response returned after the post request.

The output I've generated in the following screenshot.

There would be some additional steps that need to be taken care of whenever you updating some values(making put request) and you want that change to be reflected back.But I want each of my post to be the essential so I'll just leave it to the next topic.Hope this is useful.

Getting Started with React Query

aravind_akay — Mon, 18 Apr 2022 17:55:38 +0000

What is React Query ? React Query is a library that gives state management ability for any kind of asynchronous data.

React itself didn't give any opinion on whether to use a way of data fetching. With React-Query there are some work need not to be done by a developer. (E.g maintaining loading state, error state, etc)

React Query has an impressive list of features

caching
deduping multiple request for the same data into a single request
updating 'out of date' data in the background (provides stale data and refetching in the background, retrying )
performance optimization like pagination, lazy loading
memoizing query results
prefetching the data
mutations, which makes it easy to implement optimistic change

In this article am gonna discuss about how to fetch the data from an api using react-query.

React-Query provides a custom hook called 'useQuery' to fetch data. Underneath it maintains a lot more information about fetching the data like error,loading state and all.

I'm starting with new ReactJS app with create-react-app and after that install react-query

npm i react-query --save

I'd love to use axios but for the simplicity I'll go with fetch. I just cleaned my App.js and wrote the fetchUsers function.

const fetchUsers = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    return data
}

Now instead of using this into a useEffect or something,
import useQuery from the react-query

import { useQuery } from 'react-query'

And now we can use it to fetch the data as

const response = useQuery('users',fetchUsers)

Here, useQuery requires two arguments , first one is the key which should be unique across your whole code so that it can be identified. We can pass an array over here

Second argument is a function to fetch the data. I put fetchUsers here.

We can pass an object as the third argument and it is optional which can alter some default configuration like retry, retryDelay, enabled,cacheTime,onError, etc.

Now our response has the following properties.

data,
error,
failureCount,
isError,
isFetchedAfterMount,
isFetching,
isIdle,
isLoading,
isPreviousData,
isStale,
isSuccess,
refetch,
remove,
status,

data - is the actual data we fetched.

status - will be a string or enum I'd say it will be either "loading", "error", "success" or "idle".

isLoading - is a boolean and it will be true until the query function resolves or reject. after that it will be false. This would be more useful when it is loading for the first time and has no data yet.

isFetching - is a boolean and it will be true until it refetching current data.

For my example I'd be using data and status properties which are sufficient.

Now we can use it to display the data,

import React from "react";
import './app.css';
import { useQuery } from "react-query";
const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();
return data;
};
const App = () => {
  const { data, status } = useQuery("users", fetchUsers);
  return (
    <div className="App">
      {status === "error" && <p>Error fetching data</p>}
      {status === "loading" && <p>Fetching data...</p>}
      {status === "success" && (
        <div>
          {data.map((user) => (
            <p key={user.id}>{user.name}</p>
          ))}
        </div>
      )}
    </div>
  );
};
export default App;

What I have done here is, check the status and display the data. This is a simple explanation of how we can use React Query useQuery hook. There are many other hooks as well.

Another version of using this useQuery, since we always use loading state and error state and all.

import React, {useState} from 'react'
import {useQuery} from 'react-query';


const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();
return data;
};

function App() {
    const{data, isLoading, isError, error}= useQuery('users',fetchUsers)
    if(isLoading) {
        return <div>Loading...</div>
    }

    if(isError) {
        return <div>Something happened {error.message}</div>
    }
  return (
    <div className="App">
        Users
        <ul>
            {data?.map((user) => <li>{user.name}</li>)}
        </ul>
    </div>
  )
}

export default Users

Now we don't need to maintain the loading state, error state and all and that is being taken care of.

Hope this would be useful in your first step to react-query. Refer the official documentation for more information React Query Official docs.

Why you should try next.js ?

aravind_akay — Sun, 17 Apr 2022 14:40:54 +0000

Next js is a react framework for building single page applications(SPA) with lot of benefits than react itself.Next js makes a developers life easier through several tools and conventions available out of the box. Lets discuss why you should try next js as a next step in your react stack.There are numerous but let me discuss whats essential to know from a react developers perspective.

In Performance...

Automatic code-splitting

Unlike react it wouldn't bundle your whole code into a single file and next js is clever enough to only load the javascript and css required for any given page.

This increases performance as there is less for the user's browser to download.

Image Optimization

Next js is smart enough to serve correct size images according to your device. What do I mean by that ? Lets have a look at the screenshots

I am on the next js official website. So for the larger devices the images loaded in the network tab is kinda large and for the small devices its different right. This is a very big optimization I'd say because it enhances user experience. Underneath it use next js image component is an extension of HTML img element. Excellent right!. Yes it is.

Other than this we have Minifying Files, pre-fetching assets are the notable in the performance tab.

Different Rendering Techniques

Static Site Generation (SSG)

As the name suggests, Static Site provides a content that is not dynamic in the web page.

In next js, all your content are pre-built and served to the client as an HTML file, assets such as JS and CSS and it is cached. If you try to re-navigate to the page, it will be provided from the cache.

Let's discuss about the use cases , when to use SSG ?

If you have marketing content that makes use of SEO, Blogs, rich web content that should be provided in no-time scenarios can be applied.

The biggest disadvantage of using SSG is that the build time can get very long as your application grows.

Incremental Site Generation (ISR)

As I said, If I use SSG, build would take some time, but what if I tell you that you do not want to build all the content in one go but in way you can fetch those on the go. Excellent Right!.

ISR enables the user to use Static Generation on a per-page basis, without needing to build the entire site

Static Pages can be generated at the run time instead of build time.

It provides a window-time to cache the pages after that it will be refreshed/regenerated.

Server Side Rendering (SSR)

SSR describes the process of pre-rendering the page on the server, which is then generated upon each request.

In React ,you have to wrap a server around your client application, but next js provides a handy way to make this scenario possible.

When the pre-rendered pages reaches the browser, Javascript code is run to make the page interactive. This elevates the performance makes the load speed faster.

This is what I feel the most essential to know to kickstart into Next js. Refer https://nextjs.org/ for more. Thanks