[graphiql] Execute multiple operation simultaneously

[keithcarter5]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

I have a GraphQL subscription running, i.e.

subscription {
  valueXStateChange
}

When I run the subscription, I am getting updates in the results window. However, when I subsequently run a query, the ExecutionContextProvider https://github.com/graphql/graphiql/blob/a1439db5f2867718d2fa73c3ff198539f3a54fa0/packages/graphiql-react/src/execution.tsx#L102-L106 stops the running subscription. Is this the expected behavior?

If so, then should it behave this way if the subscription is running in one tab and the query is executed in another tab?

Expected Behavior

I was expecting the results window to update whenever a subscription notification occurred, regardless of whether the user has previously run a query. If this is the expected behavior, I would expect a tab where subscription notifications are being displayed would continue to update if a query were executed on another tab.

Steps To Reproduce

1.  Get a subscription running.
2.  Generate data changes, causing the results window to display each subscription notification (Next)
2.  Execute a query.
3.  Generate another data change and observe the results window does not display the subscription notification, even though the subscription's `next` function is called.

Module pattern

• [ ] graphiql-umd
• [ ] graphiql-esm
• [ ] graphiql-commonjs

Environment

- GraphiQL Version:  2.0.13
- OS: Windows 10
- Browser: chrome
- Bundler:
- `react` Version: 18.2.0
- `graphql` Version: 16.6.0

Anything else?

No response

[thomasheyenbrock]

Hey @keithcarter5 👋 Thanks for pointing this out! Currently this is expected behavior, only one operation can be executed at a given time. GraphiQL can't continuously execute a subscription in one tab and a query in a different tab. (In fact, it also can't execute two queries in two tabs at the same time.)

While it's probably not a big pain-point for queries, subscriptions are a valid use-case where this behavior would make sense. I'm re-labelling this as enhancement.

[rootkea]

I initially thought you were talking about browser tabs and I was unable to reproduce this at my end. It works perfectly with 2 tabs of a browser - one setting up the subscription and another one executing the query. The subscription browser tab shows the updates as expected.

While for GraphiQL tabs, a subscription gets stopped automatically just by clicking on the title of the GraphiQL tab (same or another one) or even by opening a new GraphiQL tab.

[Sytten]

This basically makes it unusable for subscriptions, especially moving from graphql-playground...