import axios from 'axios';
import { createApiFetcher } from 'axios-multi-api';

const api = createApiFetcher({
  axios,
  apiUrl: 'https://example.com/api',
  endpoints: {
    getUserDetails: {
      method: 'get',
      url: '/user-details',
    },

    // No need to specify method: 'get' for GET requests
    getPosts: {
      url: '/posts/:subject',
    },

    updateUserDetails: {
      method: 'post',
      url: '/user-details/update/:userId',
    },

    // ...
    // You can add many more endpoints & keep the codebase clean
  },
  onError(error) {
    console.log('Request failed', error);
  },
  // Optional: default headers (axios config is supported)
  headers: {
    'my-auth-key': 'example-auth-key-32rjjfa',
  },
});

// Fetch user data - "response" will return data directly
// GET to: http://example.com/api/user-details?userId=1&ratings[]=1&ratings[]=2
const response = await api.getUserDetails({ userId: 1, ratings: [1, 2] });

// Fetch posts - "response" will return data directly
// GET to: http://example.com/api/posts/myTestSubject?additionalInfo=something
const response = await api.getPosts(
  { additionalInfo: 'something' },
  { subject: 'myTestSubject' }
);

// Send POST request to update userId "1"
await api.updateUserDetails({ name: 'Mark' }, { userId: 1 });

// Send POST request to update array of user ratings for userId "1"
await api.updateUserDetails({ name: 'Mark', ratings: [1, 2] }, { userId: 1 });

// api/index.ts
import axios from 'axios';
import { createApiFetcher } from 'axios-multi-api';

const api = createApiFetcher({
  axios,
  apiUrl: 'https://example.com/api',
  strategy: 'reject',
  endpoints: {
    getProfile: {
      url: '/profile/:id',
    },
  },
  onError(error) {
    console.log('Request failed', error);
  },
});

export default api;

// hooks/useProfile.ts

import api from '../api/index';

export const useProfile = ({ id }) => {
  return useQuery(['profile', id], () => api.getProfile({ id }), {
    initialData: [],
    initialDataUpdatedAt: Date.now(),
    enabled: id > 0,
    refetchOnReconnect: true,
  });
};

import {
  Endpoints,
  Endpoint,
  APIQueryParams,
  APIUrlParams,
} from 'axios-multi-api';

import axios from 'axios';
import { createApiFetcher } from 'axios-multi-api';

interface myQueryParams {
  newMovies: boolean;
}

interface EndpointsList extends Endpoints {
  fetchMovies: Endpoint<myQueryParams, myURLParams, myResponse>;

  // Or you can use just Endpoint
  fetchTVSeries: Endpoint;
}

const api = createApiFetcher({
  axios,
  // Your config
}) as unknown as EndpointsList;

// Will return an error since "newMovies" should be a boolean
api.fetchMovies({ newMovies: 1 });

import axios from 'axios';
import { createApiFetcher } from 'axios-multi-api';

const api = createApiFetcher({
  axios,
  apiUrl: 'https://example.com/api',
  endpoints: {
    sendMessage: {
      method: 'get',
      url: '/send-message/:postId',
    },
  },
});

async function sendMessage() {
  await api.sendMessage(
    { message: 'Something..' },
    { postId: 1 },
    {
      onError(error) {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      },
    }
  );

  console.log('Message sent successfully');
}

sendMessage();

import axios from 'axios';
import { ApiHandler } from 'axios-multi-api';

class MyRequestError {
  public constructor(myCallback) {
    this.myCallback = myCallback;
  }

  public process(error) {
    this.myCallback('Request error', error);
  }
}

class ApiService extends ApiHandler {
  /**
   * Creates an instance of Api Service.
   * @param {object}  payload                   Payload
   * @param {string}  payload.apiUrl            Api url
   * @param {string}  payload.endpoints      Api endpoints
   * @param {*}       payload.logger                 Logger instance
   * @param {*}       payload.myCallback             Callback function, could be a dispatcher that e.g. forwards error data to a store
   */
  public constructor({ apiUrl, endpoints, logger, myCallback }) {
    // Pass settings to API Handler
    super({
      axios,
      apiUrl,
      endpoints,
      logger,
      onError: new MyRequestError(myCallback),
    });

    this.setupInterceptor();
  }

  /**
   * Setup Request Interceptor
   * @returns {void}
   */
  protected setupInterceptor(): void {
    this.getInstance().interceptors.request.use(onRequest);
  }
}

const api = new ApiService({
  // Your config
});