GraphQL IDEs display page source code when visited in browser

[baspeeters]

API Platform version(s) affected: v3.1.13

Description
With default configuration, the GraphiQL IDE was always rendered in the browser on route /graphql while that same endpoint supported GraphQL calls. Since yesterday, visiting this in the browser does not render the IDE anymore, but shows the page's source code (the response has content-type: application/json).

The same issue occurs when visiting /graphql/graphiql and /graphql/graphql_playground.

How to reproduce
This happened after rebuilding and restarting the docker compose stack we are using. Rewinding to commits in a time that the issue was not happening kept producing the same issue.

Possible Solution
Workaround, move IDEs to separate routes:

#config/routes.yaml

graphql_playground:
    path: /docs/graphql_playground
    controller: api_platform.graphql.action.graphql_playground

graphiql:
    path: /docs/graphiql
    controller: api_platform.graphql.action.graphiql

Additional Context

[soyuka]

Fixed. GraphiQL/Playground IDE rendering corrected in 4.3.x; PR #8209 (commit ef40bcd) modernized GraphiQL to v5 via esm.sh CDN, and the action sets the text/html Content-Type explicitly in src/GraphQl/Action/GraphiQlAction.php. Please reopen if reproducible on 4.3.x.