# ApolloSubscribeToMore
你可以使用 ApolloSubscribeToMore
(或 apollo-subscribe-to-more
)组件订阅更多数据。你可以在一个 <ApolloQuery>
组件中放置任意数量的订阅组件。
TIP
如果更新关联到现有对象(例如更改某个字段的值),则不需要 updateQuery
,因为 Apollo 客户端能够自动更新缓存。
这是一个简单的例子:
<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 }) {
// 之前的结果是不可变的
const newResult = {
messages: [...previousResult.messages],
}
// 添加问题到列表中
newResult.messages.push(subscriptionData.data.messageAdded)
return newResult
},
},
}
</script>
在 ApolloQuery 查看如何在模板中编写 GraphQL 查询。
在 API 参考 查看所有可用的选项。
# updateQuery
的示例
将新项添加到缓存中:
methods: {
onMessageAdded (previousResult, { subscriptionData }) {
// 之前的结果是不可变的
const newResult = {
messages: [...previousResult.messages],
}
// 添加问题到列表中
newResult.messages.push(subscriptionData.data.messageAdded)
return newResult
}
}
从缓存中删除一项:
methods: {
onMessageAdded (previousResult, { subscriptionData }) {
const removedMessage = subscriptionData.data.messageRemoved
const index = previousResult.messages.findIndex(
m => m.id === removedMessage.id
)
if (index === -1) return previousResult
// 之前的结果是不可变的
const newResult = {
messages: [...previousResult.messages],
}
// 从列表中移除问题
newResult.messages.splice(index, 1)
return newResult
}
}
← ApolloMutation 多客户端 →