Usability Bugs due to use of deprecated Apollo Graphql Playground

[zackdotcomputer]

Is there an existing issue for this?

• I have searched the existing issues

Current behavior

When using the deprecated Apollo Graphql Playground included in the @nestjs/apollo package on a modern browser, you now get graphical errors which hamper the usability of the playground. Whenever a type hint is shown while editing a call, the hint will never get dismissed because the event it is listening for is no longer sent:

Minimum reproduction code

https://github.com/nestjs/nest/tree/master/sample/12-graphql-schema-first

Steps to reproduce

1. Download the NestJS Graphql sample
2. Set it up and start it
3. Connect to the playground at /graphql
4. Write a query command
5. Observe the type tooltips do not go away

Expected behavior

The type tooltips should go away.

Package version

13.0.2

Graphql version

graphql: 16.10.0
@apollo/server: 4.11.3

NestJS version

11.0.1

Node.js version

22.13.1

In which operating systems have you tested?

• macOS
• Windows
• Linux

Other

I've seen multiple PRs asking for this package to be removed because of its officially deprecated status #3255 #2972, and there is an open PR from 2023 to remove it in favor of the Playground included with the Apollo Server: #2973.

As this has now escalated from the point of being a simple deprecation conversation to a functional bug preventing the tool from working as intended, I think it might merit updating and merging in that PR, even at the cost of a breaking change and the less pleasant Apollo Studio as it exists today. Either that, or swapping the default Apollo plugin over to use GraphiQL.

(For the record - I have confirmed locally that the changes in PR #2973 do resolve this issue. On the latest Apollo studio, this bug is no longer present.)

[pawsaw]

@kamilmysliwiec this is an issue for 3 years now. No prio for this?

[kamilmysliwiec]

The playground has been working fine until now. If type hints are indeed no longer dismissed on modern browsers, we'll very likely switch to GraphiQL playground instead (following what Mercurius uses)

[zackdotcomputer]

Would be very happy with that resolution as well, @kamilmysliwiec. In my testing it seemed like moving onto anything from the past year or so would be a strict improvement and fix this issue.

[arfanliaqat]

I've ran into the same issues as OP, please fix

[kamilmysliwiec]

#3544

[pawsaw]

You are the best @kamilmysliwiec. Thank you so much ❤️

[kamilmysliwiec]

Added in v13.1.0

GraphQLModule.forRoot<ApolloDriverConfig>({
 driver: ApolloDriver,
 graphiql: true,
})

Warning: Note that GraphiQL requires graphql-ws for subscriptions to work https://docs.nestjs.com/graphql/subscriptions#enable-subscriptions-with-apollo-driver

GraphiQL will be enabled by default starting from v14

[SakisTsalk]

does this mean that we should expect subscriptions-transport-ws and @apollo/server-plugin-landing-page-graphql-playground to be removed from the dependencies in v14?