react-apollo loading 一直为 true bug 的一个临时解决办法

这几天在使用 graphql 重构正在写的一个后台管理程序,api 方面原来用的是 grpc ,前端用了 react+redux+redux-observable 。因为从 api 服务端到管理端全部是自己一个人来写的,使用 grpc 就显的略繁琐,就尝试使用 graphql 来重构,前端的 client 就使用了 apollo。

原本写的一直很舒服,后来无意中发现使用 client.resetStore() 清空状态并退出到登录界面然后重新登录时组件的 loading 状态一直是 true,而且用调试工具观察发现 data 也是空的。

github 上有个 issue 就是关于这个的 https://github.com/apollographql/apollo-client/issues/1186 。讨论的次数很多,各种解决方案,但在我这里都行不通,issue 也还是 open 状态。

后来研究了一个晚上试了各种办法也没有结果,第二天早上来公司后才临时解决的。

解决方法

首先尝试过各种情况后发现如果 resetStore 后再登录返回的内容跟登录前完全一样就会导致这个 bug 。所以我就在服务端加入了一个服务器当前时间的查询。

query adminInfoQuery {
  admin {
    id
    username
    realname
    extendsPermission
  }
  serverInfo {
    now
  }
}

其中 serverInfo -> now 就是当前时间,这样在登录后重新登录返回的 data 就是不一样的,然后就能正常 loading = false 了。

解决方法2

2017.08.22 更新

export default graphql(query, {
  options: {
    notifyOnNetworkStatusChange: true,
  },
})(Component);

在查询的 options 参数里面加入 notifyOnNetworkStatusChange 也能解决这个问题。

你可能感兴趣的:(react-apollo loading 一直为 true bug 的一个临时解决办法)