Repository: mcollina/fastify-gql
Pull request #277 (2020-09-04 16:54:46)

add playground settings option
fixed [272](https://github.com/mcollina/fastify-gql/issues/272)

this RP is WIP, its missing documentation and testing (I'm not sure how to test it)

but I want to make sure I got the settings option name right.


Patch:
diff --git a/README.md b/README.md
index 7b4ec7a..2f11a22 100644
--- a/README.md
+++ b/README.md
@@ -875,6 +875,8 @@ __fastify-gql__ supports the following options:
   [GraphQL IDE](https://www.npmjs.com/package/graphql-playground-react) on `/playground` if `'playground'`
   and if `routes` is `true`. Leave empty or `false` to disable.
   _only applies if `onlyPersisted` option is not `true`_
+* `playgroundSettings` Object. that allow you to configure GraphQL Playground with [playground 
+   options](https://github.com/prisma-labs/graphql-playground#usage). it works if the graphiql is set to `'playground'`.
 * `jit`: Integer. The minimum number of execution a query needs to be
   executed before being jit'ed.
 * `routes`: boolean. Serves the Default: `true`. A graphql endpoint is
diff --git a/index.js b/index.js
index 89831da..4a57e63 100644
--- a/index.js
+++ b/index.js
@@ -199,6 +199,7 @@ const plugin = fp(async function (app, opts) {
       errorHandler: opts.errorHandler,
       errorFormatter: opts.errorFormatter,
       ide: optsIde,
+      ideSettings: opts.playgroundSettings,
       prefix: opts.prefix,
       path: opts.path,
       context: opts.context,
diff --git a/lib/routes.js b/lib/routes.js
index a1fa099..f652819 100644
--- a/lib/routes.js
+++ b/lib/routes.js
@@ -315,6 +315,7 @@ module.exports = async function (app, opts) {
           GraphQLPlayground.init(document.getElementById('root'), {
             subscriptionEndpoint: '${opts.prefix || ''}${graphqlPath}',
             endpoint: '${opts.prefix || ''}${graphqlPath}',
+            settings: ${JSON.stringify(opts.ideSettings)},
           });
         });`)
       })


Test patch:
diff --git a/tap-snapshots/test-routes.js-TAP.test.js b/tap-snapshots/test-routes.js-TAP.test.js
index dea5d8c..f943bbc 100644
--- a/tap-snapshots/test-routes.js-TAP.test.js
+++ b/tap-snapshots/test-routes.js-TAP.test.js
@@ -70,11 +70,22 @@ exports['test/routes.js TAP if ide is graphiql, serve config.js with the correct
 window.GRAPHQL_ENDPOINT = '/app/graphql'
 `
 
+exports['test/routes.js TAP if ide is playground, and playgroundSettings is set, serve init.js with playground editor options > must match snapshot 1'] = `
+window.addEventListener('load', function(event) {
+          GraphQLPlayground.init(document.getElementById('root'), {
+            subscriptionEndpoint: '/graphql',
+            endpoint: '/graphql',
+            settings: {"editor.theme":"light","editor.fontSize":17},
+          });
+        });
+`
+
 exports['test/routes.js TAP if ide is playground, serve init.js with the correct endpoint > must match snapshot 1'] = `
 window.addEventListener('load', function(event) {
           GraphQLPlayground.init(document.getElementById('root'), {
             subscriptionEndpoint: '/app/graphql',
             endpoint: '/app/graphql',
+            settings: undefined,
           });
         });
 `
diff --git a/test/routes.js b/test/routes.js
index f23eef9..81b6bd6 100644
--- a/test/routes.js
+++ b/test/routes.js
@@ -1733,6 +1733,31 @@ test('if ide is graphiql, serve config.js with the correct endpoint', async (t)
   t.matchSnapshot(res.body)
 })
 
+test('if ide is playground, and playgroundSettings is set, serve init.js with playground editor options ', async (t) => {
+  const app = Fastify()
+  const schema = `
+    type Query {
+      add(x: Int, y: Int): Int
+    }
+  `
+  app.register(GQL, {
+    ide: 'playground',
+    playgroundSettings: {
+      'editor.theme': 'light',
+      'editor.fontSize': 17
+    },
+    schema
+  })
+
+  const res = await app.inject({
+    method: 'GET',
+    url: '/playground/init.js'
+  })
+  t.strictEqual(res.statusCode, 200)
+  t.strictEqual(res.headers['content-type'], 'application/javascript')
+  t.matchSnapshot(res.body)
+})
+
 test('if operationName is null, it should work fine', async (t) => {
   const app = Fastify()
   const schema = `