Interface implementing another interface breaks Schema tab

[fitzgibbon]

This issue pertains to the following package(s):

• [ ] GraphQL Playground - Electron App
• [ ] GraphQL Playground HTML
• [x] GraphQL Playground
• [ ] GraphQL Playground Express Middleware
• [ ] GraphQL Playground Hapi Middleware
• [ ] GraphQL Playground Koa Middleware
• [ ] GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

Browser - all browsers, multiple OSes

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

GraphQL Playground 1.7.28

What is the expected behavior?

The Schema tab should render the schema

What is the actual behavior?

Clicking the Schema tab renders a white page. The back button does not return to the previous page from this.

What steps may we take to reproduce the behavior?

Create a GraphQL schema in which an interface implements another interface, which was added in the October 2021 GraphQL spec.

For example:

interface Foo implements Node {
    id: ID!
    bar: Int
}

The following error appears in the browser JS console:

SyntaxError: Syntax Error: Unexpected Name "implements" (12:16)
  10 | }
  11 | 
> 12 | interface Foo implements Node {
     |                ^
  13 |   id: ID!
  14 | 
    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
    c createSDL.ts:75
    componentDidMount SDLEditor.tsx:50
    React 2
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
    unstable_runWithPriority scheduler.production.min.js:19
    React 5
react_devtools_backend.js:4026:25
    overrideMethod react_devtools_backend.js:4026
    React 5
    unstable_runWithPriority scheduler.production.min.js:19
    React 4
    unstable_runWithPriority scheduler.production.min.js:19
    React 5

[paul-vd]

Any solutions for this?

[pallaviaggarwal28]

The same issue comes up while using graphql with kotlin. Any solution to this one?

[vberankis]

Same here with Kotlin.

[acao]

we've added full support in graphiql/graphql-language-service-parser for this in 2020. try updating the underlying versions of codemirror-graphql and graphql-language-service-parser, or use graphiql. also make sure you are resolving a modern version of the graphql reference implementation

if you are using the apollo fork which they have deprecated, then I'm not sure theirs follows the 2021 spec, as it uses forks of our codemirror and parser/interface libraries where we added support