Merge pull request #1187 from serlo/fix-playground

fix: Fix import of graphql playground

package.json

@@ -61,7 +61,9 @@
     "stop:enmeshed": "docker-compose -f enmeshed/docker-compose.yml down",
     "stop:redis": "docker-compose stop",
     "test": "jest --config jest.config.cjs --forceExit",
-    "test:docker:server": "curl --verbose -H 'Content-type: application/json' --data '{\"query\": \"query { version }\" }' http://localhost:3001/graphql",
+    "test:docker:server": "run-s \"test:docker:server:*\"",
+    "test:docker:server:playground": "curl --verbose http://localhost:3001/___graphql | grep '<title>GraphQL Playground</title>'",
+    "test:docker:server:graphql": "curl --verbose -H 'Content-type: application/json' --data '{\"query\": \"query { version }\" }' http://localhost:3001/graphql",
     "test:docker:swr-queue-worker": "curl --verbose http://localhost:3030/.well-known/health | grep OK",
     "update-version": "./scripts/update_version.sh"
   },

packages/server/package.json

@@ -47,6 +47,7 @@
     "babel-plugin-module-resolver": "^5.0.0",
     "basic-auth": "^2.0.1",
     "bull-arena": "^4.1.0",
+    "default-import": "^1.1.5",
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "fp-ts": "^2.16.1",

packages/server/src/internals/server/graphql-middleware.ts

@@ -3,7 +3,7 @@ import { expressMiddleware } from '@apollo/server/express4'
 import { ApolloServerPluginLandingPageDisabled } from '@apollo/server/plugin/disabled'
 import { Express, json } from 'express'
 import { GraphQLError, GraphQLFormattedError } from 'graphql'
-import createPlayground from 'graphql-playground-middleware-express'
+import createPlayground_ from 'graphql-playground-middleware-express'
 import * as t from 'io-ts'
 import jwt from 'jsonwebtoken'
 import * as R from 'ramda'
@@ -20,6 +20,7 @@ import { Context } from '~/internals/graphql'
 import { createSentryPlugin } from '~/internals/sentry'
 import { SwrQueue } from '~/internals/swr-queue'
 import { schema } from '~/schema'
+import { useDefaultImport } from '~/utils'
 
 const SessionDecoder = t.type({
   identity: IdentityDecoder,
@@ -39,6 +40,7 @@ export async function applyGraphQLMiddleware({
   const graphQLPath = '/graphql'
   const environment = { cache, swrQueue, authServices }
   const server = new ApolloServer<Context>(getGraphQLOptions())
+  const createPlayground = await useDefaultImport(createPlayground_)
   await server.start()
 
   app.use(json({ limit: '2mb' }))

packages/server/src/utils.ts

@@ -7,3 +7,26 @@ export function isDefined<A>(value?: A | null): value is A {
 export function isDateString(text: string) {
   return !isNaN(new Date(text).getDate())
 }
+
+/**
+ * Some CommonJS libraries do not properly export a default value (see
+ * https://www.npmjs.com/package/default-import for an example). This function
+ * extracts the default value from such libraries only iff we are currently
+ * in ESM mode.
+ *
+ * Note: Once also our tests run in ESM mode we should be able to delete this
+ * function and use `default-import` as a static import.
+ */
+export async function useDefaultImport<A>(value: A): Promise<A> {
+  // In our tests we are still using the CommonJS format
+  // where loading `default-import` would result in an error.
+  // However in CommonJS no changes are necessary.
+  if (typeof jest === 'object') return value
+
+  // Since `default-import` is a ESM only library do not import it statically
+  // because otherwise we would get an error in CommonJS runtime mode.
+  const { defaultImport } = await import('default-import')
+
+  // Let's ignore this error for now...
+  return defaultImport(value) as A
+}

yarn.lock

@@ -4112,6 +4112,7 @@ __metadata:
     basic-auth: ^2.0.1
     bee-queue: ^1.7.1
     bull-arena: ^4.1.0
+    default-import: ^1.1.5
     dotenv: ^16.3.1
     express: ^4.18.2
     fp-ts: ^2.16.1