Apollo-server: Typescript Type definition for Graphql-playground-html mismatching

[cherihung]

I am running into an issue with TS type definitions for graphql-playground-html. I have checked that all my Apollo npm packages are up to date to the latest 2.6.2 version.

Intended outcome:

I want to specify settings in for Playground as described by the Apollo doc.

Specifically, I want to define configs related to schema.polling

I have my settings like this, which is taken from the Graphql-playground doc. It's also what I see when I open my iGraphql playground's Settings.

playground: {
    settings: {
      "editor.cursorShape": "line" as CursorShape,
      "editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",
      "editor.fontSize": 14,
      "editor.reuseHeaders": true,
      "editor.theme": "dark" as Theme,
      "general.betaUpdates": false,
      "prettier.printWidth": 80,
      "prettier.tabWidth": 2,
      "prettier.useTabs": false,
      "request.credentials": "omit",
      "schema.disableComments": true,
      "schema.polling.enable": false,
      "schema.polling.endpointFilter": "*localhost*",
      "schema.polling.interval": 2000,
      "tracing.hideTracingResponse": true,
      "queryPlan.hideQueryPlanResponse": true
    },
...

I expected my app to compile and take in the new settings every time I start my dev server.

Actual outcome:

However, when I compile my app, I get a TS error:

Object literal may only specify known properties, and ''schema.disableComments'' does not exist in type 'ISettings'.

I then looked at the actual type definition imported with apollo-server from
@apollographql/graphql-playground-html/dist/render-playground-page

and I see the actual definition ISettings is missing more fields as compared to Graphql-playground's settings interface:

export interface ISettings {
    'general.betaUpdates': boolean;
    'editor.cursorShape': CursorShape;
    'editor.theme': Theme;
    'editor.reuseHeaders': boolean;
    'tracing.hideTracingResponse': boolean;
    'queryPlan.hideQueryPlanResponse'?: boolean;
    'editor.fontSize': number;
    'editor.fontFamily': string;
    'request.credentials': string;
}

[abernix]

I don't really understand the issue here, but we're up to date with the upstream graphql-playground project. I believe this is the only place where we use the types from graphql-playground within Apollo Server itself:

https://github.com/apollographql/apollo-server/blob/bcd1e2d6bea815a35bed789a4256a5dd8bdfb581/packages/apollo-server-core/src/playground.ts#L24-L73

If there's a problem here, if you'd submit a PR to the upstream repository (linked above), we can get that pulled in.

[Elyx0]

@cherihung How did you solve this if you did? I have the same issue. Just trying to add polling interval to

settings: {
    'editor.theme': 'light',
    'schema.polling.interval': 20000, // <-- TS complains
  }

to a new Apollo server playground settings.

Indeed it's not defined in the https://github.com/apollographql/apollo-server/blob/master/packages/apollo-server-core/src/playground.ts#L30 how can I extend this easily?

[Elyx0]

const myServer = new ApolloServer({
  playground: {
    settings: {
      'editor.theme': 'light' as Theme,
      'schema.polling.interval': 20000,
    },
  },
});

Is enough to make TS complain:

Types of property 'settings' are incompatible.
  Type '{ 'editor.theme': Theme; 'schema.polling.interval': number; }' is not assignable to type 'RecursivePartial<ISettings>'.
    Object literal may only specify known properties, and ''schema.polling.interval'' does not exist in type 'RecursivePartial<ISettings>'.ts(2326)
types.d.ts(62, 5): The expected type comes from property 'playground' which is declared here on type 'Config'

Edit: casting as Config as any solved it for now

[Elyx0]

Links with #1713

[cherihung]

@Elyx0 hi, sorry, just getting back. Yes, I did the same to cast as any to solve it for now.

[South-Paw]

Unsure why this is closed - the types are certainly still out of sync with the playground...

[lucascherifi]

This bug is not fixed at this day.

[glasser]

I'd be happy to reopen this issue if somebody provides a full reproduction recipe (ie, a series of steps, typically starting with git clone, which allow me to immediately see the problem with no creativity required on my part).