Network request is dropped after the first event is emitted on the Subscription over HTTP SSE

[adrtivv]

Describe the bug

When the graphql subscriptions are set up using SSE(server sent events) over HTTP, the network request is dropped after the very first event is emitted to the subscription.

Your Example Website or App

https://stackblitz.com/edit/stackblitz-starters-bruyk5?file=yoga.js

Steps to Reproduce the Bug or Issue

1. Go to https://stackblitz.com/edit/stackblitz-starters-bruyk5?file=yoga.js
2. Run the command npm run dev in the terminal.
3. Open the graphiql playground. A query and a subscription graphql queries are prepared in two seperate graphiql tabs.
4. Open the browser network tab to monitor the graphql requests.
5. In the subscription graphiql tab, subscribe to the event randomNumber. A loading indicator will appear, it means you have subscribed to the event.
6. Head to the query graphiql tab and run the graphql query. Remember the random number generated, then run this query a few more times.
7. Head back to the subscription graphiql tab and check the response, it is empty.
8. Check the network tab for the subscription network request. It has been dropped with one event in it's response which is the very first random number generated when we executed the randomNumber query.

Expected behavior

Ideally, the subscription tab should not have dropped the network request for randomNumber subscription event, and should have accumulated all the random numbers generated because of the randomNumber query in it's response block.

Screenshots or Videos

Subscribed to randomNumber event, notice the loading indicator in the response tab:-

Ran the randomNumber query:-

Subscription is aborted, loading indicator no longer found in the response tab.

Subscription network request is dropped with the first event emitted "data":{"randomNumber":4}, the first event emitted is not present in the subscription response tab.

Platform

• OS: Fedora Linux 40
• NodeJS: 20.12.2
• @graphql-yoga/5.3.1

Additional context

No response

[n1ru4l]

This is a limitation of GraphiQL, when you switch the tab/execute an operation in another tab it cancels the pending requests.