src/conf/mutator.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import Axios, { AxiosError, AxiosRequestConfig } from "axios";

export const AXIOS_PANTRY_INSTANCE = Axios.create({
  baseURL: process.env.REACT_APP_API_SERVER!,
});

export const useMutator = <T>(): ((
  config: AxiosRequestConfig
) => Promise<T>) => {
  return (config: AxiosRequestConfig) => {
    const source = Axios.CancelToken.source();
    const promise = AXIOS_PANTRY_INSTANCE({
      ...config,
      cancelToken: source.token,
    }).then(({ data }) => data);

    // @ts-ignore
    promise.cancel = () => {
      source.cancel("Query was cancelled by React Query!");
    };

    return promise;
  };
};

export default useMutator;

// In some case with react-query and swr you want to be able to override the return error type so you can also do it here like this
export type ErrorType<Error> = AxiosError<Error>;