All files / src/lib axios.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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
6x
6x
 
6x
 
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6x
 
import axios, { AxiosError, AxiosInstance } from 'axios';
import axiosRetry from 'axios-retry';
 
let _client: AxiosInstance | null = null;
 
const createApiClient = () => {
  const client = axios.create();
  client.defaults.baseURL = process.env.REACT_APP_GOOGLEAPIS_URL;
 
  // CSRF トークンを送受信する
  Iif (process.env.NODE_ENV === 'development') {
    // Cookie を含めて送信する
    client.defaults.withCredentials = true;
 
    // CSRF トークンを Cookie 経由で受信する場合の設定
    //
    // Axios 1.6.2 以降で CSRF トークンを送信する場合は withCredentials に加え withXSRFToken も指定する
    //   see: https://github.com/axios/axios/blob/v1.x/CHANGELOG.md#162-2023-11-14
    //   1.6.2 (2023-11-14)
    //   "withXSRFToken: added withXSRFToken option as a workaround to achieve the old withCredentials behavior"
    // client.defaults.withXSRFToken = true;
    // レスポンス内の CSRF トークンが格納された Cookie 名と、リクエストに含める際の HTTP ヘッダー名を指定する (名称はサーバ側の指定に従う)
    // client.defaults.xsrfCookieName = 'csrf_token';
    // client.defaults.xsrfHeaderName = 'x-csrf-token';
  }
 
  // リクエストの送受信時にログ出力する
  Iif (process.env.NODE_ENV === 'development') {
    client.interceptors.request.use((config) => {
      console.debug(`request sent.: %o`, config);
      return config;
    });
    client.interceptors.response.use((response) => {
      console.debug(`response received.: %o`, response);
      return response;
    });
  }
 
  // リトライを制御する
  axiosRetry(client, {
    // リトライ回数
    retries: 3,
    // 指数バックオフ方式
    retryDelay: axiosRetry.exponentialDelay,
    // リトライ時のログ出力
    onRetry: (count: number, error: AxiosError) => console.warn(`axios retried: retryCount=${count}, error=%o`, error),
    onMaxRetryTimesExceeded: (error: AxiosError) => console.error(`axios failed: error=%o`, error),
  });
  return client;
};
 
/**
 * API クライアントのインスタンスを取得します。
 * @returns API クライアント
 */
export const getApiClient = () => _client ?? (_client = createApiClient());