🐕
TypeScript × Axios リポジトリパターン
概要
リポジトリパターンは、データの操作（作成、削除など）をビジネスロジックから分離します。ビジネスロジック内でAxiosをインスタンス化すると単体テストが難しくなったり、各ファイルにエンドポイントの定義を書いている場合、そのエンドポイントが変わった時に多数のファイルを更新しなければいけません。
リポジトリパターンはそのような問題を解決し、コードの柔軟性・保守性を高めてくれます。
実装
- APIはJSONPlaceholderというサービスを使い、userを取得します
- リポジトリパターンのコードをすぐに動作確認したい場合は、CodeSandboxなどのオンラインエディタを使うと良いです
Repository.ts
RESTful APIのCRUDに合わせてメソッドを定義します。
PutやPatchメソッドが必要な場合は、その都度追加してください。
import axios from 'axios'
const repository = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com'
})
export default (resource: string) => {
return {
index() {
return repository.get(resource)
},
show(id: number) {
return repository.get(`${resource}/${id}`)
},
post(payload: any) {
return repository.post(resource, payload)
},
delete(id: number) {
return repository.delete(`${resource}/${id}`)
}
}
}
UserRepository.ts
UserAPI用のRepositoryを作成します。
import Repository from './Repository'
const resource = 'users'
const repository = Repository(resource)
export default repository
RepositoryFactory.ts
Factoryを作成します。users以外のAPIを定義したい場合は、repositoriesオブジェクトに追加していきます。
import UserRepository from './UserRepository'
interface repositoryObject {
[name: string]: any
}
const repositories: repositoryObject = {
users: UserRepository
}
export const RepositoryFactory = {
get: (name: string) => repositories[name]
}
index.ts
Repositoryを使う側コードです。
import { RepositoryFactory } from './RepositoryFactory'
const userRepository = RepositoryFactory.get('users')
const userResponse = async () => {
const showResponse = await userRepository.show(2)
console.log('show', showResponse)
const indexResponse = await userRepository.index()
console.log('index', indexResponse)
const deleteResponse = await userRepository.delete(1)
console.log('delete', deleteResponse)
}
userResponse()
確認
CodeSandboxを使った場合、右下のコンソールにログが出ていたら通信成功です。
以上です。
参考
Discussion