使用 TansTack 的 infinite Queries 與 TanStack Virtual 製作 grid 排列的虛擬滾動讀取

最近遇到一個需求，UI 為 grid 排列的格狀列表，每個物件可以透過 api 分頁得到。 所以初步分析： 需要根據螢幕斷點，渲染一列不同行數的 grid 需要與 api 進行分頁讀取，每次傳送 page, page_size 列表最大值會非常多，預防 dom 太多造成畫面卡頓，需要使用虛擬滾動 因最近專案多有引入 TansTack ，分頁讀取的部分會用 infinite Queries 製作，虛擬滾動的做法有很多種，比較常見是 react-window + react-windo...