如何每X秒刷新一次React Admin列表数据

Question

缓存文档提到，我可以向数据提供程序添加一个代理，这样我的响应就可以缓存X秒，而不是每次页面更改时React Admin都会刷新它们。然而，对于我的用例(一个股票交易应用程序(，我希望每1秒从我的API为我的listview获取新数据。我本来希望使用上面的缓存方法来实现这一点，但如果用户在页面上时缓存过期，页面就不会自动刷新。

如何使我的React Admin列表视图每X秒刷新一次，或者在缓存到期时自动刷新？

Answer 1

要定期更新列表视图，可以使用React Admin中的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 }}
/>