101. 同一API callをマージする
シェアしよう
少し工夫が必要 - accepted / - tried
⚠️ This questions is updated on Oct 22, 2022 which has breaking changes on test specs. Thanks to @Qzlt4LK.
getAPI()
でAPIを叩けるとしよう。
const getAPI = (path, config) => { ... }
const list1 = await getAPI('/list', { keyword: 'bfe'})
const list2 = await getAPI('/list', { keyword: 'dev'})
上記のコードがうまく動いていたが、UIがすごく複雑になり、短時間に同じAPIは何度も呼ばれたことになった。
1000ms以内であれば、同一GET APIコールが同じレスポンスを返す
上記の仮説では、同一のAPIコールを省けるとあなたが考えた。「同一」とは、path
もconfig
もdeeply equalであること。
以下のcreateGetAPIWithMerging(getAPI)
を実装して、キャッシュを入れた。
const getAPIWithMerging = createGetAPIWithMerging(getAPI)
getAPIWithMerging('/list', { keyword: 'bfe'}).then(...)
// 1回目のコール、getAPIが呼ばれる。
getAPIWithMerging('/list', { keyword: 'bfe'}).then(...)
// 2回目は同一コールなので、
// getAPI は呼ばれない
// 1回目のコールにマージされる
getAPIWithMerging('/list', { keyword: 'dev'}).then(...)
// 3回目は違うパラメーターで、getAPIが呼ばれる
// 1000ms後
getAPIWithMerging('/list', {keyword: 'bfe'}).then(...)
// 4回目のコールは1回目と同一であるが、
// 1000ms後なので、getAPIは呼ばれる
メモリーリークにご注意を!
この問題では、キャッシュエントリーを最大5件までに設定してください。つまり:
getAPIWithMerging('/list1', { keyword: 'bfe'}).then(...)
// 1回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
getAPIWithMerging('/list2', { keyword: 'bfe'}).then(...)
// 2回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
getAPIWithMerging('/list3', { keyword: 'bfe'}).then(...)
// 3回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
getAPIWithMerging('/list4', { keyword: 'bfe'}).then(...)
// 4回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
getAPIWithMerging('/list5', { keyword: 'bfe'}).then(...)
// 5回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
getAPIWithMerging('/list6', { keyword: 'bfe'}).then(...)
// 6回目のコール、callAPI()が呼ばれる、キャッシュエントリーが増える
// 1回目のキャッシュは消される
getAPIWithMerging('/list1', { keyword: 'bfe'}).then(...)
// 1回目のコールと同一だが、キャッシュがないので
// 新規キャッシュエントリーが増える
clear()
テストのために、全てのキャッシュをクリアするclear()
を提供してください。
getAPIWithMerging.clearCache()