美文网首页
React- admin优化

React- admin优化

作者: 落幕12 | 来源:发表于2023-02-26 10:45 被阅读0次

当list页面重新获取到焦点时会自动调list接口

产生原因: react- admin使用react-query来调取,缓存并更新数据。

  • 查询认为缓存数据过时
  • 在以下情况下,陈旧查询会在后台自动重新获取:
    • 查询挂载的新实例
    • 窗口重新聚焦
    • 网络重新连接
    • 查询可选择配置为重新获取间隔
  • 当前页面中不再使用的查询结果被标记为“不活跃”,并保留在缓存中,以防以后再次使用。
  • 默认情况下,“不活跃”查询是5分钟后收集的垃圾。
  • 失败的查询会静默重试3次,在捕获并向用户界面显示错误之前,会出现指数回退延迟。
  • 默认情况下,查询结果在结构上共享,以检测数据是否实际更改,如果没有,数据引用保持不变,以更好地帮助useMemo和useCallback的值稳定。

如果您想覆盖react-query默认查询和突变默认选项,或使用特定的客户端或突变缓存,您可以创建自己的QueryClient实例并将其传递给<Admin queryClient>道具:

import { Admin } from 'react-admin';
import { QueryClient } from 'react-query';

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            retry: false,
            structuralSharing: false,
        },
        mutations: {
            retryDelay: 10000,
        },
    },
});

const App = () => (
    <Admin queryClient={queryClient} dataProvider={...}>
        ...
    </Admin>
);

要知道您可以将哪些选项传递给QueryClient构造函数,请查看react查询文档以及查询选项突变选项部分。

反应管理员开发人员经常覆盖的常见设置是:

import { QueryClient } from 'react-query';

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            /**
             * The time in milliseconds after data is considered stale.
             * If set to `Infinity`, the data will never be considered stale.
             */
            staleTime: 10000, // 这个要慎重,设置了info接口容易不被调用
            /**
             * If `false`, failed queries will not retry by default.
             * If `true`, failed queries will retry infinitely., failureCount: num
             * If set to an integer number, e.g. 3, failed queries will retry until the failed query count meets that number.
             * If set to a function `(failureCount, error) => boolean` failed queries will retry until the function returns false.
             */
            retry: false,
            /**
             * If set to `true`, the query will refetch on window focus if the data is stale.
             * If set to `false`, the query will not refetch on window focus.
             * If set to `'always'`, the query will always refetch on window focus.
             * If set to a function, the function will be executed with the latest data and query to compute the value.
             * Defaults to `true`.
             */
            refetchOnWindowFocus: false,
        },
    },
});

相关文章

网友评论

      本文标题:React- admin优化

      本文链接:https://www.haomeiwen.com/subject/yiybtdtx.html