在我的组件中,我有这段代码:
componentDidMount () {
// Setup subscription listener
const { client, match: { params: { groupId } } } = this.props
client.subscribe({
query: HOMEWORK_IN_GROUP_SUBSCRIPTION,
variables: { groupId },
}).subscribe({
next ({ data }) {
const cacheData = client.cache.readQuery({
query: GET_GROUP_QUERY,
variables: { groupId },
})
const homeworkAlreadyExists = cacheData.group.homeworks.find(
homework => homework._id == data.homeworkInGroup._id
)
if (!homeworkAlreadyExists) {
client.cache.writeQuery({
query: GET_GROUP_QUERY,
variables: { groupId },
data: { ...cacheData,
group: { ...cacheData.group,
homeworks: [ ...cacheData.group.homeworks,
data.homeworkInGroup,
],
},
},
})
}
},
})
}
问题是这个组件在挂载时会重新订阅,即使卸载也会保持订阅状态。
如何取消订阅我的组件?
最佳答案
client.subscribe({ ... }).subscribe({ ... })
将为您的订阅返回一个实例,您可以使用该实例取消订阅。
所以像这样:
componentDidMount () {
// Setup subscription listener
// (...)
this.querySubscription = client.subscribe({
// (...)
}).subscribe({
// (...)
})
}
componentWillUnmount () {
// Unsibscribe subscription
this.querySubscription.unsubscribe();
}
您可以通过查看 react-apollo manages this situation 的方式获得一些灵感。查看他们的代码库。
注意: 我最好的建议是使用 Subscription组件,它将为您管理一切。
关于javascript - 在 Apollo Client 中取消订阅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51477002/