notifyOnNetworkStatusChange 究竟做了什么？

Question

我遇到了一个问题，在执行 refetch 时 loading 属性不正确。我在某处读到 notifyOnNetworkStatusChange 到 true 会解决这个问题。

但是我们注意到在使用这个属性之后我们有一些用例，我们最终陷入无限 refetch 循环并且没有很好的解释。

有人可以准确解释 notifyOnNetworkStatusChange 在 useQuery 挂钩上到底做了什么吗？什么时候应该使用它，是否有特定的 fetch-policy 需要与它结合使用？

Answer 1

好像notifyOnNetworkStatusChange: true是让我们检查你的useQuery的当前networkStatus，是一个数字。然后基于 networkStatus 变量，我们可以选择我们自己的策略 render 当前组件。

重要提示： loading 将是 undefined 没有 notifyOnNetworkStatusChange: true

以下代码来自 https://www.apollographql.com/docs/react/data/queries/#inspecting-loading-states

import { NetworkStatus } from '@apollo/client';

function DogPhoto({ breed }) {
  const { loading, error, data, refetch, networkStatus } = useQuery(
    GET_DOG_PHOTO,
    {
      variables: { breed },
      notifyOnNetworkStatusChange: true,
    },
  );

  if (networkStatus === NetworkStatus.refetch) return 'Refetching!';
  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <div>
      <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
      <button onClick={() => refetch()}>Refetch!</button>
    </div>
  );
}

如果您注意到代码

if (networkStatus === NetworkStatus.refetch) return 'Refetching!'，这意味着当 refetch() 被调用时，DogPhoto 组件将变为 Retching! 直到它完成。

下面link解释了networkstatus中每个数字的含义。

https://github.com/apollographql/apollo-client/blob/master/src/core/networkStatus.ts#L4

用于反映您useQuery的当前状态。然后根据状态，如果事情失败了，你可以对它采取进一步的行动，但我相信你总是可以在没有它的情况下创建自己的解决方案。

notifyOnNetworkStatusChange 究竟做了什么？

What does notifyOnNetworkStatusChange do exactly?

apollo-client