React hook SWR with infinite scroll
Published in
Feb 20, 2021
最近發現 Dcard 投 intern 只要在 3/10 前完成作業，就可以抽咖啡，雖然應該很難應徵上，但我想抽咖啡，所以就開始寫看看前端加後端的作業：）但這篇只有單純記錄一下我寫前端時用 next.js 加 swr 去接某個 API 時遇到的有趣問題～
Dcard 前端大概的題目是接某個 API 然後做成 infinite scroll 的方式顯示，雖然題目寫用 react.js 但 next.js 應該也是可以的吧（？於是使用了 next.js 用了 swr 這個超香的工具，結果發現了可愛的 API 能查詢的功能好少，看來看去去只能用 ?$skip 跟 ?$top 也就是跳過前幾則跟最上面幾則來做。
這邊先說明一下，swr 這個 data fetching tool 比較適合在 pagination 這種資料，或是像 jsonplaceholder 有提供 page 這個功能可以使用：
curl https://jsonplaceholder.typicode.com/posts?_page=2&_limit=5所以大概 google 一下，好像比較沒有人遇到 API 不提供 page 這類型的功能，並且直接使用人家寫好的 infinite-scroll 的元件。所以就想說發一篇，順便記錄一下～
做法其實也很簡單，當 google 不到解答，就直接看官方內容：
主要使用方式是 useSWRInfinite 搭配 getKey 的 function，並且透過 setSize 去呼叫。
有趣的地方就是他有一個 previousPageData 的參數欸！所以就可以在原先的 api 沒有提供類似 page 的 query method 時，可以利用 swr 來取得資料。
於是改寫了一下他的 getKey：
然後利用現成的 infinite scroll 套件：
結果：
以上簡短廢文：）希望可以抽到咖啡嘻嘻
