Clicking “schema” in the GraphQL Playground crashes the page #25128

johnridesabike · 2020-06-19T16:26:03Z

Description

When on the GraphQL Playground page, clicking the “schema” link on the side crashes the page.

Steps to reproduce

Demo project (just the output of gatsby-cli new): https://github.com/johnridesabike/gatsby-playground-demo

Initialize project

npx gatsby-cli new gatsby-playground-demo
cd gatsby-playground-demo
GATSBY_GRAPHQL_IDE=playground npm run start

Open http://localhost:8000/___graphql (I tested in Safari, Firefox, and Chrome with the same result)
Click “schema” (on the right side)

Expected result

Display the schema (and not crash).

Actual result

Page goes blank. This is logged in the browser console:

SyntaxError: "Syntax Error: Expected Name, found } (131:1)
  129 | 
  130 |   
> 131 | }
      | ^
  132 | 
  133 | input ImageSharpFixedFilterInput {
  134 |   "
    parse parser-graphql.js:1
    parse parser-graphql.js:1
    parse standalone.js:13721
    Hs standalone.js:17145
    Ws standalone.js:17381
    formatWithCursor standalone.js:17397
    DD standalone.js:32917
    format standalone.js:32926
    prettify utils.ts:22
    l createSDL.ts:94
    componentDidMount SDLEditor.tsx:36
    React 2
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
    unstable_runWithPriority scheduler.production.min.js:19
    React 5
react_devtools_backend.js:6:7472

Environment

  System:
    OS: macOS 10.15.5
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    npm: 6.14.5 - /usr/local/bin/npm
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 83.0.4103.106
    Firefox: 77.0.1
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.23.3 => 2.23.3 
    gatsby-image: ^2.4.7 => 2.4.7 
    gatsby-plugin-manifest: ^2.4.11 => 2.4.11 
    gatsby-plugin-offline: ^3.2.9 => 3.2.9 
    gatsby-plugin-react-helmet: ^3.3.4 => 3.3.4 
    gatsby-plugin-sharp: ^2.6.11 => 2.6.11 
    gatsby-source-filesystem: ^2.3.11 => 2.3.11 
    gatsby-transformer-sharp: ^2.5.5 => 2.5.5

The text was updated successfully, but these errors were encountered:

LekoArts · 2020-07-02T06:29:46Z

Hi, thanks for the issue!

I don't think that we'll fix this as the GraphQL playground always has been behind a flag (on purpose) and soon will be deprecated: graphql/graphql-playground#1143

The GraphiQL explorer that comes by default with Gatsby has more capabilities than GraphQL playground and soon will also have complete feature parity with it. We'll also remove the GraphQL playground option in the upcoming v3 of Gatsby.

Feel free to dig into the issue and send in a PR but it's not our priority to fix this. Thanks!

github-actions · 2020-07-22T12:04:39Z

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions · 2020-08-01T12:05:15Z

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

tony · 2020-08-15T21:59:46Z

I will go back to normal graphql for now, but I get this same issue:

react_devtools_backend.js:2273 SyntaxError: Syntax Error: Expected Name, found } (145:1)
  143 | 
  144 |   
> 145 | }
      | ^
  146 | 
  147 | input ImageSharpFixedFilterInput {
  148 |   
    at t.start.line (parser-graphql.js:1)
    at Object.parse (parser-graphql.js:1)
    at Object.parse (standalone.js:13721)
    at Hs (standalone.js:17145)
    at Ws (standalone.js:17381)
    at formatWithCursor (standalone.js:17397)
    at standalone.js:32917
    at Object.format (standalone.js:32926)
    at Object.t.prettify (utils.ts:22)
    at Object.l [as getSDL] (createSDL.ts:94)
overrideMethod @ react_devtools_backend.js:2273
es @ react-dom.production.min.js:209
n.callback @ react-dom.production.min.js:226
po @ react-dom.production.min.js:131
os @ react-dom.production.min.js:212
du @ react-dom.production.min.js:255
t.unstable_runWithPriority @ scheduler.production.min.js:19
Vi @ react-dom.production.min.js:122
fu @ react-dom.production.min.js:248
Zs @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Vi @ react-dom.production.min.js:122
Gi @ react-dom.production.min.js:123
Wi @ react-dom.production.min.js:122
j @ react-dom.production.min.js:287
Qt @ react-dom.production.min.js:68
parser-graphql.js:1 Uncaught SyntaxError: Syntax Error: Expected Name, found } (145:1)
  143 | 
  144 |   
