apiIntegrationHooks

useApi is a custom React hook that allows you to dynamically manage API integration. useMutipleApiCalls is an advanced hook to handle multiple API calls.

Installation

You can install useApi and useMutipleApiCalls via npm:

npm i react-use-api-custom-hook

usage

1. apiClient.ts

import axios from 'axios';

export const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

apiClient.interceptors.request.use(
  (config) => {
    if (!apiClient.defaults.baseURL) {
      throw new Error('Please Configure Base URL in Env');
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);


2. apiService.ts
import { apiClient } from '../../config/axiosClient';

export const fetchUsers = async () => {
  const { data } = await apiClient.get('/api/users');
  return data;
};

export const fetchPosts = async () => {
  const { data } = await apiClient.get('/api/posts');
  return data;
};

export const fetchComments = async () => {
  const { data } = await apiClient.get('/api/comments');
  return data;
};

3. MyComponent.tsx

import React, { useEffect } from 'react';
import { useMultipleApiCalls } from './useMultipleApiCalls'; // Adjust path accordingly
import { fetchUsers, fetchPosts, fetchComments } from './apiService'; // Adjust path accordingly

const MyComponent = () => {
  const {
    loading,
    error,
    data,
    triggerApiCalls,
  } = useMultipleApiCalls([
    fetchUsers,
    fetchPosts,
    fetchComments,
  ], [0, 1, 2]); // Auto-fetch all APIs on mount

  useEffect(() => {
    triggerApiCalls(); // Trigger all API calls on mount
  }, [triggerApiCalls]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Data</h1>
      <h2>Users:</h2>
      <pre>{JSON.stringify(data[0], null, 2)}</pre>
      <h2>Posts:</h2>
      <pre>{JSON.stringify(data[1], null, 2)}</pre>
      <h2>Comments:</h2>
      <pre>{JSON.stringify(data[2], null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

4. UserDetails.tsx

import React, { useEffect } from 'react';
import { useApi } from './useApi'; // Adjust path accordingly
import { getUserById } from './apiService'; // Adjust path accordingly

const UserDetail = ({ userId }: { userId: number }) => {
  const {
    loading,
    error,
    data,
    executeApiCall,
  } = useApi(getUserById);

  useEffect(() => {
    if (userId) {
      executeApiCall(userId);
    }
  }, [userId, executeApiCall]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>User Detail</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default UserDetail;