101. 同一API callをマージする

⚠️ 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()