DEV Community: Ata Parvin Ghods

Data fetching in React! is easy

Ata Parvin Ghods — Sat, 02 Mar 2024 03:01:17 +0000

Hi everyone
Today I wanna show you an HTTP client that I use in my projects and how it helped me during RESTful API calls.

If you are asking why I did such a thing? Well, using pure Axios is frustrating, fetch API is trash, and React Query (a.k.a TanStack Query) is just not for me.

Oh, guess what! I handle loading state as well ...

So let's how I make my HTTP API calls
MyComponent.tsx


const MyComponent = () => {
    const { getProducts, dataProducts, loadingProducts } = useAxios({
        url: '/url',
        name: 'Products',
    })

    useEffect(() => {
        getProducts()
    }, [])

    return <div>{dataProducts && <div>Show products here ...</div>}</div>
}

export default MyComponent

Very simple! You can have post requests and maybe add other methods as well. But I decided to keep it simple.

So do you need a put request?
Here is how to use it:

const { putReqByUrl } = useAxios({
        url: '/url',
        name: 'Products',
    })

const res = await putReqByUrl('/1234')

Or maybe you have to fetch from many URLs?
Ok:

const { getReq } = useAxios({
    url: '/url',
})
const { getReq: getOtherUrl } = useAxios({
    url: '/other-url',
})
const { getAnotherOne, postAnotherOne } = useAxios({
    url: '/other-url',
    name: 'AnotherOne',
})

await getReq()
await getOtherUrl()
await getAnotherOne()
await postAnotherOne()

Yeah yeah you need queries

await getReq({ page: 2 }) 
// It will be
// GET method into -> your-super-url?page=2
// You can add more no problem

So this is what my custom hook looks like
useAxios.ts

import axios from 'axios'

const axiosInstance = axios.create()
axiosInstance.defaults.baseURL = 'base url here'

interface Props {
    url: string
    data?: any
    name?: string | null
    notif?: boolean
    headers?: any
}

const objectToQueryString = (obj: any, withQuestionMark = true) => {
    let r: any = []

    Object.keys(obj).forEach((key) => {
        if (obj[key] !== null && obj[key] !== undefined) {
            r.push(key + `=` + obj[key])
        }
    })

    return r.length > 0 ? `${withQuestionMark ? '?' : ''}${r.join('&')}` : null
}

