<ApolloSubscribeToMore /> triggers subscription every time the UI is re-rendered

[zetaraku]

Describe the bug When using a function as the document props of <ApolloSubscribeToMore />, the component makes a new subscription every time the UI is re-rendered.

To Reproduce First, add logs to your subscription resolver to see the extra subscriptions:

Subscription: {
  countChanged: {
    subscribe: () => {
      console.log(new Date());  // HERE
      return pubsub.asyncIterator([COUNT_CHANGED]);
    },
  },
},

The following example behaves normally:

<ApolloQuery
  :query="require('@/graphql/Count.gql')"
>
  <ApolloSubscribeToMore
    :document="require('@/graphql/CountChanged.gql')"
  />
</ApolloQuery>

But the following example triggers a subscription every time the UI is re-rendered: (change any data used in the template to trigger UI re-render)

• There is no difference whether you use an inline gql tag or require(), so I choose a shorter example.

<ApolloQuery
  :query="gql => require('@/graphql/Count.gql')"
>
  <ApolloSubscribeToMore
    :document="gql => require('@/graphql/CountChanged.gql')"
  />
</ApolloQuery>

And the following example stops receiving events after the first UI re-render:

<ApolloQuery
  :query="gql => require('@/graphql/Count.gql')"
>
  <ApolloSubscribeToMore
    :document="require('@/graphql/CountChanged.gql')"
  />
</ApolloQuery>

Expected behavior The <ApolloSubscribeToMore /> component should send only one subscription and no more when the UI is re-rendered.

Versions vue: 2.6.11 vue-apollo: 3.0.5 apollo-client: 2.6.10

Additional context I found this behavior when seeing this warning on my server: (node:17612) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 COUNT_CHANGED listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit.

[devgig]

Seeing the same error, even after I changed the limit.

 this.httpServer.setMaxListeners(100);

(node:254736) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 USER_ADDED listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit
``