React×TypeScriptのAPI通信をRepositoryFactoryで書く

これは何

フロント(React)からAPIと何か通信をする時、通信ロジックが冗長になったり、axiosなんかの設定が分散したりするのを解決しちゃいたい！を記事にしました。

ReposiotryFactoryってなんだろ

ReposiotryFactoryとはソフトウェアデザインパターンの一つで

• リポジトリパターンを使用して、データを返す以外のロジックを使用せずに、分離された方法でリソースにアクセスできる
• ファクトリパターンを使用して、必要なリポジトリと、環境のロジックをインスタンス化する

という設計で、API通信における冗長をなくし可読性が高くすることができると考え、私は採用しています。

実際にかいてみる

ToDoアプリのToDo機能(Get,Post)を実装する程で以下にサンプルを示します。

• todoResourceへのGet →Todo一覧の取得
• todoResourceへのPost →Todo新規作成

ReposiotryFactoryの定義

axiosインスタンス作成を行う。ドメイン変更時・設定変更等を一括で行えるようになる。
React でAxios を使用する方法

Repository.ts

import axios from "axios";
const baseDomein: string = "http://localhost:3000";
export default axios.create({
    baseURL: baseDomein,
    withCredentials: true,
});

使用するRepositoryをrepositoriesに格納していき、
getでrepositoryが取得できるようにしています。

RepositoryFactory.ts

import UserRepository from "./userRepository";
import SessionRepository from "./sessionRepository";
import todoRepository from "./todoRepository";
const repositories = {
    users: UserRepository,
    session: SessionRepository,
    todo: todoRepository,
};

export const RepositoryFactory = {
    get: (name: string) => repositories[name],
};

次にリソースごとにRepositoryを作成し、axiosのインスタンスを返してあげるようなメソッドを作成してあげます。
新しくAPIを叩きたい場合はどんどんここに追加していくイメージです。

todoRepository.ts

import Repository from "./Repository";
const resource: string = "/todos";
export default {
    get() {
        return Repository.get(`${resource}`);
    },
    post(payload: Object) {
        return Repository.post(`${resource}`, payload);
    },
};

実際の通信部

axios、async/awaitを使ったHTTPリクエスト(Web APIを実行)

todoResourceへのPost

    import { RepositoryFactory } from "../../repositories/RepositoryFactory";
    const todoRepository = RepositoryFactory.get("todo");
    async function handleClick() {
        try {
            const res = await todoRepository.post({
                todo: {
                    title: todoData.title,
                    user_id: loginUserId,
                },
            });
            console.log(res);
        } catch (error) {
            console.log(err);
        }
    }

    return (
        
    <Button variant="contained" color="primary" size="large" onClick={handleClick}>
                投稿！
    </Button>
    );

まとめ

コンポーネントごとにインスタンスを作成してしまいがちでしたが、デザインパターンを利用することでDRYを守ることができます。
今回のケースが全てのプロダクトに当てはまるわけではないと考えますが、API通信関係の処理に不満があった方、初学者の参考になれば幸いです。