const useAxios = ({
    notif = true,
    url,
    headers,
    data: userData,
    name = null,
}: Props) => {
    const [loading, setLoading] = useState(false)
    const [data, setData] = useState(null)
    const [response, setResponse] = useState({})
    const [status, setStatus] = useState(0)
    const [errorMessage, setErrorMessage] = useState(null)
    const [error, setError] = useState(null)

        // your custom alert hook if you have
        // whenever you make an http request, you will have toast 
        // and alarm stuff
    const alert = useAlert() 

    const request = async (
        method: string,
        payload = {},
        noLoading = false,
        userUrl?: string
    ) => {
        setLoading(true)

        const axiosObj = {
            method,
            headers: headers,
            url: '',
            data: {},
        }

        if (method === 'GET') {
            if (objectToQueryString(payload)) {
                axiosObj.url = url + objectToQueryString(payload)
            } else {
                axiosObj.url = url
            }
        } else {
            axiosObj.url = url
            axiosObj.data = payload
        }

        if (userUrl) {
            axiosObj.url = userUrl
        }

        try {
            const res = await axiosInstance(axiosObj)

            setData(res.data.data)
            setResponse(res)
            setStatus(res.status)
            setLoading(false)

            // Add your alert here if you have any
            if (notif) {
                // TODO translate first then
                // alert({
                    // type: 'success',
                    // @ts-ignore
                    // text: res.data.message,
                // })
            }

            return res.data
        } catch (e: any) {
            setResponse(e.response)
            setError(e)
            setStatus(e.response.status)
            setErrorMessage(e.response.data.message)
            setLoading(false)

            // Add your alert here if you have any
            if (notif) {
                // TODO translate first then
                // alert({
                    // type: 'error',
                    // text: e.response.data.message,
                // })
            }

            throw e
        }
    }

    const getReq = async (data: any, noLoading = false, url?: string) =>
        await request('GET', data, noLoading, url)
    const postReq = async (data: any, noLoading = false, url?: string) =>
        await request('POST', data, noLoading, url)
    const putReq = async (data: any, noLoading = false, url?: string) =>
        await request('PUT', data, noLoading, url)
    const patchReq = async (data: any, noLoading = false, url?: string) =>
        await request('PATCH', data, noLoading, url)
    const deleteReq = async (data: any, noLoading = false, url?: string) =>
        await request('DELETE', data, noLoading, url)

    const deleteReqByUrl = (url: string) => deleteReq(null, false, url)
    const putReqByUrl = (url: string, data: any) => putReq(data, false, url)
    const patchReqByUrl = (url: string, data: any) => patchReq(data, false, url)
    const getReqByUrl = (url: string, data: any) => getReq(data, false, url)
    const postReqByUrl = (url: string, data: any) => postReq(data, false, url)

    const returnObj: any = {
        error,
        data,
        response,
        status,
        errorMessage,
        loading,
        getReq,
        postReq,
        putReq,
        patchReq,
        deleteReq,
        deleteReqByUrl,
        putReqByUrl,
        getReqByUrl,
        patchReqByUrl,
        postReqByUrl,
    }

        // name sanitization
    if (name) {
        returnObj['get' + name] = getReq
        returnObj['post' + name] = postReq
        returnObj['put' + name] = putReq
        returnObj['patch' + name] = patchReq
        returnObj['delete' + name] = deleteReq
        returnObj['loading' + name] = loading
        returnObj['data' + name] = data
        returnObj['error' + name] = error
        returnObj['getByUrl' + name] = getReqByUrl
        returnObj['postByUrl' + name] = postReqByUrl
        returnObj['putByUrl' + name] = putReqByUrl
        returnObj['patchByUrl' + name] = patchReq
        returnObj['deleteByUrl' + name] = deleteReq
    }

    return returnObj
}

Thanks for reading guys!

And oh, you have read this post. So you can see the Vue.js version of this useAxios ;-)

Go and check it out:
Easier way of data fetching with Axios in Vue3

Easier way of data fetching with Axios in Vue3

Ata Parvin Ghods — Wed, 04 Oct 2023 11:40:43 +0000

Data fetching is one of the most important parts of front-end programming. There are quite a few libraries and packages like fetch API, TanStack, etc. Axios is my choice but is it easy and efficient enough?

We used to use Axios traditionally like the code below

axios({
  url:"/some-api-url",
  method: "GET",
}).then((res) => {
     // more response code here
  }).catch((err) => {
     // more error code here
  })

Or maybe like this

axios
  .get("/some-api-url")
  .then((res) => {
     // more response code here
  }).catch((err) => {
     // more error code here
  })

These codes are the same and simple, right? But what if I like to add some loaders?
Okay That's simple as well, I will code this one

const loader = ref(false)

loader.value = true
axios
  .get("/some-api-url")
  .then((res) => {
     // more response code here
  }).catch((err) => {
     // more error code here
  })
  .finally(() => {
     loader.value = false
  })

See! It's simple!

But what if I want to have 10 different requests on a single page or component? well, I have to make 10 different loader refs and manually set them true and false! And what if I want to set an alert for the request if its response is an error? Yes, it's complicated and dirty now!

So I decided to code a custom hook for Axios to make my life easier

First, I created useAxios.js file and created a function in it like so:

const useAxios = ({ url, data: userData, headers }) => {
  const loading = ref(false) // for making loaders easily
  const error = ref(null) // getting error if there is any
  const data = ref(null) // the response of the request
  const status = ref(null) // status code
  const response = ref(null) // response obj (data, headers, etc.)
  const errorMessage = ref(null) // error message to show
}

Then I created the request function so I can invoke it whenever I want with the given arguments