> 145 | }
      | ^
  146 | 
  147 | input ImageSharpFixedFilterInput {
  148 |   
    at t.start.line (parser-graphql.js:1)
    at Object.parse (parser-graphql.js:1)
    at Object.parse (standalone.js:13721)
    at Hs (standalone.js:17145)
    at Ws (standalone.js:17381)
    at formatWithCursor (standalone.js:17397)
    at standalone.js:32917
    at Object.format (standalone.js:32926)
    at Object.t.prettify (utils.ts:22)
    at Object.l [as getSDL] (createSDL.ts:94)
t.start.line @ parser-graphql.js:1
parse @ parser-graphql.js:1
parse @ standalone.js:13721
Hs @ standalone.js:17145
Ws @ standalone.js:17381
formatWithCursor @ standalone.js:17397
(anonymous) @ standalone.js:32917
format @ standalone.js:32926
t.prettify @ utils.ts:22
l @ createSDL.ts:94
r.componentDidMount @ SDLEditor.tsx:50
os @ react-dom.production.min.js:212
du @ react-dom.production.min.js:255
t.unstable_runWithPriority @ scheduler.production.min.js:19
Vi @ react-dom.production.min.js:122
fu @ react-dom.production.min.js:248
Zs @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Vi @ react-dom.production.min.js:122
Gi @ react-dom.production.min.js:123
Wi @ react-dom.production.min.js:122
j @ react-dom.production.min.js:287
Qt @ react-dom.production.min.js:68
react_devtools_backend.js:2273 TypeError: Cannot read property 'off' of undefined
    at r.componentWillUnmount (SDLEditor.tsx:108)
    at react-dom.production.min.js:209
    at as (react-dom.production.min.js:214)
    at ls (react-dom.production.min.js:220)
    at du (react-dom.production.min.js:253)
    at t.unstable_runWithPriority (scheduler.production.min.js:19)
    at Vi (react-dom.production.min.js:122)
    at fu (react-dom.production.min.js:248)
    at Zs (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
overrideMethod @ react_devtools_backend.js:2273
es @ react-dom.production.min.js:209
n.callback @ react-dom.production.min.js:226
po @ react-dom.production.min.js:131
os @ react-dom.production.min.js:212
du @ react-dom.production.min.js:255
t.unstable_runWithPriority @ scheduler.production.min.js:19
Vi @ react-dom.production.min.js:122
fu @ react-dom.production.min.js:248
Zs @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Vi @ react-dom.production.min.js:122
Gi @ react-dom.production.min.js:123
Wi @ react-dom.production.min.js:122
B @ scheduler.production.min.js:17
C.port1.onmessage @ scheduler.production.min.js:14
SDLEditor.tsx:108 Uncaught TypeError: Cannot read property 'off' of undefined
    at r.componentWillUnmount (SDLEditor.tsx:108)
    at react-dom.production.min.js:209
    at as (react-dom.production.min.js:214)
    at ls (react-dom.production.min.js:220)
    at du (react-dom.production.min.js:253)
    at t.unstable_runWithPriority (scheduler.production.min.js:19)
    at Vi (react-dom.production.min.js:122)
    at fu (react-dom.production.min.js:248)
    at Zs (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
r.componentWillUnmount @ SDLEditor.tsx:108
(anonymous) @ react-dom.production.min.js:209
as @ react-dom.production.min.js:214
ls @ react-dom.production.min.js:220
du @ react-dom.production.min.js:253
t.unstable_runWithPriority @ scheduler.production.min.js:19
Vi @ react-dom.production.min.js:122
fu @ react-dom.production.min.js:248
Zs @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Vi @ react-dom.production.min.js:122
Gi @ react-dom.production.min.js:123
Wi @ react-dom.production.min.js:122
j @ react-dom.production.min.js:287
Qt @ react-dom.production.min.js:68
GraphQLEditor.tsx:587 Uncaught TypeError: Cannot read property 'getWidth' of null
    at GraphQLEditor.tsx:587

graphql-playground-middleware-express': '^1.7.18',
gatsby-2.24.47

johnridesabike added the type: bug An issue or pull request relating to a bug in Gatsby label Jun 19, 2020

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jun 19, 2020

smthomas added topic: GraphiQL* and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Jun 22, 2020

smthomas assigned freiksenet Jun 22, 2020

smthomas added the status: inkteam assigned label Jun 22, 2020

LekoArts removed the topic: GraphiQL* label Jun 22, 2020

LekoArts unassigned freiksenet Jul 2, 2020

LekoArts added help wanted Issue with a clear description that the community can help with. and removed status: inkteam assigned labels Jul 2, 2020

github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Jul 22, 2020

github-actions bot closed this as completed Aug 1, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clicking “schema” in the GraphQL Playground crashes the page #25128

Clicking “schema” in the GraphQL Playground crashes the page #25128

johnridesabike commented Jun 19, 2020 •

edited

Loading

LekoArts commented Jul 2, 2020

github-actions bot commented Jul 22, 2020

github-actions bot commented Aug 1, 2020

tony commented Aug 15, 2020

Clicking “schema” in the GraphQL Playground crashes the page #25128

Clicking “schema” in the GraphQL Playground crashes the page #25128

Comments

johnridesabike commented Jun 19, 2020 • edited Loading

Description

Steps to reproduce

Expected result

Actual result

Environment

LekoArts commented Jul 2, 2020

github-actions bot commented Jul 22, 2020

github-actions bot commented Aug 1, 2020

tony commented Aug 15, 2020

johnridesabike commented Jun 19, 2020 •

edited

Loading