如何配置@nuxt/apollo实现subscribeToMore多订阅功能

报错根因 #

@nuxtjs/apollo v4.0.1-rc.x版本对订阅配置的格式要求如下：单条subscribeToMore可以直接传入对象，多条订阅时必须将$subscribeToMore的属性值改为数组格式，每个订阅作为数组的独立元素。如果仍使用对象格式存放多个订阅配置，框架会把后续订阅的配置误识别为未解析的GraphQL查询字符串，触发对应报错。

正确配置代码 #

// 组件顶部必须导入gql标签，不可遗漏
import gql from 'graphql-tag'

export default {
  apollo: {
    items: {
      // 所有订阅统一放到数组中，单条/多条都兼容
      $subscribeToMore: [
        // 第一条订阅：agent变更通知
        {
          document: gql`
           subscription($Group: String!){
             agents(Group: $Group){
               _id
               name
              }
            } 
          `,
          variables () {
            return {
              Group: Object.keys(this.$auth.user.app_access)[0],
            }
          },
          updateQuery: (previousResult, { subscriptionData }) => {
            console.log(subscriptionData);
            // 建议根据业务做数据合并，不要直接全量替换原有结果
            return {
              ...previousResult,
              items: subscriptionData.data.agents
            }
          }
        },
        // 第二条订阅：新增其他业务订阅，按相同格式往后追加即可
        {
          document: gql`
           subscription($orgId: String!){
             orgStatusChange(orgId: $orgId){
               id
               status
              }
            }
          `,
          variables() {
            return {
              orgId: this.$auth.user.orgId
            }
          },
          updateQuery: (previousResult, { subscriptionData }) => {
            // 对应业务的更新逻辑
            console.log('组织状态变更', subscriptionData)
            return previousResult
          }
        }
      ],
      // 原有items的基础查询配置保持不变
      query: gql`
        query getAgents($Group: String!){
          agents(Group: $Group){
            _id
            name
          }
        }
      `,
      variables() {
        return {
          Group: Object.keys(this.$auth.user.app_access)[0],
        }
      }
    }
  }
}

注意事项 #

• 所有订阅的document字段必须使用gql标签包裹，不可直接传入字符串格式的查询语句
• 不同订阅的updateQuery逻辑独立编写，优先做增量数据合并，避免直接全量替换原有查询结果导致关联数据丢失
• 每个用到gql标签的组件顶部必须正确导入graphql-tag依赖

内容的提问来源于stack exchange，提问作者Manaweb