Forem: aravind_akay

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