使用 apollo 客户端如何设置突变 refetchQueries 的加载状态？答案

【问题标题】：With apollo client how do you set loading status on mutation refetchQueries?使用 apollo 客户端如何设置突变 refetchQueries 的加载状态？
【发布时间】：2017-06-21 02:24:50
【问题描述】：

所以我正在使用 apollo 客户端将突变添加到对象列表中。假设我有一个活动，我正在添加参与者，并且我正在使用 refetchQueries 在详细信息屏幕上与参与者一起获取刷新的活动。不幸的是，在此重新获取期间我没有获得data.loading == true 状态，这使得用户很可能会不断重复点击该加入参与者按钮。

<Button styleName="dark full-width" onPress={()=> {
            this.props.joinEvent({
                variables: { eventId: Event.id, userId: user.id },
                refetchQueries: ['getEvent'],
              });
              // how do I trigger the data.loading = true like it does during the initial fetch?
          }
        }>

【问题讨论】：

标签： react-apollo apollo-client

【解决方案1】：

使用awaitRefetchQueries:true，它将等到重新获取查询解决 awaitRefetchQuery

【讨论】：

【解决方案2】：

Apollo React 文档在这方面做得不是很好，但有一个 open issue 可以改进它。

您将希望使用data.networkStatus，而不是查看data.loading 属性。在重新获取 (networkStatus values) 期间，它将更改为 4。

但是，为了更新此值，您还需要在查询选项中将 notifyOnNetworkStatusChange 选项设置为 true。

使用 React graphql 高阶组件，如下所示：

var myQuery = gql`
    query MyQuery {
        ...
    }
`;

var myComponentWithData = graphql(myQuery, {
        options: {
            notifyOnNetworkStatusChange: true
        }
    }
)(MyComponent);

【讨论】：

另外，我刚刚注意到，当您为notifyOnNetworkStatusChange: true 添加选项时，data.loading 属性也会在重新获取时更新。