Multiple subscriptions in connect stopped working after upgrade

Describe the bug After upgrading to

{
    "aws-amplify": "^2.2.2",
    "aws-amplify-vue": "^1.1.2",
}

My multiple-subscriptions stopped working with error: Duplicated operation

I’m using a subscription technique described here: https://github.com/aws-amplify/amplify-js/issues/2713

To Reproduce Use amplify connect in a template:

  <amplify-connect :query="listVideosQuery"
       :subscription="onCreateOrDeleteVideoSubscription"
  >
   ...
</amplify-connect>

add this computed property:

    onCreateOrDeleteVideoSubscription () {
      const onCreateOrDeleteVideo = `subscription onCreateOrDeleteVideo {
        onCreateVideo {
          id
          title
        }
        onDeleteVideo {
          id
        }        
      }
      `
      return this.$Amplify.graphqlOperation( onCreateOrDeleteVideo )
    }

When inspecting the browser console, this error is showing:

[WARN] 41:26.549 Connect 
{…}
error: {…}
errors: (1) […]
0: Object { message: "Connection failed: {\"errors\":[{\"errorType\":\"DuplicatedOperationError\",\"message\":\"Duplicated operation with id 981f33b3-
....

In schema.graphql:

type Video @model @searchable
  @key(fields: ["id"])
  @key(fields: ["type","title"], name: "byTitle", queryField: "listVideoByTitle")
  @key(fields: ["type", "slug"], name: "bySlug", queryField: "listVideoBySlug")
  {
  id: ID!
  awsId: ID!
  title: String!
  slug: String!
  createdAt: AWSDateTime
  posterTime: Float!
  published: Boolean!
  fileName: String!
  category: Category @connection(name: "CategoryVideos", sortField: "title")
  chapters: [Chapter] @connection(name: "VideoChapters", sortField: "start", limit: 30)
  type: String!
}

If I remove either onCreateVideo or onDeleteVideo leaving only a single subscription, the warning goes away.

Expected behavior The code should work just as before the upgrade

Screenshots If applicable, add screenshots to help explain your problem.

Environment

  System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-7800X CPU @ 3.50GHz
    Memory: 761.35 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v10.17.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.2
    Safari: 13.0.4
  npmPackages:
    @mdi/font: ^4.8.95 => 4.8.95 
    @vue/cli-plugin-babel: ^4.1.2 => 4.1.2 
    @vue/cli-plugin-eslint: ^4.1.2 => 4.1.2 
    @vue/cli-plugin-pwa: ^4.1.2 => 4.1.2 
    @vue/cli-plugin-router: ^4.1.2 => 4.1.2 
    @vue/cli-plugin-vuex: ^4.1.2 => 4.1.2 
    @vue/cli-service: ^4.1.2 => 4.1.2 
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0 
    aws-amplify: ^2.2.2 => 2.2.2 
    aws-amplify-vue: ^1.1.2 => 1.1.2 
    babel-eslint: ^10.0.3 => 10.0.3 
    core-js: ^3.6.4 => 3.6.4 
    eslint: ^5.16.0 => 5.16.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    node-timecodes: ^2.5.0 => 2.5.0 
    register-service-worker: ^1.6.2 => 1.6.2 
    sass: ^1.25.0 => 1.25.0 
    sass-loader: ^8.0.2 => 8.0.2 
    stylus-loader: ^3.0.2 => 3.0.2 
    uuid: ^3.4.0 => 3.4.0 
    vue: ^2.6.11 => 2.6.11 
    vue-cli-plugin-vuetify: ^2.0.3 => 2.0.3 
    vue-router: ^3.1.5 => 3.1.5 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vuetify: ^2.2.8 => 2.2.8 
    vuetify-loader: ^1.3.0 => 1.4.3 
    vuex: ^3.0.1 => 3.1.2 
  npmGlobalPackages:
    @aws-amplify/cli: 4.12.0
    npm: 6.11.3
    yarn: 1.19.1

https://github.com/aws-amplify/amplify-js/issues/2713

[my-name-is-nheo]

Is there a way I can know the status of this issue? Using PubSub from an older version on aws-amplify 3.3.18. However updating to the latest version stops all my AWS services on the mobile end. Tried reconfiguring Amplify by adding my IAM credentials. So far, no success.

[amhinson]

As @visusnet pointed out, the new AppSync real-time endpoints do not support having multiple root fields in the subscription for the Connect component. However, there does appear to be a few workarounds noted in this issue. My suggestion would just be to manage each subscription directly with the API category (docs) or go with a custom solution provided here.

With that said, we are continuing build out our new UI Components, which provide a much more consistent experience across the major JavaScript frameworks. The Connect component is not supported there yet, but it is on the roadmap. I am marking this as a “feature request” for now to be sure this is taken into account in the future.