TanStack Query：網頁焦點重整，資料永遠保持最新

網頁焦點重整：讓你的資料永遠保持最新鮮

你是否曾經遇到過這種情況：辛辛苦苦在網頁上填寫了一堆資料，結果切換到另一個分頁，回來的時候卻發現資料過時了？或者，你希望你的網頁能夠隨時顯示最新的資訊，而不僅僅是在頁面首次載入時？別擔心，TanStack Query 提供的 refetchOnWindowFocus 功能就能幫你解決這個問題！

事件開頭短結論： refetchOnWindowFocus 這個選項可以讓你的網頁在使用者重新聚焦到網頁時，自動重新獲取最新的資料。預設情況下，這個功能是啟用的，確保你的資料盡可能保持最新。

事件重點：

• 什麼是 refetchOnWindowFocus？ 簡單來說，就是當使用者切換到你的網頁分頁，或者從其他應用程式切換回網頁時，TanStack Query 會自動幫你重新獲取資料。這對於需要頻繁更新的資料，例如股票價格、即時聊天資訊等，非常有用。

• 如何使用？ 在大多數情況下，你不需要做任何額外的設定，因為 refetchOnWindowFocus 預設就是啟用的。但是，如果你想要更精細的控制，可以透過 useQuery 的選項來調整。

• 調整設定：

  • 預設行為： 預設情況下，當頁面重新獲得焦點時，如果資料已經過時，TanStack Query 就會重新抓取資料。
  • 關閉功能： 如果你不想在重新聚焦時重新抓取資料，可以將 refetchOnWindowFocus 設定為 false。
  • 總是重新抓取： 如果想每次都重新抓取資料，可以將 refetchOnWindowFocus 設定為 'always'。
• 進階應用： 在某些特殊情況下，你可能需要更細緻的控制，例如在 React Native 應用程式中使用。TanStack Query 提供了 focusManager.setEventListener 函數，讓你自定義事件處理器，來觸發資料的重新獲取。另外，對於使用 iframe 的網頁，你也需要特別注意 iframe 可能產生的問題，並使用特定的事件處理方式。

• 注意事項： 需要注意的是，某些瀏覽器的內建對話框（例如檔案上傳對話框）也可能觸發焦點重整，這可能會導致一些意想不到的副作用。

個人心得：

我個人非常喜歡 refetchOnWindowFocus 這個功能。它讓我的網頁在使用者體驗上有了顯著的提升。使用者不需要手動刷新頁面，就能夠看到最新的資料，這讓網頁使用起來更像是原生應用程式。

總結：

refetchOnWindowFocus 是一個非常實用的功能，它可以幫助你讓網頁上的資料保持最新鮮。透過簡單的設定，你就可以讓你的網頁更具互動性，並提供更好的使用者體驗。如果你還沒有使用這個功能，不妨試試看，相信你會愛上它的！

參考閱讀

• https://tanstack.com/query/v4/docs/react/guides/window-focus-refetching
• https://stackoverflow.com/questions/70337333/react-query-refetch-on-window-focus-but-not-otherwise
• https://github.com/TanStack/query/discussions/6568
• https://tanstack.com/query/v5/docs/react/guides/window-focus-refetching