const useAxios = ({ url, data: userData, headers }) => {
  const loading = ref(false) // for making loaders easily
  const error = ref(null) // getting error if there is any
  const data = ref(null) // the response of the request
  const status = ref(null) // status code
  const response = ref(null) // response obj (data, headers, etc.)
  const errorMessage = ref(null) // error message to show

  const request = async (method) => {
    // Implementing loading functionality
    loading.value = true

    // Don't forget to put in try/catch statement!
    try {
      const res = await axios({ url, method, userData, headers })

      // Response data
      data.value = res.data

      // Response Obj
      response.value = res

      // Response status code
      status.value = res.status
    } catch (e) {
      // Response Obj
      response.value = e.response

      // Error obj
      error.value = e

      // Error status code
      status.value = e.response.status

      // Error message
      errorMessage.value = e.messaage
    }

    loading.value = false
  }
}

create axiosInstance file, so we can set default base url and add manual configuration into axios

axiosInstance.js

import axios from 'axios'
import axiosConfig from '../axios.config.js'

const axiosInstance = axios.create()

axiosInstance.defaults.baseURL = "http://localhost:8000"

export default axiosInstance

Logic is done, we just need some more functions to make it much easier, when we want to make a request, So we add request functions with different methods and return them

And that's it, the final code should be look like this:

useAxios.js

import axiosInstance from './axiosInstance.js'


const alert = useAlert()

const objectToQueryString = (obj, withQuestionMark = true) => {
    let r = []

    Object.keys(obj).forEach((key) => {
        if (obj[key] !== null && obj[key] !== undefined) {
            r.push(key + `=` + obj[key])
        }
    })

    return r.length > 0 ? `${withQuestionMark ? '?' : ''}${r.join('&')}` : null
}


const useAxios = ({
    url,
    data: userData,
    headers,
    name = null,
    notif = true,
    notification,
}) => {
    const loading = ref(false)
    const error = ref(null)
    const data = ref(null)
    const status = ref(null)
    const response = ref(null)
    const errorMessage = ref(null)
    const useNotificationForAllRef = ref(notif)

    const request = async (method, payload = {}, noLoading = false) => {
        if (!noLoading) {
            loading.value = true
        }

        const axiosObj = {
            method,
            headers,
        }

        if (method === 'GET') {
            if (objectToQueryString(payload)) {
                axiosObj.url = url + objectToQueryString(payload)
            } else {
                axiosObj.url = url
            }
        } else {
            axiosObj.url = url
            axiosObj.data = payload
        }

        try {
            const res = await axiosInstance(axiosObj)

            data.value = res.data
            response.value = res
            status.value = res.status
            loading.value = false

            // Add your alert here if you have any
            if (notif) {
                // TODO translate first then
                // alert({
                   // title: data.value.status,
                   // type: 'success',
                   // text: data.value.message,
                // })
            }

            return res.data
        } catch (e) {
            response.value = e.response
            error.value = e
            status.value = e.response.status
            errorMessage.value = e.response.data.message
            loading.value = false

        // Add your alert here if you have any
            if (notif) {
                // TODO translate first then
                // alert({
                   // title: e.response.data.status,
                   // type: 'error',
                   // text: e.response.data.message,
               // })
            }

            throw e
        }
    }

    const getReq = async (data, noLoading = false) =>
        await request('GET', data, noLoading)
    const postReq = async (data, noLoading = false) =>
        await request('POST', data, noLoading)
    const putReq = async (data, noLoading = false) =>
        await request('PUT', data, noLoading)
    const patchReq = async (data, noLoading = false) =>
        await request('PATCH', data, noLoading)
    const deleteReq = async (data, noLoading = false) =>
        await request('DELETE', data, noLoading)

    const returnObj = {
        error,
        data,
        response,
        status,
        errorMessage,
        loading,
        getReq,
        postReq,
        putReq,
        patchReq,
        deleteReq,
    }

    if (name) {
        // name sanitization

        returnObj['get' + name] = getReq
        returnObj['post' + name] = postReq
        returnObj['put' + name] = putReq
        returnObj['patch' + name] = patchReq
        returnObj['delete' + name] = deleteReq
        returnObj['loading' + name] = loading
        returnObj['data' + name] = data
        returnObj['error' + name] = error
    }

    return returnObj
}

