如何每 X 秒刷新一次 React-Admin 列表數據？

Question

緩存文檔提到我可以向數據提供者添加一個代理，以便我的響應被緩存 X 秒，而不是 React-Admin 在每次頁面更改時刷新它們。 但是，對於我的用例（一個股票交易應用程序），我想每 1 秒從我的 API 獲取我的列表視圖的新數據。 我原本希望通過使用上述緩存方法來做到這一點，但看起來如果用戶在頁面上時緩存過期，頁面將不會自動刷新。

我怎樣才能讓我的 React-Admin 列表視圖每 X 秒刷新一次，或者在緩存到期時自動刷新？

Answer 1

要定期更新列表視圖，您可以使用：來自 React-Admin 的useRecursiveTimeout() useRefresh()來自此處的 useRecursiveTimeout()：
https://www.aaron-powell.com/posts/2019-09-23-recursive-settimeout-with-react-hooks/

import React, { useEffect, useRef } from 'react';
import { List, useRefresh } from 'react-admin';

function useRecursiveTimeout(callback, delay) { 
      const savedCallback = useRef(callback)

      useEffect(() => {
        savedCallback.current = callback  
      }, [callback])

      useEffect(() => { 
        let id    
        function tick() {
          const ret = savedCallback.current()

          if (ret instanceof Promise) {
            ret.then(() => {
              if (delay !== null) {
                id = setTimeout(tick, delay)
              }
            })
          } else {
            if (delay !== null) {
              id = setTimeout(tick, delay)
            }
          }
        }
        if (delay !== null) {
          id = setTimeout(tick, delay)
          return () => id && clearTimeout(id)
        }
      }, [delay])
    }

    const MyList = (props) => {
      const refresh = useRefresh()
      useRecursiveTimeout(() => refresh(), 1000) 

      return (
        <List>
        ...
        </List>
      )
    }    

Answer 2

使用 React Admin v.4+ List 組件使用react-query而不是 Redux，您可以像那樣傳遞 queryOptions

<List
  queryOptions={{ refetchInterval: 1000 }}
/>