时间戳

首页 > 解决方案 > 使用轮询间隔检测来自 Apollo useQuery 挂钩的数据更改

reactjs - 使用轮询间隔检测来自 Apollo useQuery 挂钩的数据更改

问题描述

useQuery()我有一个使用 Apollo 客户端使用钩子从后端获取数据的 React 应用程序。每当后端数据发生变化时，我想在屏幕上显示一个刷新按钮。为此，我在 graphql 查询中使用轮询间隔每 5 分钟获取一次数据。

const { data, loading, error, refetch, previousData } = useQuery(QUERY, {
            client: apolloClient,
            pollInterval: 300000 // 5 minutes
        });

在我的反应应用程序中，我使用 useEffect() 挂钩来设置本地状态以显示 refreshBanner

useEffect(() => {
        if (data?.list !== previousData?.list) {
            setShowRefreshBanner(true);
        }
    }, [data, previousData]);

由于始终会重新创建数据对象，因此会导致useEffect()多次运行。有没有办法在不依赖数据对象的情况下检测数据是否发生变化。这data.list是一个对象列表，值的变化发生在列表中的对象内部。

标签： reactjsreact-hooksapollo-clientreact-apollouse-effect

解决方案

推荐阅读