Отказаться от подписки в Apollo Client
В моем компоненте у меня есть этот код:
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,
],
},
},
})
}
},
})
}
Проблема в том, что этот компонент будет повторно подписываться при подключении и будет поддерживать подписку, даже если он отключен.
Как я могу отказаться от подписки на свой компонент?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
client.subscribe({ ... }).subscribe({ ... }) вернет экземпляр для вашей подписки, который вы можете использовать для отказа от подписки.
Так что-то вроде:
componentDidMount () {
// Setup subscription listener
// (...)
this.querySubscription = client.subscribe({
// (...)
}).subscribe({
// (...)
})
}
componentWillUnmount () {
// Unsibscribe subscription
this.querySubscription.unsubscribe();
}
Вы можете получить некоторое вдохновение, посмотрев, как react-apollo управляет этой ситуацией смотрит на их кодовую базу.
ПРИМЕЧАНИЕ: Мой лучший совет - использовать компонент Подписка, который будет управлять всем за вас.
К сожалению, компонент подписки также требует некоторых действий по отмене подписки при использовании обратного вызова onSubscriptionData.
@VladislavSorokin Подскажите, как вы отписались от subscribeToMore?
@TheoG На самом деле я этого не делал, во-первых, subscribeToMore в моем случае вообще не обновлял кеш, поэтому сейчас я как бы борюсь с этим. Отвечая на ваш вопрос, они говорят: «Эта функция возвращает обработчик функции отписки, который можно использовать для отказа от подписки позже». хотя я не знаю, как это реализовать, извините apollographql.com/docs/react/api/react-apollo/…
@TheoG вот другие ребята сказали, что subscribeToMore каким-то образом автоматически отписывается, надеюсь, это поможет github.com/bmsantos/apollo-graphql-subscriptions-example/iss ues /…
btw subscribeToMore действительно обновил кеш в моем случае, но это был компонент Query, который не выполнял повторную визуализацию после обновления, поэтому мне удалось исправить это с помощью refetch. Довольно хакерский, но работает! @TheoG
@VladislavSorokin Как вы заставляете работать refetch, ведь размещение его после объекта return в subscribetoMore никогда не будет достигнуто?
@VladislavSorokin Я фактически решил проблему повторного рендеринга, изменив запросы fetchPolicy на "cache-and-network".
Я уже пробовал это, но это не сработало. В итоге я использовал
subscribeToMore, который делает именно то, что я хочу, и отлично работает. Спасибо