ApolloSubscribeToMore

你可以使用 ApolloSubscribeToMore(或 apollo-subscribe-to-more)组件订阅更多数据。你可以在一个 <ApolloQuery> 组件中放置任意数量的订阅组件。

TIP

如果更新关联到现有对象(例如更改某个字段的值),则不需要 updateQuery,因为 Apollo 客户端能够自动更新缓存。

这是一个简单的例子:

<template>
  <ApolloQuery :query="...">
    <ApolloSubscribeToMore
      :document="require('../gql/MessageAdded.gql')"
      :variables="{ channel }"
      :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>

更多参见 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
  }
}
上次更新时间: 9/8/2018, 3:53:04 PM