Let's see, how can we use it in a component

component.js

<template>
  <div>
    <LoadingComponent loading="loading" />
    <button @click="clickFunction">
      Click me
    <button />
  <div />  
<template />

<script setup>
import useAxios from '~/utils/useAxios'

const { postReq, getReq, loading, data } = useAxios({
  url: '/product',
  name: 'Product',
})

const { putProduct2, loadingProduct2 } = useAxios({
  url: '/product/2',
  name: 'Product2',
})

const clickFunction = async () => {
  await putProduct2({
    name: "Product 2 new name"
  })

  // will get products in /api/v2/product
  await getReq()

  // you can also get in variable
  const productsData = await getReq()
}
<script />

Hope you like it!
Thanks for reading :)

React Portals, And how to use them (Next js and CRA)

Ata Parvin Ghods — Wed, 30 Jun 2021 14:16:51 +0000

Hi everyone.
In this post I want to show you how to work with react portals.
First I'm gonna create one then render some elements, such as modals, notifications, etc...

1. Create create-react-app

// Create a new app
npx create-react-app my-app

// Run the created app
cd my-app
yarn start

// http://localhost:3000

2.Edit index.html and add you portal

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta
         name="description"
         content="Web site created using create-react-app"
      />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <title>React App</title>
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <--- Your portal here --->
      <div id="myportal"></div>
   </body>
</html>

3.Create HOC folder and inside it create Portal.js
(src/HOC/Portal.js)

import ReactDOM from "react-dom"

const Portal = (Component) => (props) => {
   return ReactDOM.createPortal(
      <Component {...props} />,
      document.getElementById("myportal")
   )
}

export default Portal

4.Now let's create our Component
This component will render in "myportal" element
(src/components/MyComponent.js)

import Portal from "./../HOC/Portal"

const MyComponent = () => {
    return <div>This component will be rendered in myportal</div>
}

export default Portal(MyComponent) // trick is here

So, as you can see I wrapped MyComponent in Portal component, Portal will render everything that is wrapped in it. :)

create-react-app is done. Let's go to Next Js

1.Create next app

// Create a new app
npx create-next-app my-app

// Run the created app
cd my-app
yarn dev

// http://localhost:3000

In Next.Js we don't have any html file so we can't add div manually, But we have other choice.

2.Let's create _document.js file in pages folder
(pages/_document.js)

import Document, { Html, Head, Main, NextScript } from "next/document"

export default class MyDocument extends Document {
   render() {
      return (
         <Html>
            <Head />
            <body>
               <Main />
               <div id='myportal' /> //out portal is here...
               <NextScript />
            </body>
         </Html>
      )
   }
}

So now we got our portal element.

3.Time to create our HOC
(HOC/Portal.js)

import { useEffect, useState } from "react"
import { createPortal } from "react-dom"

const Portal= ({ children }) => {
   const [mounted, setMounted] = useState(false)

   useEffect(() => {
      setMounted(true)

      return () => setMounted(false)
   }, [])

   return mounted
      ? createPortal(children, 
        document.querySelector("#myportal"))
      : null
}

export default Portal

Now to use it we will put our components as a child in Portal component and return it as a children.

4.For example in index.js/ Home page
(pages/index.js)

function Home() {
   return (
      <div>
         <Head>
         </Head>

         <Portal>
            <MyComponent /> //our component which will 
                            //be rendered inside myportal
         </Portal>
      </div>
   )
}

export default Home

So you are all done my friends! Hope you enjoyed this post

React Protected Routes (Next js & CRA) simple but efficient

Ata Parvin Ghods — Fri, 18 Jun 2021 00:47:15 +0000

Sometimes we need to hide pages/routes from the user and disabling their accessibility to those pages.
In this post I want to show you the easiest way(which I think it is) to do this.

1.I will start with create-react-app

// Create a new app
npx create-react-app route-app react-router-dom

