用react-apollo重新获取查询:为什么`loading`不正确?

时间:2019-03-25 15:45:19

标签: reactjs graphql apollo react-apollo apollo-client

我正在尝试Apollo并使用以下相关代码:

const withQuery = graphql(gql`
query ApolloQuery {
  apolloQuery {
    data
  }
}
`);

export default withQuery(props => {
  const {
    data: { refetch, loading, apolloQuery },
  } = props;

  return (
        <p>
          <Button
            variant="contained"
            color="primary"
            onClick={async () => { await refetch(); }}
          >
            Refresh
          </Button>
          {loading ? 'Loading...' : apolloQuery.data}
        </p>
  );
});

在发送以{ data: `Hello ${new Date()}` }作为有效负载的响应之前,服务器会延迟500ms。当我单击按钮时,我希望看到Loading...,但是该组件仍然显示Hello [date]并在半秒钟后重新渲染。

根据thisnetworkStatus应该为4(refetch),因此loading应该为true。我的期望错了吗?还是React Apollo文档中未提及的有关缓存的事情?

我正在使用的项目模板使用SSR,因此初始查询发生在服务器上;只有重新浏览会在浏览器中发生-即使那会有所作为。

1 个答案:

答案 0 :(得分:1)

您好,您只需要在查询选项中指定notifyOnNetworkStatusChange: true(默认为false)。