feat(core): Added playground and debug config for graphql apis

BREAKING CHANGE: The graphql-playground for the Shop and Admin APIs are now turned off by default, and the Apollo server debug option is also set to false by default (it was formerly true). You can manually configure these values using the VendureConfig.apiOptions object.

Co-authored-by: Kai Chu <kai.chu@inoviagroup.se>

packages/core/src/api/api.module.ts

@@ -28,7 +28,9 @@ import { ValidateCustomFieldsInterceptor } from './middleware/validate-custom-fi
         configureGraphQLModule(configService => ({
             apiType: 'shop',
             apiPath: configService.apiOptions.shopApiPath,
-            typePaths: ['type', 'shop-api', 'common'].map(p =>
+            playground: configService.apiOptions.shopApiPlayground,
+            debug: configService.apiOptions.shopApiDebug,
+            typePaths: ['type', 'shop-api', 'common'].map((p) =>
                 path.join(__dirname, 'schema', p, '*.graphql'),
             ),
             resolverModule: ShopApiModule,
@@ -36,7 +38,9 @@ import { ValidateCustomFieldsInterceptor } from './middleware/validate-custom-fi
         configureGraphQLModule(configService => ({
             apiType: 'admin',
             apiPath: configService.apiOptions.adminApiPath,
-            typePaths: ['type', 'admin-api', 'common'].map(p =>
+            playground: configService.apiOptions.adminApiPlayground,
+            debug: configService.apiOptions.adminApiDebug,
+            typePaths: ['type', 'admin-api', 'common'].map((p) =>
                 path.join(__dirname, 'schema', p, '*.graphql'),
             ),
             resolverModule: AdminApiModule,

packages/core/src/api/config/configure-graphql-module.ts

@@ -31,6 +31,8 @@ export interface GraphQLApiOptions {
     apiType: 'shop' | 'admin';
     typePaths: string[];
     apiPath: string;
+    debug: boolean;
+    playground: boolean | any;
     // tslint:disable-next-line:ban-types
     resolverModule: Function;
 }
@@ -133,12 +135,8 @@ async function createGraphQLOptions(
         uploads: {
             maxFileSize: configService.assetOptions.uploadMaxFileSize,
         },
-        playground: {
-            settings: {
-                'request.credentials': 'include',
-            } as any,
-        },
-        debug: true,
+        playground: options.playground || false,
+        debug: options.debug || false,
         context: (req: any) => req,
         // This is handled by the Express cors plugin
         cors: false,

packages/core/src/config/config.service.mock.ts

@@ -8,7 +8,11 @@ export class MockConfigService implements MockClass<ConfigService> {
     apiOptions = {
         channelTokenKey: 'vendure-token',
         adminApiPath: 'admin-api',
+        adminApiPlayground: false,
+        adminApiDebug: true,
         shopApiPath: 'shop-api',
+        shopApiPlayground: false,
+        shopApiDebug: true,
         port: 3000,
         cors: false,
         middleware: [],
@@ -16,7 +20,6 @@ export class MockConfigService implements MockClass<ConfigService> {
     };
     authOptions: {};
     defaultChannelToken: 'channel-token';
-
     defaultLanguageCode: jest.Mock<any>;
     roundingStrategy: {};
     entityIdStrategy = new MockIdStrategy();

packages/core/src/config/config.service.ts

@@ -57,7 +57,7 @@ export class ConfigService implements VendureConfig {
     get defaultLanguageCode(): LanguageCode {
         return this.activeConfig.defaultLanguageCode;
     }
-
+    
     get entityIdStrategy(): EntityIdStrategy {
         return this.activeConfig.entityIdStrategy;
     }

packages/core/src/config/default-config.ts

@@ -36,7 +36,11 @@ export const defaultConfig: RuntimeVendureConfig = {
         hostname: '',
         port: 3000,
         adminApiPath: 'admin-api',
+        adminApiPlayground: false,
+        adminApiDebug: false,
         shopApiPath: 'shop-api',
+        shopApiPlayground: false,
+        shopApiDebug: false,
         channelTokenKey: 'vendure-token',
         cors: {
             origin: true,
@@ -57,7 +61,6 @@ export const defaultConfig: RuntimeVendureConfig = {
     catalogOptions: {
         collectionFilters: defaultCollectionFilters,
     },
-
     entityIdStrategy: new AutoIncrementIdStrategy(),
     assetOptions: {
         assetNamingStrategy: new DefaultAssetNamingStrategy(),

packages/core/src/config/vendure-config.ts

@@ -65,6 +65,38 @@ export interface ApiOptions {
      * @default 'shop-api'
      */
     shopApiPath?: string;
+    /**
+     * @description
+     * The playground config to the admin GraphQL API
+     * [ApolloServer playground](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructoroptions-apolloserver).
+     *
+     * @default false
+     */
+    adminApiPlayground?: boolean | any;
+    /**
+     * @description
+     * The playground config to the shop GraphQL API
+     * [ApolloServer playground](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructoroptions-apolloserver).
+     *
+     * @default false
+     */
+    shopApiPlayground?: boolean | any;
+    /**
+     * @description
+     * The debug config to the admin GraphQL API
+     * [ApolloServer playground](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructoroptions-apolloserver).
+     *
+     * @default false
+     */
+    adminApiDebug?: boolean;
+    /**
+     * @description
+     * The debug config to the admin GraphQL API
+     * [ApolloServer playground](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructoroptions-apolloserver).
+     *
+     * @default false
+     */
+    shopApiDebug?: boolean;
     /**
      * @description
      * The name of the property which contains the token of the

packages/create/templates/vendure-config.hbs

@@ -29,7 +29,19 @@ const path = require('path');
     apiOptions: {
         port: 3000,
         adminApiPath: 'admin-api',
+        adminApiPlayground: {
+            settings: {
+                'request.credentials': 'include',
+            }{{#if isTs}} as any{{/if}},
+        },// turn this off for production
+        adminApiDebug: true, // turn this off for production
         shopApiPath: 'shop-api',
+        shopApiPlayground: { 
+            settings: {
+                'request.credentials': 'include',
+            }{{#if isTs}} as any{{/if}},
+        },// turn this off for production
+        shopApiDebug: true,// turn this off for production
     },
     authOptions: {
         sessionSecret: '{{ sessionSecret }}',

packages/dev-server/dev-config.ts

@@ -22,6 +22,19 @@ export const devConfig: VendureConfig = {
     apiOptions: {
         port: API_PORT,
         adminApiPath: ADMIN_API_PATH,
+        adminApiPlayground: {
+            settings: {
+                'request.credentials': 'include',
+            } as any,
+        },
+        adminApiDebug: true,
+        shopApiPath: SHOP_API_PATH,
+        shopApiPlayground: {
+            settings: {
+                'request.credentials': 'include',
+            } as any,
+        },
+        shopApiDebug: true,
     },
     authOptions: {
         disableAuth: false,