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

Question

因此，我使用 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?
          }
        }>

Answer 1

Apollo React 文档在这方面做得不是很好，但是 open issue 可以对其进行改进。

与其查看 data.loading 属性，不如使用 data.networkStatus。在重新获取 (networkStatus values) 期间它将更改为 4。

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

使用 React graphql 高阶组件，这看起来像：

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

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

Answer 2

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

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

With apollo client how do you set loading status on mutation refetchQueries?

react-apollo

apollo-client