概述

TanStack Query(前身為 Vue Query)常被稱為網頁應用程式中缺失的資料獲取函式庫,但用更技術性的術語來說,它讓你在網頁應用中獲取、快取、同步和更新伺服器狀態 (server state) 變得輕而易舉。

動機

大多數核心網頁框架並未提供一套全面的資料獲取或更新方法。因此,開發者最終要麼建立封裝了嚴格資料獲取觀點的元框架 (meta-frameworks),要麼發明自己的資料獲取方式。這通常意味著拼湊基於元件的狀態和副作用,或者使用更通用的狀態管理函式庫來儲存並在應用中提供非同步資料。

雖然大多數傳統的狀態管理函式庫非常適合處理客戶端狀態 (client state),但它們在處理非同步或伺服器狀態 (server state) 時表現不佳。這是因為伺服器狀態完全不同。首先,伺服器狀態:

  • 遠端儲存在你可能無法控制或擁有的位置
  • 需要非同步 API 來獲取和更新
  • 意味著共享所有權,可能在你不知情的情況下被他人更改
  • 如果不小心,可能會在你的應用中變得「過時 (out of date)」

一旦你理解了應用中伺服器狀態的本質,隨著開發進展,更多挑戰會接踵而至,例如:

  • 快取 (caching)...(可能是程式設計中最難的事情)
  • 將對相同資料的多個請求去重 (deduping) 為單一請求
  • 在背景更新「過時」的資料
  • 判斷資料何時「過時」
  • 盡快反映資料的更新
  • 效能優化,如分頁 (pagination) 和懶加載資料 (lazy loading data)
  • 管理伺服器狀態的記憶體和垃圾回收 (garbage collection)
  • 透過結構共享 (structural sharing) 記憶化 (memoizing) 查詢結果

如果你對這份清單不感到頭疼,那可能意味著你已經解決了所有伺服器狀態的問題,值得頒個獎。然而,如果你像大多數人一樣,要麼尚未解決所有或大部分這些挑戰,而我們才剛觸及表面!

TanStack Query 無疑是管理伺服器狀態的最佳函式庫之一。它開箱即用,無需配置,並且可以根據應用增長的需求進行客製化。

TanStack Query 讓你能夠戰勝並克服伺服器狀態的棘手挑戰,在它開始控制你之前掌控你的應用資料。

從更技術的角度來看,TanStack Query 可能會:

  • 幫助你從應用中移除許多複雜且難以理解的程式碼,並僅用幾行 TanStack Query 邏輯替代
  • 使你的應用更易維護,更容易新增功能,而無需擔心連接新的伺服器狀態資料來源
  • 通過讓你的應用感覺比以往更快、更靈敏,直接影響終端用戶體驗
  • 可能幫助你節省頻寬並提高記憶體效能

你說服我了,接下來呢?