feat(esm): Support ESM in GQL Realtime setup and generation (#375)

Author: Tobbe

packages/cli/src/commands/generate/realtime/__tests__/realtimeHandler.test.ts

@@ -8,6 +8,7 @@ import { handler } from '../realtimeHandler.js'
 const mocks = vi.hoisted(() => ({
   realtimeTs: '',
   serverTs: '',
+  isEsm: false,
   writtenFiles: {} as Record<string, string>,
 }))
 
@@ -57,6 +58,7 @@ vi.mock('@cedarjs/project-config', () => ({
   },
   getConfig: () => ({ experimental: { streamingSsr: { enabled: false } } }),
   resolveFile: (path: string) => path,
+  projectIsEsm: () => mocks.isEsm,
 }))
 
 beforeEach(() => {
@@ -65,6 +67,7 @@ beforeEach(() => {
   vi.spyOn(process, 'exit').mockImplementation(() => void 0 as never)
   mocks.realtimeTs = 'export const realtime: RedwoodRealtimeOptions = {}'
   mocks.serverTs = 'export const serverFile: RedwoodServerFileOptions = {}'
+  mocks.isEsm = false
 })
 
 afterEach(() => {
@@ -122,4 +125,18 @@ describe('realtimeHandler', () => {
       "pubSub.subscribe('Foobar', id)",
     )
   })
+
+  it('should use the correct graphql-tag import in ESM projects', async () => {
+    mocks.isEsm = true
+
+    await handler({
+      name: 'foobar',
+      type: 'subscription',
+      silent: true,
+    })
+
+    expect(mocks.writtenFiles['foobar/foobar.ts']).toMatch(
+      "import { gql } from 'graphql-tag'",
+    )
+  })
 })

packages/cli/src/commands/generate/realtime/realtimeHandler.js

@@ -7,6 +7,7 @@ import pluralize, { singular } from 'pluralize'
 import prompts from 'prompts'
 
 import { generate as generateTypes } from '@cedarjs/internal/dist/generate/generate'
+import { projectIsEsm } from '@cedarjs/project-config'
 import { errorTelemetry } from '@cedarjs/telemetry'
 
 // Move this check out of experimental when server file is moved as well
@@ -144,6 +145,18 @@ export async function handler({ name, type, force, verbose, silent }) {
                 exampleSubscriptionTemplateContent,
               )
 
+          let blankTemplateContent = await generateTemplate(
+            setupScriptContent,
+            templateVariables(name),
+          )
+
+          if (projectIsEsm()) {
+            blankTemplateContent = blankTemplateContent.replace(
+              "import gql from 'graphql-tag'",
+              "import { gql } from 'graphql-tag'",
+            )
+          }
+
           // write all files
           return [
             writeFile(
@@ -160,16 +173,9 @@ export async function handler({ name, type, force, verbose, silent }) {
                 overwriteExisting: force,
               },
             ),
-            writeFile(
-              exampleFile,
-              await generateTemplate(
-                setupScriptContent,
-                templateVariables(name),
-              ),
-              {
-                overwriteExisting: force,
-              },
-            ),
+            writeFile(exampleFile, blankTemplateContent, {
+              overwriteExisting: force,
+            }),
           ]
         },
       },

packages/cli/src/commands/setup/realtime/realtimeHandler.js

@@ -5,6 +5,7 @@ import { Listr } from 'listr2'
 
 import { addApiPackages } from '@cedarjs/cli-helpers'
 import { generate as generateTypes } from '@cedarjs/internal/dist/generate/generate'
+import { projectIsEsm } from '@cedarjs/project-config'
 import { errorTelemetry } from '@cedarjs/telemetry'
 
 import c from '../../../lib/colors.js'
@@ -61,7 +62,7 @@ export async function handler({ force, includeExamples, verbose }) {
         title: 'Adding Countdown example subscription ...',
         enabled: () => includeExamples,
         task: async () => {
-          const exampleSubscriptionTemplateContent = fs.readFileSync(
+          let exampleSubscriptionTemplateContent = fs.readFileSync(
             path.resolve(
               import.meta.dirname,
               'templates',
@@ -72,6 +73,14 @@ export async function handler({ force, includeExamples, verbose }) {
             'utf-8',
           )
 
+          if (projectIsEsm()) {
+            exampleSubscriptionTemplateContent =
+              exampleSubscriptionTemplateContent.replace(
+                "import gql from 'graphql-tag'",
+                "import { gql } from 'graphql-tag'",
+              )
+          }
+
           const exampleFile = path.join(
             redwoodPaths.api.subscriptions,
             'countdown',
@@ -142,17 +151,25 @@ export async function handler({ force, includeExamples, verbose }) {
 
           // subscription
 
-          const exampleSubscriptionTemplateContent = fs.readFileSync(
+          let exampleSubscriptionTemplateContent = fs.readFileSync(
             path.resolve(
               import.meta.dirname,
               'templates',
               'subscriptions',
               'newMessage',
-              `newMessage.ts.template`,
+              'newMessage.ts.template',
             ),
             'utf-8',
           )
 
+          if (projectIsEsm()) {
+            exampleSubscriptionTemplateContent =
+              exampleSubscriptionTemplateContent.replace(
+                "import gql from 'graphql-tag'",
+                "import { gql } from 'graphql-tag'",
+              )
+          }
+
           const exampleFile = path.join(
             redwoodPaths.api.subscriptions,
             'newMessage',