@things-factory/shell 6.0.12 → 6.0.19

package/helps/about/things-factory.en.md

@@ -204,50 +204,50 @@ $ yarn workspace @things-factory/operato-mms run serve
 ```
 # generate new application (ie. @things-factory/operato-xyz)
 $ yarn generate app
-  ? What should this application's name be? Ex. operato-abc > # type "operato-xyz"
+  ? What should this application's name be? e.g. operato-abc > # type "operato-xyz"
 
 # generate new module (ie. @things-factory/notification)
 $ yarn generate module
-  ? What should this module's name be? Ex. menu > # type "notification"
+  ? What should this module's name be? e.g. menu > # type "notification"
 
 # generate new entity in a module (ie. "sms" entity in @things-factory/notification module)
 $ yarn generate entity
-  ? What is target package's name? Ex. biz-base, operato-mms > # type "notification"
-  ? What should this entitie's name be? Ex. company, company-ext > # type "sms"
+  ? What is target package's name? e.g. biz-base, operato-mms > # type "notification"
+  ? What should this entitie's name be? e.g. company, company-ext > # type "sms"
 
 # generate new page in a module (ie. "sms-view" page in @things-factory/notification module)
 $ yarn generate page
-  ? What is target package's name? Ex. biz-base, operato-mms > # type "notification"
-  ? What should this pages's name be? Ex. abc-viewer > # type "sms-view"
+  ? What is target package's name? e.g. biz-base, operato-mms > # type "notification"
+  ? What should this pages's name be? e.g. abc-viewer > # type "sms-view"
 
 # generate new scene-module from scratch (ie. @things-factory/scene-random)
 $ yarn generate app
-  ? What should this module's name be? Ex. random > # type "scene-random"
+  ? What should this module's name be? e.g. random > # type "scene-random"
 
 # generate new scene-component in a module (ie. "button" component in @things-factory/scene-switch module)
 $ yarn generate component
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 
 # generate new container component in a module (ie. "button" container component in @things-factory/scene-switch module)
 $ yarn generate container
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 
 # generate new html base scene component in a module (ie. "button" html-component in @things-factory/scene-switch module)
 $ yarn generate html-component
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 
 # generate new data source scene component in a module (ie. "button" component in @things-factory/scene-switch module)
 $ yarn generate data-source
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 
 # generate new data transform scene component in a module (ie. "button" component in @things-factory/scene-switch module)
 $ yarn generate data-transform
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 ```
 
 ## References

package/helps/about/things-factory.ko.md

@@ -207,50 +207,50 @@ $ yarn workspace @things-factory/operato-mms run serve
 ```
 # generate new application (ie. @things-factory/operato-xyz)
 $ yarn generate app
-  ? What should this application's name be? Ex. operato-abc > # type "operato-xyz"
+  ? What should this application's name be? e.g. operato-abc > # type "operato-xyz"
 
 # generate new module (ie. @things-factory/notification)
 $ yarn generate module
-  ? What should this module's name be? Ex. menu > # type "notification"
+  ? What should this module's name be? e.g. menu > # type "notification"
 
 # generate new entity in a module (ie. "sms" entity in @things-factory/notification module)
 $ yarn generate entity
-  ? What is target package's name? Ex. biz-base, operato-mms > # type "notification"
-  ? What should this entitie's name be? Ex. company, company-ext > # type "sms"
+  ? What is target package's name? e.g. biz-base, operato-mms > # type "notification"
+  ? What should this entitie's name be? e.g. company, company-ext > # type "sms"
 
 # generate new page in a module (ie. "sms-view" page in @things-factory/notification module)
 $ yarn generate page
-  ? What is target package's name? Ex. biz-base, operato-mms > # type "notification"
-  ? What should this pages's name be? Ex. abc-viewer > # type "sms-view"
+  ? What is target package's name? e.g. biz-base, operato-mms > # type "notification"
+  ? What should this pages's name be? e.g. abc-viewer > # type "sms-view"
 
 # generate new scene-module from scratch (ie. @things-factory/scene-random)
 $ yarn generate app
-  ? What should this module's name be? Ex. random > # type "scene-random"
+  ? What should this module's name be? e.g. random > # type "scene-random"
 
 # generate new scene-component in a module (ie. "button" component in @things-factory/scene-switch module)
 $ yarn generate component
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 
 # generate new container component in a module (ie. "button" container component in @things-factory/scene-switch module)
 $ yarn generate container
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 
 # generate new html base scene component in a module (ie. "button" html-component in @things-factory/scene-switch module)
 $ yarn generate html-component
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 
 # generate new data source scene component in a module (ie. "button" component in @things-factory/scene-switch module)
 $ yarn generate data-source
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 
 # generate new data transform scene component in a module (ie. "button" component in @things-factory/scene-switch module)
 $ yarn generate data-transform
-  ? What is target package's name? Ex. switch > # type "switch"
-  ? What should this component's name be? Ex. button > # type "button"
+  ? What is target package's name? e.g. switch > # type "switch"
+  ? What should this component's name be? e.g. button > # type "button"
 ```
 
 ## References

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "6.0.12",
+  "version": "6.0.19",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -31,6 +31,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.9",
+    "@apollo/server": "^4.5.0",
+    "@as-integrations/koa": "^0.3.0",
     "@graphql-tools/merge": "^8.3.0",
     "@graphql-tools/schema": "^8.5.0",
     "@graphql-tools/utils": "^8.8.0",
