1

我@apollo/react-hooks每 500 万次从 GraphQL 查询中轮询一次数据。

我的查询接受参数列表，包括当前日期时间，如下所示：

const MyComponent = ({ query }) => {
    const {loading, error, data} = useQuery(query, {
      variables: {
          variable1: valVariable1,
          variable2: valVariable2,
          variable3: valVariable3,
          currentLocalDateTime: getCurrentLocalDateTime(),
      },
      pollInterval: 300000
    });
    if (loading) {
      return <h1>Loading...</h1>;
    };
    if (error) {
      return <h1>Error! {JSON.stringify(error)}</h1>;
    }
    return <div> Data: {JSON.stringify(data)}</div>;
});

假设我在“2020-03-06 08h:00mn”调用我的第一个查询，使用pollInterval上面定义的，我的第二个查询将在 08h:05mn 调用，第三个查询将在 08h:10mn 调用”

预期的行为

当我在 1200 万之后查看 Chrome 网络上的查询时，我会看到 3 个具有不同时间变量值的查询：

  • 查询 1：variables.currentLocalDateTime === "2020-03-06 08h:00mn"

  • 查询 2： variables.currentLocalDateTime === "2020-03-06 08h:05mn"

  • 查询 3：variables.currentLocalDateTime === "2020-03-06 08h:10mn"

当前行为

  • 查询 1：variables.currentLocalDateTime === "2020-03-06 08h:00mn"
  • 查询 2： variables.currentLocalDateTime === "2020-03-06 08h:00mn"
  • 查询 3： variables.currentLocalDateTime === "2020-03-06 08h:00mn"

我试图做的

  • 我试图等待onCompleted事件useQuery，然后更新变量，但它没有帮助，因为它只会被第一次调用（我猜当新数据进来但我不确定）。

  • 我尝试使用useLazyQuery而不是，useQuery然后使用 asetInterval()来更新我的变量，然后再次调用查询，如下所示：

const MyComponent = ({ query }) => {
    const [getMyData, { loading, data }] = useLazyQuery(query);
    if (loading) {
        return <h1>Loading...</h1>;
    };
    if (error) {
        return <h1>Error! {JSON.stringify(error)}</h1>;
    }
    // Remove the previous created interval then:
    setInterval(() => {
        const newVariables = {...variables};
        newVariables['currentLocalDateTime'] = getCurrentLocalDateTime();
        getMyData({variables: newVariables});
      }, 300000);

    return <div> Data: {JSON.stringify(data)}</div>;
}

但似乎我正在以“肮脏的方式”使用 setInterval 重新实现默认的 Apollo 轮询。所以我不确定这是否是一个解决方案。

更新 React Apollo 轮询变量的任何反馈或经验？

4

1 回答 1

1

似乎问题仍然存在 https://github.com/apollographql/apollo-client/pull/4974

我发现了这个线程，其中一个用户评论我们可以使用stopPolling并startPolling(POLL_INTERVAL)更新查询变量，它对我有用： https ://github.com/apollographql/apollo-client/issues/3053#issuecomment-503490308

这篇文章也很有帮助：http ://www.petecorey.com/blog/2019/09/23/apollo-quirks-polling-after-refetching-with-new-variables/

这是一个例子：

const POLL_INTERVAL = 10_000;

const { refetch, stopPolling, startPolling } = useQuery(
  MY_QUERY,
  {
    fetchPolicy: "network-only",
    pollInterval: POLL_INTERVAL,
    client
  }
);

const onFilterChange = variables => {
  stopPolling();
  refetch({ ...variables });
  startPolling(POLL_INTERVAL);
};
于 2021-02-03T00:50:37.000 回答