Use offline GraphiQL renderer

Signed-off-by: Dmitriy Lazarev <[email protected]>

plugins/graphql-backend-module-catalog/README.md

@@ -36,7 +36,7 @@ create catalog `DataLoader`:
 
 ```ts
 import { createRouter } from '@frontside/backstage-plugin-graphql-backend';
-import { Catalog } from '@frontside/backstage-plugin-graphql-backend-module-catalog';
+import { Catalog, createCatalogLoader } from '@frontside/backstage-plugin-graphql-backend-module-catalog';
 
 // packages/backend/src/plugins/graphql.ts
 export default async function createPlugin(

plugins/graphql-backend/package.json

@@ -38,6 +38,7 @@
     "@envelop/core": "^4.0.0",
     "@envelop/dataloader": "^5.0.0",
     "@envelop/graphql-modules": "^5.0.0",
+    "@graphql-yoga/render-graphiql": "^5.0.0",
     "@frontside/backstage-plugin-graphql-backend-node": "^0.1.1",
     "@frontside/hydraphql": "^0.1.1",
     "dataloader": "^2.1.0",
@@ -46,7 +47,6 @@
     "graphql": "^16.6.0",
     "graphql-modules": "^2.1.0",
     "graphql-yoga": "^4.0.3",
-    "helmet": "^6.0.0",
     "winston": "^3.2.1"
   },
   "devDependencies": {

plugins/graphql-backend/src/router.ts

@@ -3,9 +3,9 @@ import express from 'express';
 import Router from 'express-promise-router';
 import { Logger } from 'winston';
 import { Module } from 'graphql-modules';
-import helmet from 'helmet';
 import { Options } from 'dataloader';
 import { createYoga, Plugin, YogaServerInstance } from 'graphql-yoga';
+import { renderGraphiQL } from '@graphql-yoga/render-graphiql'
 import { useGraphQLModules } from '@envelop/graphql-modules';
 import { useDataLoader } from '@envelop/dataloader';
 import { printSchema } from 'graphql';
@@ -63,20 +63,10 @@ export async function createRouter({
     response.send(printSchema(application.schema));
   });
 
-  if (process.env.NODE_ENV === 'development')
-    router.use(
-      helmet.contentSecurityPolicy({
-        directives: {
-          defaultSrc: ["'self'", "'unsafe-inline'", 'http://*'],
-          scriptSrc: ["'self'", "'unsafe-inline'", 'https://*'],
-          imgSrc: ["'self'", 'https: data:'],
-        },
-      }),
-    );
-
   router.use((req, res, next) => {
     if (!yoga) {
       yoga = createYoga({
+        renderGraphiQL,
         plugins: [
           useGraphQLModules(application),
           useDataLoader(

yarn.lock

@@ -5475,6 +5475,11 @@
   dependencies:
     tslib "^2.5.2"
 
+"@graphql-yoga/render-graphiql@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@graphql-yoga/render-graphiql/-/render-graphiql-5.0.0.tgz#ac4004b2f021eac379163e8746611d6ad32f5106"
+  integrity sha512-m6pyKG4MGb4LBcKO3XIQmHS6zV9omxOY2cD9yszUesmIv0lEcXezHWiH2+uehCE2MmeO5vGNoSZIgEq291bXUg==
+
 "@graphql-yoga/subscription@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@graphql-yoga/subscription/-/subscription-4.0.0.tgz#2bf5844ce8aeff46332650ad642218250201dcc5"