@@ -57,10 +59,6 @@
     "@things-factory/utils": "^6.0.7",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
-    "apollo-server-core": "^3.10.0",
-    "apollo-server-koa": "^3.10.0",
-    "apollo-server-types": "^3.6.2",
-    "apollo-upload-client": "^17.0.0",
     "args": "^5.0.0",
     "broadcastchannel-polyfill": "^1.0.1",
     "chalk": "^4.1.0",
@@ -131,5 +129,5 @@
     "pg": "^8.7.3",
     "sqlite3": "^5.0.8"
   },
-  "gitHead": "6dd9637de0444917aa5a3621ce1f361cfb483f36"
+  "gitHead": "05a9514944178c345d8eec9009cc912b2e55c389"
 }

package/server/graphql-local-client.ts

@@ -1,75 +1,18 @@
-import { ApolloServerBase } from 'apollo-server-core'
-import { GraphQLResponse } from 'apollo-server-types'
-import { print, DocumentNode } from 'graphql'
-
-type StringOrAst = string | DocumentNode
-
-// A query must not come with a mutation (and vice versa).
-type Query = {
-  query: StringOrAst
-  mutation?: undefined
-  variables?: {
-    [name: string]: any
-  }
-  operationName?: string
-}
-
-type Mutation = {
-  mutation: StringOrAst
-  query?: undefined
-  variables?: {
-    [name: string]: any
-  }
-  operationName?: string
-}
-
-export interface ApolloServerLocalClient {
-  query: (query: Query) => Promise<GraphQLResponse>
-  mutate: (mutation: Mutation) => Promise<GraphQLResponse>
-}
+import { SchemaLink } from '@apollo/client/link/schema'
+import { ApolloClient, InMemoryCache, NormalizedCacheObject } from '@apollo/client'
 
 export class GraphqlLocalClient {
-  static client: ApolloServerLocalClient
+  static client: ApolloClient<NormalizedCacheObject>
 
   static init(schema, app) {
-    const resolve = async ({ query, mutation, variables, context }) => {
-      // Create a new Apollo Server for each request
-      const server = new ApolloServerBase({
+    GraphqlLocalClient.client = new ApolloClient({
+      cache: new InMemoryCache(),
+      link: new SchemaLink({
         schema,
-        context: {
-          // ⚠️ Note: here you should construct your GraphQL
-          // context! When calling the query/mutation, I
-          // usually like to override some properties (eg the
-          // authed user which I attach to the context). Here
-          // is where you need to put all your default GraphQL
-          // context data. Eg dataloaders etc.
-          ...context,
-          app
+        context: (obj, args, context, info) => {
+          return obj.getContext()
         }
       })
-
-      const executeOperation = server.executeOperation.bind(server)
-      const operation = query || mutation
-      if (!operation || (!!query && !!mutation)) {
-        throw new Error('Either query or mutation must be passed, but not both')
-      }
-
-      // Execute the actual operation
-      const res = await executeOperation({
-        variables,
-        query: typeof operation === 'string' ? operation : print(operation)
-      })
-
-      // Throw an error with all the messages of the
-      // errors to make them easy to match using Jest
-      if (!!res.errors && !!res.errors.length) {
-        const message = res.errors.map(error => error.message).join('\n')
-        throw new Error(message)
-      }
-
-      return res
-    }
-
-    GraphqlLocalClient.client = { query: resolve, mutate: resolve }
+    })
   }
 }

package/server/routers/global-router.ts

@@ -10,6 +10,14 @@ export const globalPrivateRouter = new Router()
 /* even though global private router, catch domain for information */
 globalPrivateRouter.use(domainMiddleware)
 
+if (process.env.NODE_ENV != 'production') {
+  globalPublicRouter.get('/graphql', async (context, next) => {
+    const initialEndpoint = context.request.href
+
+    await context.render('graphql', { initialEndpoint })
+  })
+}
+
 globalPublicRouter.get('/dependencies', async (context, next) => {
   const { dependencyGraph } = require('@things-factory/env')
 

package/server/routers/graphql-router.ts

@@ -0,0 +1,3 @@
+import Router from 'koa-router'
+
+export const graphqlRouter = new Router()

package/server/routers/index.ts

@@ -1,2 +1,3 @@
 export * from './global-router'
 export * from './domain-router'
+export * from './graphql-router'

package/server/server-dev.ts

@@ -4,8 +4,11 @@
 process.env.NODE_ENV = 'development'
 process.setMaxListeners(0)
 
-import { ApolloServerPluginDrainHttpServer, ApolloServerPluginLandingPageLocalDefault } from 'apollo-server-core'
-import { ApolloServer } from 'apollo-server-koa'
+import { ApolloServer } from '@apollo/server'
+import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer'
+import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default'
+
+import { koaMiddleware } from '@as-integrations/koa'
 import bytesFormat from 'bytes'
 import graphqlUploadKoa from 'graphql-upload/graphqlUploadKoa.js'
 import { useServer } from 'graphql-ws/lib/use/ws'
@@ -25,7 +28,13 @@ import { config, loader, logger, orderedModuleNames } from '@things-factory/env'
 
 import { GraphqlLocalClient } from './graphql-local-client'
 import { databaseInitializer } from './initializers/database'
-import { domainPrivateRouter, domainPublicRouter, globalPrivateRouter, globalPublicRouter } from './routers'
+import {
+  domainPrivateRouter,
+  domainPublicRouter,
+  globalPrivateRouter,
+  globalPublicRouter,
+  graphqlRouter
+} from './routers'
 import { schema } from './schema'
 import { Domain } from './service'
 import { EntityManager } from 'typeorm'
@@ -176,16 +185,7 @@ const bootstrap = async () => {
       logger.error(error)
       return error
     },
-    formatResponse: response => {
-      return response
-    },
-    context: async ({ connection, ctx }) => {
-      if (connection) {
-        return connection.context
-      } else {
-        return ctx
-      }
-    },
+    introspection: true,
     csrfPrevention: true,
     plugins: [
       // Proper shutdown for the HTTP server.
@@ -200,8 +200,11 @@ const bootstrap = async () => {
           }
         }
       },
+      // TODO make this landing page work
       ApolloServerPluginLandingPageLocalDefault({
-        embed: true
+        footer: false,
+        embed: true,
+        includeCookies: true
       })
     ],
     cache: 'bounded'
@@ -241,9 +244,6 @@ const bootstrap = async () => {
   })
 
   app.use(koaBodyParser(bodyParserOption))
-  app.use(graphqlUploadKoa(fileUploadOption))
-
-  server.applyMiddleware({ app, path: '/graphql' })
 
   /* routers */
   process.emit('bootstrap-module-global-public-route' as any, app, globalPublicRouter)
@@ -261,6 +261,18 @@ const bootstrap = async () => {
     .use(domainPrivateRouter.routes())
     .use(domainPrivateRouter.allowedMethods())
 
+  /* Graphql Upload's multipart/form-data handling affects the restful file upload feature, so it should be placed after the routers configuration. */
+  app.use(graphqlUploadKoa(fileUploadOption))
+
+  graphqlRouter.post(
+    '/graphql',
+    koaMiddleware(server, {
+      context: async ({ ctx }) => ctx
+    })
+  )
+  app.use(graphqlRouter.routes())
+  app.use(graphqlRouter.allowedMethods())
+
   /* should follow this order : history-fallback => webpack-middleware => koaStatic */
   app.use(historyApiFallback({ whiteList: [] }))
 
@@ -273,8 +285,8 @@ const bootstrap = async () => {
   )
 
   httpServer.listen({ port: PORT }, () => {
-    logger.info(`🚀 Server ready at http://0.0.0.0:${PORT}${server.graphqlPath}`)
-    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}${server.graphqlPath}`)
+    logger.info(`🚀 Server ready at http://0.0.0.0:${PORT}/graphql`)
+    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}/graphql`)
 
     process.emit('bootstrap-module-start' as any, { app, config, builtSchema, httpServer } as any)
   })

package/server/server.ts

@@ -4,8 +4,11 @@
 process.env.NODE_ENV = 'production'
 process.setMaxListeners(0)
 
-import { ApolloServerPluginDrainHttpServer, ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core'
-import { ApolloServer } from 'apollo-server-koa'
+import { ApolloServer } from '@apollo/server'
+import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer'
+import { ApolloServerPluginLandingPageProductionDefault } from '@apollo/server/plugin/landingPage/default'
+import { koaMiddleware } from '@as-integrations/koa'
+
 import bytesFormat from 'bytes'
 import graphqlUploadKoa from 'graphql-upload/graphqlUploadKoa.js'
 import { useServer } from 'graphql-ws/lib/use/ws'
@@ -24,7 +27,13 @@ import { config, loader, logger, orderedModuleNames } from '@things-factory/env'
 
 import { GraphqlLocalClient } from './graphql-local-client'
 import { databaseInitializer } from './initializers/database'
-import { domainPrivateRouter, domainPublicRouter, globalPrivateRouter, globalPublicRouter } from './routers'
+import {
+  domainPrivateRouter,
+  domainPublicRouter,
+  globalPrivateRouter,
+  globalPublicRouter,
+  graphqlRouter
+} from './routers'
 import { schema } from './schema'
 
 process.on('uncaughtException', error => {
@@ -153,20 +162,12 @@ const bootstrap = async () => {
       logger.error(error)
       return error
     },
-    formatResponse: response => {
-      // logger.info('response %s', JSON.stringify(response, null, 2))
-      return response
-    },
     introspection: true,
-    context: async ({ connection, ctx }) => {
-      if (connection) {
-        return connection.context
-      } else {
-        return ctx
-      }
-    },
+    csrfPrevention: true,
     plugins: [
+      // Proper shutdown for the HTTP server.
       ApolloServerPluginDrainHttpServer({ httpServer }),
+      // Proper shutdown for the WebSocket server.
       {
         async serverWillStart() {
           return {
@@ -175,7 +176,12 @@ const bootstrap = async () => {
             }
           }
         }
-      }
+      },
+      // TODO make this landing page work
+      ApolloServerPluginLandingPageProductionDefault({
+        graphRef: 'my-graph-id@my-graph-variant',
+        footer: false
+      })
     ],
     cache: 'bounded'
   })
@@ -200,9 +206,6 @@ const bootstrap = async () => {
   })
 
   app.use(koaBodyParser(bodyParserOption))
-  app.use(graphqlUploadKoa(fileUploadOption))
-
-  server.applyMiddleware({ app, path: '/graphql' })
 
   /* routers */
   process.emit('bootstrap-module-global-public-route' as any, app, globalPublicRouter)
@@ -220,6 +223,18 @@ const bootstrap = async () => {
     .use(domainPrivateRouter.routes())
     .use(domainPrivateRouter.allowedMethods())
 
+  /* Graphql Upload's multipart/form-data handling affects the restful file upload feature, so it should be placed after the routers configuration. */
+  app.use(graphqlUploadKoa(fileUploadOption))
+
+  graphqlRouter.post(
+    '/graphql',
+    koaMiddleware(server, {
+      context: async ({ ctx }) => ctx
+    })
+  )
+  app.use(graphqlRouter.routes())
+  app.use(graphqlRouter.allowedMethods())
+
   /* should follow this order : history-fallback => koaStatic */
   app.use(historyApiFallback({ whiteList: [] }))
 
@@ -230,8 +245,8 @@ const bootstrap = async () => {
   )
 
   httpServer.listen({ port: PORT }, () => {
-    logger.info(`🚀 Server ready at http://0.0.0.0:${PORT}${server.graphqlPath}`)
-    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}${server.graphqlPath}`)
+    logger.info(`🚀 Server ready at http://0.0.0.0:${PORT}/graphql`)
+    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}/graphql`)
 
     process.emit('bootstrap-module-start' as any, { app, config, builtSchema, httpServer } as any)
   })

package/views/graphql.html

@@ -0,0 +1,15 @@
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
+<div style="width: 100%; height: 100%" id="embedded-sandbox"></div>
+<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
+<script>
+  new window.EmbeddedSandbox({
+    target: '#embedded-sandbox',
+    initialEndpoint: '<%- initialEndpoint %>',
+    includeCookies: true
+  })
+</script>