这几天在使用 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 也能解决这个问题。