Skip to content

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

Open
@zetaraku

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions