DEV Community

Cover image for Axios Interceptor Hook Typescript
Muhammad Fahad
Muhammad Fahad

Posted on

Axios Interceptor Hook Typescript

Re-Published

Hi,
Before that I have published my first NPM package which is: axios-interceptor-hook

Problems

  • Build on JavaScript, difficult for user to know about props because there is no suggestions.
  • There is no way to call multipart/form-data content-type.

What's new

  • Developed with typescript.
  • separate hook for Application/json, and multipart/form-data.
  • You can use Types for the configurations. (ApiConfig).

Interceptors

Axios interceptors are the methods which are used for each call request and response transformation using axios. Interceptors helps to transform your request before calling api request and when it gets response from the api. It's just like working as middleware.

Configuration

You need to install npm package axios-hook-typescript

Github Repo: (https://github.com/sheikhfahad67/axios-hook-typescript)

Run the command on your terminal.
npm install axios react-toastify axios-hook-typescript

axios-hook-typescript

npm

React hooks for axios with built in react-tostify integration. Simple to use with minimum configuration.

axios-interceptor-hook

Features

  • All the axios awesomeness you are familiar with
  • Zero configuration, but configurable if needed
  • Integrated react-toastify for better toast messages
  • Minimize file managment

Installation

npm install axios react-toastify axios-hook-typescript

axios and react-toastify are peer dependencies and needs to be installed explicitly

Example

import { useEffect, useRef } from 'react';
import {
  ApiConfig,
  useJsonApiInterceptor,
  useMultipartInterceptor,
} from 'axios-hook-typescript';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';

interface todosObject {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

const App = () => {
  const { apiHandler: jsonApiHandler, data: jsonData } =
    useJsonApiInterceptor();
  const { apiHandler: multipartApiHandler } = useMultipartInterceptor();
  const inputRef = useRef(null);

  const getTodos = async () => {
    const config: ApiConfig = {
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET',
      displayToast: true,
      successMessage: 'Fetch all todos',
      theme: 'colored',
    };
    await jsonApiHandler(config);
  };

  useEffect(() => {
    getTodos();
  }, []);

  const handleFileChange = async (e: any) => {
    const { files: newFiles } = e.target;
    const formData = new FormData();
    formData.append('image', newFiles[0]);

    const config: ApiConfig = {
      url: 'http://localhost:8000/files',
      data: formData,
      method: 'POST',
      displayToast: true,
      successMessage: 'File uploaded successfully',
    };
    await multipartApiHandler(config);
  };

  return (
    <div className='App'>
      <ToastContainer />
      <h1>Axios Interceptor Examples</h1>
      <input
        id='file'
        type='file'
        multiple
        ref={inputRef}
        onChange={handleFileChange}
      />
      <button className='submit-btn' type='submit'>
        Upload
      </button>
      <div style={{ marginTop: '50px', border: '1px solid green' }}>
        {jsonData &&
          Object.keys(jsonData).length > 0 &&
          jsonData.map((todo: todosObject) => (
            <h1 key={todo.id}>{todo?.title}</h1>
          ))}
      </div>
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Documentation

Hooks

useJsonApiInterceptor - for content-type: application/json.
useMultipartInterceptor - for content-type: multipart/form-data

Return

It will return following fields:

Fields Type Description
data Object It return the response of api (res.data)
isPending Bool For loading purpose return true while fetching and return false after completion or failure
apiHandler Func Function to give you control over calling when you need just by passing config

For Bearer Token

Need to save your auth token as, interceptor will automatically get it.

localStorage.setItem('authToken', <YOUR TOKEN>);

Environment Variable for Base URL

Please add env variable into your .env or .env.local file.

REACT_APP_BASE_URL="https://jsonplaceholder.typicode.com"

Config Props

Types

ApiConfig - for api configurations

Fields Type Description
method string 'get', 'post', 'put', 'delete', 'patch'
url string it will be your endpoint
delay number default 5000
data Object required on post, put, patch requests
successMessage string 'Any Message'
position string 'top-right', 'top-left', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center'
hideProgressBar Bool true or false
theme string 'light','dark','colored'

License

MIT

Discussion (0)