使用 react-apollo 重新获取查询：为什么 `loading` 不正确？

Question

我正在尝试使用 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()}` } 作为负载的响应之前延迟 500 毫秒。当我单击按钮时，我希望看到 Loading...，但组件仍然显示 Hello [date] 并在半秒后重新呈现。

根据this，networkStatus 应为 4 (refetch)，因此 loading 应为真。我的期望错了吗？或者 React Apollo 文档中没有提到关于缓存的事情？

我使用的项目模板使用SSR，所以初始查询发生在服务器上；只有重新获取发生在浏览器中 - 如果这会有所作为的话。

Answer 1

我认为您需要在查询选项中指定 notifyOnNetworkStatusChange: true（默认为 false）。

使用 react-apollo 重新获取查询：为什么 `loading` 不正确？

refetching a query with react-apollo: why is `loading` not true?

reactjs

graphql

apollo

react-apollo

apollo-client