【React v18】Recoilでグローバルステートに保存した値を呼び出してaxiosのinterceptors.requestを使ってHTTPリクエストのヘッダーに埋め込みたい

Question

実現したいこと

access tokenがグローバルステートに保存されている場合に、axiosのinterceptors.requestを使ってHTTPリクエストのヘッダーにaccess tokenを埋め込みたい。
現状では、useRecoilValueを使って保存されたaccess tokenの値を呼び出しそれをinterceptors.requestを使ってヘッダーに埋め込もうとしているが、関数コンポーネント、カスタムフック外でフックを使ってしまっているためエラーが発生してしまっている。

前提

バックエンド側をRails、フロント側をReactを使ってSPA構成でアプリを作成しています。
ログインフォーム送信後にaccess tokenがレスポンスが返ってくるので、その値をRecoilを使ってグローバルステートに保存できているところまでは確認できました。
Reactはbullet-proofというOSSを参考にしているためフォルダ構成はbullet-proofとほぼ同じです。
https://github.com/alan2207/bulletproof-react

発生している問題・エラーメッセージ

Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

関数コンポーネント、カスタムフック外でuseRecoilValueを使ってしまっているのでエラー発生しているため、想定のエラーです。

該当のソースコード

HTTPリクエストヘッダーにaccess token情報を埋め込むために9-12行目を追加したところでエラー発生しています。

client/src/lib/apiClient.ts

import applyCaseMiddleware from 'axios-case-converter';
import Axios, { AxiosRequestConfig } from 'axios';

import { API_URL } from '@/config';
import { useRecoilValue } from 'recoil';
import { authState } from '@/global_states/auth/authState';

function authRequestInterceptor(config: AxiosRequestConfig) {
  const token = useRecoilValue(authState);
  if (token) {
    config.headers.authorization = `${token}`;
  }
  config.headers.Accept = 'application/json';
  config.headers = { 'X-Requested-With': 'XMLHttpRequest' };
  return config;
}

const options = {
  ignoreHeaders: true
}

export const ApiClient = applyCaseMiddleware(Axios.create({
  withCredentials: true,
  baseURL: API_URL,
}), options);

ApiClient.interceptors.request.use(authRequestInterceptor);
ApiClient.interceptors.response.use(
  (response) => response.data,
);

試したこと

• 初めは関数コンポーネント内、カスタムフック内以外でフックが使えないということを知らず、関数内でフックを使って保存したaccess tokenの値を呼び出し、ヘッダーに埋め込もうとしましたがエラーが発生しました
• 「recoil グローバルステート axiosのヘッダー」やこれに似た検索をかけてみましたが問題解決に関連しそうな情報は出てきませんでした

フロントエンドの経験がかなり浅く、他に何を試せばいいか分からない状態が続いております。
お力添えいただければ幸いです。よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

OS: macOS Ventura 13.2 (intel processor)
Docker: Docker version 20.10.21
docker-compose: Docker Compose version v2.13.0
React: 18.2.0
TypeScript: 4.9.4
axios: 1.2.1
recoil: 0.7.6
Ruby: 3.1.2
Rails: 7.0.4

Answer 1

カスタムフックを作成するのはどうでしょうか？

client/src/hooks/useAuthInterceptor.ts

import { AxiosRequestConfig } from 'axios';
import { useRecoilValue } from 'recoil';
import { authState } from '@/global_states/auth/authState';

export const useAuthInterceptor = () => {
  const token = useRecoilValue(authState);

  const authRequestInterceptor = (config: AxiosRequestConfig) => {
    if (token) {
      config.headers.authorization = `${token}`;
    }
    config.headers.Accept = 'application/json';
    config.headers['X-Requested-With'] = 'XMLHttpRequest';
    return config;
  };

  return authRequestInterceptor;
};

client/src/components/ApiInterceptorProvider.tsx

import { FC, useEffect } from 'react';
import { ApiClient } from '@/lib/apiClient';
import { useAuthInterceptor } from '@/hooks/useAuthInterceptor';

export const ApiInterceptorProvider: FC = ({ children }) => {
  const authInterceptor = useAuthInterceptor();

  useEffect(() => {
    const interceptorId = ApiClient.interceptors.request.use(authInterceptor);

    return () => {
      ApiClient.interceptors.request.eject(interceptorId);
    };
  }, [authInterceptor]);

  return <>{children}</>;
};

import React from 'react';
import { ApiInterceptorProvider } from '@/components/ApiInterceptorProvider';
import { YourOtherComponents } from '@/components/YourOtherComponents';

function App() {
  return (
    <ApiInterceptorProvider>
      <YourOtherComponents />
    </ApiInterceptorProvider>
  );
}

export default App;

Comments

[Utsubo]

y-temp4さん、返信が遅くなってしまい申し訳ございません。
ご回答いただきありがとうございます、実装方法を参考にさせていただきました。
現在、別のアプリを作成しており認証認可方式が変わってしまったため、手元のアプリには実装できないのが残念ですが、教えていただいた実装方法は今後のための勉強になりました。
改めて、ご回答いただきありがとうございました！