ApolloSubscribeToMore

您可以使用 ApolloSubscribeToMore（或 apollo-subscribe-to-more）组件订阅更多数据。您可以在 <ApolloQuery> 组件中放置任意数量的这些组件。

提示

如果更新与现有对象相关（例如，更改字段的值），则不需要 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 }) {
      // The previous result is immutable
      const newResult = {
        ...previousResult,
        messages: [
          ...previousResult.messages,
          // Add the question to the list
          subscriptionData.data.messageAdded,
        ],
      }
      return newResult
    },
  },
}
</script>

请参阅 ApolloQuery 了解如何在模板中编写 GraphQL 查询。

请参阅 API 参考 以了解所有可用选项。

updateQuery 的示例

将新项目添加到缓存

methods: {
  onMessageAdded (previousResult, { subscriptionData }) {
    // The previous result is immutable
    const newResult = {
      ...previousResult,
      messages: [
        ...previousResult.messages,
        // Add the question to the list
        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

    // The previous result is immutable
    const newResult = {
      ...previousResult,
      messages: [...previousResult.messages],
    }
    // Remove the question from the list
    newResult.messages.splice(index, 1)
    return newResult
  }
}