Settings don't update from the client if any setting is set from the server

[akand074]

This issue pertains to the following package(s):

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

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

graphql-playground-html@1.6.0
graphql-playground-middleware-express@1.7.2

Example

import playground from 'graphql-playground-middleware-express';

app.get(
  '/playground',
  playground({
    endpoint: '/graphql',
    settings: { 'editor.fontSize': 16 }
  })
);

Playground properly uses that font size but still shows setting as 14 (the default) under settings. If I try to change the font size, theme, etc. from the client it doesn't take effect.

The only exception is request.credentials is actually able to be changed from the client. Likely related to this bug #791 as it can't be set by the server.

If I don't set any settings from the server

import playground from 'graphql-playground-middleware-express';

app.get(
  '/playground',
  playground({
    endpoint: '/graphql'
  })
);

then everything works fine.

I'm not sure if this is a bug or intended. But it would be ideal to be able to set default settings from the server but allow users to update those from the client and have them persist across sessions.

[Whoaa512]

As a workaround, if you set the playground version to 1.7.1 the settings work as expected.

import playground from 'graphql-playground-middleware-express';

app.get(
  '/playground',
  playground({
    endpoint: '/graphql',
	version: '1.7.1',
  })
);

[vincenzo]

I am trying to collect all these 'settings' issues in one place; I think it's beneficial that all of them are taken into consideration at once, lest we end up with partial fixes or fixes that break other stuff.

Here's the place: #826

Could you all have a look and confirm the problem in this present issue has been captured in the one above?

[akand074]

This is still an issue in:

graphql-playground-react@1.7.8
graphql-playground-middleware-express@1.7.6
graphql-playground-html@1.6.4

The settings show the correct value in the settings now, but if I try to change them from the client side, the changes are just ignored (even though it saves the new value in the settings).

@leonaves @HuVik

• It seems some settings work. For example:
  Changing these values are not taking affect

  "editor.theme": "light",
  "prettier.printWidth": 120,

But changing these values are

  "editor.fontSize": 16,
  "tracing.hideTracingResponse": false

😕

[leonaves]

I assume it's a deeper issue / potentially multiple issues than the one I fixed if it's only affecting certain settings.

The theme color thing might be to do with this line:

https://github.com/prisma/graphql-playground/blob/master/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx#L527

As it might be passed with the default settings as a prop and then always have that take priority even if the user's saved settings change. Not able to test at the moment, but I would probably open an issue for each setting that doesn't work separately as they probably have different reasons for not applying.