Autocompletion and tab schema broken when an interface inherits from another interface

[clero]

This issue pertains to the following package(s):

• [ ] GraphQL Playground - Electron App
• [x] 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?

Mac OS, Ubuntu, Windows

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

• @apollographql/graphql-playground-html: 1.6.26
• @apollographql/graphql-playground-react: 1.7.33
• NOT VISIBLE ON Electron App: 1.7.20

What is the expected behavior?

When using following schema (minimal implementation) I expect the autocompletion and the tab schema to work in the playground

  interface Foo {
    id: ID!
  }

  interface Bar implements Foo {
    id: ID!
    name: String!
  }

  interface Catalog {
    elements: [Foo!]!
  }

  type BarCatalog implements Catalog {
    elements: [Bar!]!
  }

  type Query {
    catalogs: [BarCatalog!]!
  }

What is the actual behavior?

Actually this schema brakes the playground autocompletion and the tab schema with following error in the console:

invariant.js:18: Uncaught Error: Catalog.elements expects type "[Foo!]!" but BarCatalog.elements provides type "[Bar!]!".
    at r (invariant.js:18)
    at schema.js:247
    at Array.forEach (<anonymous>)
    at a (schema.js:238)
    at schema.js:120
    at Array.forEach (<anonymous>)
    at schema.js:119
    at Array.forEach (<anonymous>)
    at new e (schema.js:116)
    at Object.i (buildClientSchema.js:290)

What steps may we take to reproduce the behavior?

1. Serve schema given in the description
2. Open the playground
3. Use query:

   query {
   catalogs {
   elements {
     id
     name
   }
   }
   }

4. Try to add something to the query using autocompletion (CTRL+P) and try to open the tab schema

[Mika83AC]

In GraphQL Playground Koa Middleware (maybe because it still uses a old version of the Playground??)

This issue also breaks the Schema tab which results in a blank page and errors on the console:

SyntaxError: Syntax Error: Unexpected Name "implements" (92:34)
  90 | }
  91 | 
> 92 | interface ListEntryBaseInterface implements CountryInterface {
     |                                  ^
  93 |   # Unique identifier of the assigend country.
  94 |   countryId: GqlGuid
....