# ApolloSubscribeToMore
You can subscribe to more data with the ApolloSubscribeToMore
(or apollo-subscribe-to-more
) component. You can put as many of those as you want inside a <ApolloQuery>
component.
TIP
If the update is related to an existing object (for example, changing the value of a field), updateQuery
is not required as Apollo client will be able to update the cache automatically.
Here is an example:
<template>
<ApolloQuery :query="...">
<ApolloSubscribeToMore
:document="gql => gql`
subscription messageChanged ($channelId: ID!) {
messageAdded (channelId: $channelId) {
type
message {
id
text
}
}
}
`"
:variables="{ channelId }"
:updateQuery="onMessageAdded"
/>
<!-- ... -->
</ApolloQuery>
</template>
<script>
export default {
data () {
return {
channel: 'general',
}
},
methods: {
onMessageAdded (previousResult, { subscriptionData }) {
// The previous result is immutable
const newResult = {
messages: [...previousResult.messages],
}
// Add the question to the list
newResult.messages.push(subscriptionData.data.messageAdded)
return newResult
},
},
}
</script>
See ApolloQuery to learn how to write GraphQL queries in the template.
See API Reference for all the available options.
# Examples of updateQuery
Add a new item to the cache:
methods: {
onMessageAdded (previousResult, { subscriptionData }) {
// The previous result is immutable
const newResult = {
messages: [...previousResult.messages],
}
// Add the question to the list
newResult.messages.push(subscriptionData.data.messageAdded)
return newResult
}
}
Remove an item from the cache:
methods: {
onMessageAdded (previousResult, { subscriptionData }) {
const removedMessage = subscriptionData.data.messageRemoved
const index = previousResult.messages.findIndex(
m => m.id === removedMessage.id
)
if (index === -1) return previousResult
// The previous result is immutable
const newResult = {
messages: [...previousResult.messages],
}
// Remove the question from the list
newResult.messages.splice(index, 1)
return newResult
}
}