notifyOnNetworkStatusChange 究竟做了什么？答案

【问题标题】：What does notifyOnNetworkStatusChange do exactly?notifyOnNetworkStatusChange 究竟做了什么？
【发布时间】：2021-06-04 14:01:30
【问题描述】：

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

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

有人能准确解释一下 notifyOnNetworkStatusChange 在 useQuery 钩子上到底做了什么吗？什么时候应该使用它，有没有特定的fetch-policy 需要配合使用？

【问题讨论】：

标签： apollo-client

【解决方案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!，直到完成。

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

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

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

【讨论】：