Update query playground to the latest graphiql (#2588)

* Update query playground to the latest graphiql * Update changelog
subquery · Nov 18, 2024 · 2bcdb6b · 2bcdb6b
1 parent 7f9fbea
commit 2bcdb6b
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 15 deletions.
diff --git a/packages/query/CHANGELOG.md b/packages/query/CHANGELOG.md
@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed
+- Update the playground to the latest GraphiQL (#2588)
 
 ## [2.15.2] - 2024-09-25
 ### Changed

diff --git a/packages/query/src/graphql/graphql.module.ts b/packages/query/src/graphql/graphql.module.ts
@@ -9,11 +9,7 @@ import {HttpAdapterHost} from '@nestjs/core';
 import {delay, getDbType, SUPPORT_DB} from '@subql/common';
 import {hashName} from '@subql/utils';
 import {getPostGraphileBuilder, Plugin, PostGraphileCoreOptions} from '@subql/x-postgraphile-core';
-import {
-  ApolloServerPluginCacheControl,
-  ApolloServerPluginLandingPageDisabled,
-  ApolloServerPluginLandingPageGraphQLPlayground,
-} from 'apollo-server-core';
+import {ApolloServerPluginCacheControl, ApolloServerPluginLandingPageDisabled} from 'apollo-server-core';
 import {ApolloServer, UserInputError} from 'apollo-server-express';
 import compression from 'compression';
 import {NextFunction, Request, Response} from 'express';
@@ -29,6 +25,7 @@ import {getLogger, PinoConfig} from '../utils/logger';
 import {getYargsOption} from '../yargs';
 import {plugins} from './plugins';
 import {PgSubscriptionPlugin} from './plugins/PgSubscriptionPlugin';
+import {playgroundPlugin} from './plugins/PlaygroundPlugin';
 import {queryAliasLimit} from './plugins/QueryAliasLimitPlugin';
 import {queryComplexityPlugin} from './plugins/QueryComplexityPlugin';
 import {queryDepthLimitPlugin} from './plugins/QueryDepthLimitPlugin';
@@ -202,11 +199,7 @@ export class GraphqlModule implements OnModuleInit, OnModuleDestroy {
         defaultMaxAge: 5,
         calculateHttpHeaders: true,
       }),
-      this.config.get('playground')
-        ? ApolloServerPluginLandingPageGraphQLPlayground({
-            settings: argv['playground-settings'] ? JSON.parse(argv['playground-settings']) : undefined,
-          })
-        : ApolloServerPluginLandingPageDisabled(),
+      this.config.get('playground') ? playgroundPlugin({url: '/'}) : ApolloServerPluginLandingPageDisabled(),
       queryComplexityPlugin({schema, maxComplexity: argv['query-complexity']}),
       queryDepthLimitPlugin({schema, maxDepth: argv['query-depth-limit']}),
       queryAliasLimit({schema, limit: argv['query-alias-limit']}),

diff --git a/packages/query/src/graphql/plugins/PlaygroundPlugin.ts b/packages/query/src/graphql/plugins/PlaygroundPlugin.ts
@@ -0,0 +1,106 @@
+// Copyright 2020-2024 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: GPL-3.0
+
+import type {ApolloServerPlugin, GraphQLServerListener} from 'apollo-server-plugin-base';
+
+export function playgroundPlugin(options: {url: string}): ApolloServerPlugin {
+  return {
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async serverWillStart(): Promise<GraphQLServerListener> {
+      return {
+        // eslint-disable-next-line @typescript-eslint/require-await
+        async renderLandingPage() {
+          // This content is sourced from https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html
+          return {
+            html: `
+            <!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>SubQuery Playground</title>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+
+      :global(.graphiql-explorer-root > div:first-child) {
+        /* Remove the 2nd horizontal scroll bar */
+        overflow: hidden !important;
+      }
+    </style>
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bundler.
+    -->
+    <script
+      crossorigin
+      src="https://unpkg.com/react@18/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+    ></script>
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+    <script
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+      type="application/javascript"
+    ></script>
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <!--
+      These are imports for the GraphIQL Explorer plugin.
+     -->
+    <script
+      src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
+      crossorigin
+    ></script>
+
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script>
+      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+      const fetcher = GraphiQL.createFetcher(${JSON.stringify(options)});
+      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin({
+        showAttribution: true,
+      });
+      root.render(
+        React.createElement(GraphiQL, {
+          fetcher,
+          defaultEditorToolsVisibility: true,
+          plugins: [explorerPlugin],
+        }),
+      );
+    </script>
+  </body>
+</html>`,
+          };
+        },
+      };
+    },
+  };
+}
diff --git a/packages/query/src/yargs.ts b/packages/query/src/yargs.ts
@@ -98,11 +98,6 @@ export function getYargsOption() {
         describe: 'Enable graphql playground',
         type: 'boolean',
       },
-      'playground-settings': {
-        demandOption: false,
-        describe: 'Pass the settings to the graphql playground (JSON format)',
-        type: 'string',
-      },
       'query-limit': {
         demandOption: false,
         describe: 'Set limit on number of query results per entity',