Playground is not working

[Tyrese-FullStackGenius]

New Issue Checklist

✅ I am not disclosing a vulnerability.
✅ I am not just asking a question.
✅ I have searched through existing issues.
✅ I can reproduce the issue with the latest version of Parse Server.

Issue Description

The graphql playground is not working due to the following error.
Uncaught SyntaxError: Unexpected string (at playground:7:41)

[parse-github-assistant]

Thanks for opening this issue!

• 🚀 You can help us to fix this issue faster by opening a pull request with a failing test. See our Contribution Guide for how to make a pull request, or read our New Contributor's Guide if this is your first time contributing.

[Moumouls]

@Tyrese-FullStackGenius do you still have the issue on the last version or parse-server ? what is your version ?

[markuzzi]

I still have the Bug:

Describe the bug
When opening /playground, Parse Server generates incorrect HTML/JS for the Apollo Sandbox embed.
The strings for initialEndpoint, X-Parse-Application-Id, and X-Parse-Master-Key are double-quoted (""/graphql"", ""appid"", ""masterkey"").
This prevents the Playground from working correctly in the browser.

To Reproduce

1. Start Parse Server 8.2.4 with PARSE_SERVER_MOUNT_PLAYGROUND=true.
2. Open http://localhost:1337/playground in a browser.
3. Inspect the page source.

Actual HTML snippet (excerpt):

new window.EmbeddedSandbox({
  target: "#sandbox",
  endpointIsEditable: false,
  initialEndpoint: ""/graphql"",
  handleRequest: (endpointUrl, options) => {
    return fetch(endpointUrl, {
      ...options,
      headers: {
        ...options.headers,
        'X-Parse-Application-Id': ""yourappid"",
        'X-Parse-Master-Key': ""yourmasterkey"",
      },
    })
  },
});

Expected HTML snippet

initialEndpoint: "/graphql",
headers: {
  "X-Parse-Application-Id": "yourappid",
  "X-Parse-Master-Key": "yourmasterkey"
}

Root Cause
In ParseGraphQLServer.js (and related Playground code), values like graphQLPath, appId, and masterKey are wrapped with JSON.stringify before being interpolated into the HTML template.
Since JSON.stringify("foo") already returns "foo" (with quotes), the template ends up with ""foo"".

Environment

• Parse Server: 8.2.4 (Docker image parseplatform/parse-server:8.2.4)
• Database: PostgreSQL + PostGIS
• Node.js: bundled with official image
• Reproducible locally with Docker Compose

Proposed fix
Remove the JSON.stringify for plain strings in the Playground HTML template:

- initialEndpoint: "${JSON.stringify(this.config.graphQLPath)}",
+ initialEndpoint: "${this.config.graphQLPath}",

The same should be applied to appId and masterKey.

[Moumouls]

Hi @markuzzi a Pr is going to be merged here see: #9858