// Run the created app
cd route-app
yarn start

// http://localhost:3000

2.In our main component(App.js) we will define our routes
(src/App.js)

import ProtectedRoute from './ProtectedRoute'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

export default App = () => {
   return(
      <BrowserRouter>
        <Switch>
          <Route exact path='/posts' component={Home} />
          <ProtectedRoute exact path='/login' component={Login} />
          <Route path='/' component={NotFound} /> 
          //this is 404 page btw - no "exact" prop
        </Switch>
      </BrowserRouter>
   )
}

As you can see we will create our route with a custom route component, So let's build that.

3.Our ProtectedRoute component
(src/ProtectedRoute.js)

import React from 'react'
import { Redirect, Route } from 'react-router'

export const ProtectedRoute = ({ component: Component, ...rest}) => {
    const userIsLoggedIn = true //our user logged in

    return(
        <Route 
            {...rest}
            render={(props) => {
                if(!userIsLoggedIn){
                    return <Component {...props}/>
                } else {
                    return <Redirect to={{ pathname: '/', state: {from: props.location }}} />
                }
            }}
        />
    )
}

If our user is not logged in then show the Component(which is loggin page in this case because we don't want logged in user see the login in page), If not Redirect the user to home page.

This is how we protect route with react-router-dom

In Next Js we use HOC(high-order-component)

1.Create next app

// Create a new app
npx create-next-app route-app

// Run the created app
cd route-app
yarn dev

// http://localhost:3000

2.First We create HOC
(src/HOC/ProtectedRoute)

import { useRouter } from "next/router"

const ProtectedRoute = (ProtectedComponent) => {

   return (props) => {

      if (typeof window !== "undefined") {
         const Router = useRouter()

         const userIsLoggedIn = true

         if (userIsLoggedIn) {
            Router.replace("/")
            return null
         } else {
            return <ProtectedComponent {...props} />
         }
      }

      return null
   }
}

export default ProtectedRoute

In this case we say if the user is logged in then redirect to home page else return the component

3.Make our page protected
(src/pages/login.js)

import ProtectedRoute from "../HOC/ProtectedRoute"

const Login= () => {
   return (
      <div>
          <a>Login Page</a>
      </div>
   )
}

export default ProtectedRoute(Login) //wrap our component in hoc

That's all you need! Thank you

React progress bar on page load/route change(both Next js & CRA)

Ata Parvin Ghods — Mon, 14 Jun 2021 14:48:00 +0000

Last day I was working on a project which I had to add progress bar (Like youtube's) but I couldn't find anything useful on the internet.

So i decided to create my own and wanna share it with you.
Hope it helps!

//output

I'm going to start with create-react-app

// Create a new app
npx create-react-app progress-app react-router-dom react-topbar-progress-indicator

// Run the created app
cd progress-app
yarn start

// http://localhost:3000

I used react-topbar-progress-indicator package but you can use/create your own.

1.Define your routes in App.js
(src/App.js)

import { BrowserRouter, Switch, Route } from "react-router-dom"

const App = () => {
   return (
      <>
         <BrowserRouter>
            <Switch>
               <Route exact path='/' />
               <Route exact path='/about' />
            </Switch>
         </BrowserRouter>
      </>
   )
}

export default App

2.Let's create some pages components
(src/pages/Home.js)

import { Link } from "react-router-dom"

const Home = () => {
   return (
      <div>
         <h1>Home page</h1>
         <Link to='/about'>About</Link>
      </div>
   )
}

export default Home

(src/pages/About.js)

import { Link } from "react-router-dom"

const About = () => {
   return (
      <div>
         <h1>About page</h1>
         <Link to='/'>Home</Link>
      </div>
   )
}

export default About

3.Import pages in App.js

const App = () => {
   return (
      <>
         <BrowserRouter>
            <Switch>
               <Route exact path='/' component={Home} />
               <Route exact path='/about' component={About} />
            </Switch>
         </BrowserRouter>
      </>
   )
}

4.Now we will create a component and surround our Routes in it.
(src/CustomSwitch.js)

const CustomSwitch = ({ children }) => {
   return (
      <Switch>
         { children }
      </Switch>
   )
}

This will return Routes in Switch Component.
Now out App.js should be look like this

const App = () => {
   return (
      <>
         <BrowserRouter>
            <CustomSwitch>
               <Route exact path='/' component={Home} />
               <Route exact path='/about' component={About} />
            </CustomSwitch>
         </BrowserRouter>
      </>
   )
}

5.In our CustomSwitch component

import React, { useEffect, useState } from "react"
import { Switch, useLocation } from "react-router-dom"
import TopBarProgress from "react-topbar-progress-indicator"

const CustomSwitch = ({ children }) => {
   const [progress, setProgress] = useState(false)
   const [prevLoc, setPrevLoc] = useState("")
   const location = useLocation()

   return (
      <>
         {progress && <TopBarProgress />}
         <Switch>{children}</Switch>
      </>
   )
}

We use react-router-dom location hook. This hook will show us the path.

   useEffect(() => {
      setPrevLoc(location.pathname)
      setProgress(true)
      if(location.pathname===prevLoc){
          setPrevLoc('')
      }
   }, [location])

   useEffect(() => {
      setProgress(false)
   }, [prevLoc])

Whenever location changed, first useEffect hook will run and change the previous location & set progress bar to true.
And whenever previous location changed the second useEffect will run and change progress bar back to false.

Our CustomeSwitch.js should look like this
(src/CustomSwitch.js)

import React, { useEffect, useState } from "react"
import { Switch, useLocation } from "react-router-dom"
import TopBarProgress from "react-topbar-progress-indicator"

const CustomSwitch = ({ children }) => {
   const [progress, setProgress] = useState(false)
   const [prevLoc, setPrevLoc] = useState("")
   const location = useLocation()

   useEffect(() => {
      setPrevLoc(location.pathname)
      setProgress(true)
      if(location.pathname===prevLoc){
          setPrevLoc('')
          //thanks to ankit sahu
      }
   }, [location])

   useEffect(() => {
      setProgress(false)
   }, [prevLoc])

   return (
      <>
         {progress && <TopBarProgress />}
         <Switch>{children}</Switch>
      </>
   )
}

export default CustomSwitch

And your done with create-react-app

Let's continue with Next.Js
This one is actually quite simple than CRA

Create Next app using commands

// Create a new app
npx create-next-app progress-app react-topbar-progress-indicator

// Run the created app
cd progress-app
yarn dev

// http://localhost:3000

1.Add one page
(pages/about.js)

import Link from "next/link"

const About = () => {
   return (
      <div>
         <h1>About page</h1>
         <Link href='/'>
            <a>HOME PAGE</a>
         </Link>
      </div>
   )
}

export default About

And your index.js
(pages/index.js)

import Link from "next/link"

const Home = () => {
   return (
      <div>
         <h1>Home page</h1>
         <Link href='/about'>
            <a>About PAGE</a>
         </Link>
      </div>
   )
}

export default Home

Now we are ready

3.In _app.js
(pages/_app.js)

import Router from "next/router"
import { useState } from "react"

export default function MyApp({ Component, pageProps }) {
   const [progress, setProgress] = useState(false)

   return (
      <Component {...pageProps} />
   )
}

Next.Js provide us some functions with Router, which you can read more about it in Next-JS-Routing

import Router from "next/router"
import { useState } from "react"
import TopBarProgress from "react-topbar-progress-indicator"


export default function MyApp({ Component, pageProps }) {
   const [progress, setProgress] = useState(false)

   Router.events.on("routeChangeStart", () => {
      setProgress(true) 
      //function will fired when route change started
   })

   Router.events.on("routeChangeComplete", () => {
      setProgress(false) 
      //function will fired when route change ended
   })

   return (
      <>
         {progress && <TopBarProgress />}
         <Component {...pageProps} />
      </>
   )
}

When Route changed, state become true and progress bar will be shown and when route changing ended it will disappear.

You are done my friends!

I hope you enjoyed this post.