Adds defer and stream examples to RT setup

packages/cli/src/commands/experimental/setupRealtimeHandler.js

@@ -246,6 +246,126 @@ export async function handler({ force, includeExamples, verbose }) {
           ]
         },
       },
+
+      {
+        title: 'Adding Defer example queries ...',
+        enabled: () => includeExamples,
+        task: () => {
+          // sdl
+
+          const exampleSdlTemplateContent = fs.readFileSync(
+            path.resolve(
+              __dirname,
+              'templates',
+              'defer',
+              'fastAndSlowFields',
+              `fastAndSlowFields.sdl.ts.template`
+            ),
+            'utf-8'
+          )
+
+          const sdlFile = path.join(
+            redwoodPaths.api.graphql,
+            `fastAndSlowFields.sdl.${isTypeScriptProject() ? 'ts' : 'js'}`
+          )
+
+          const sdlContent = ts
+            ? exampleSdlTemplateContent
+            : transformTSToJS(sdlFile, exampleSdlTemplateContent)
+
+          // service
+
+          const exampleServiceTemplateContent = fs.readFileSync(
+            path.resolve(
+              __dirname,
+              'templates',
+              'defer',
+              'fastAndSlowFields',
+              `fastAndSlowFields.ts.template`
+            ),
+            'utf-8'
+          )
+          const serviceFile = path.join(
+            redwoodPaths.api.services,
+            'fastAndSlowFields',
+            `fastAndSlowFields.${isTypeScriptProject() ? 'ts' : 'js'}`
+          )
+
+          const serviceContent = ts
+            ? exampleServiceTemplateContent
+            : transformTSToJS(serviceFile, exampleServiceTemplateContent)
+
+          // write all files
+          return [
+            writeFile(sdlFile, sdlContent, {
+              overwriteExisting: force,
+            }),
+            writeFile(serviceFile, serviceContent, {
+              overwriteExisting: force,
+            }),
+          ]
+        },
+      },
+
+      {
+        title: 'Adding Stream example queries ...',
+        enabled: () => includeExamples,
+        task: () => {
+          // sdl
+
+          const exampleSdlTemplateContent = fs.readFileSync(
+            path.resolve(
+              __dirname,
+              'templates',
+              'stream',
+              'alphabet',
+              `alphabet.sdl.ts.template`
+            ),
+            'utf-8'
+          )
+
+          const sdlFile = path.join(
+            redwoodPaths.api.graphql,
+            `alphabet.sdl.${isTypeScriptProject() ? 'ts' : 'js'}`
+          )
+
+          const sdlContent = ts
+            ? exampleSdlTemplateContent
+            : transformTSToJS(sdlFile, exampleSdlTemplateContent)
+
+          // service
+
+          const exampleServiceTemplateContent = fs.readFileSync(
+            path.resolve(
+              __dirname,
+              'templates',
+              'stream',
+              'alphabet',
+              `alphabet.ts.template`
+            ),
+            'utf-8'
+          )
+          const serviceFile = path.join(
+            redwoodPaths.api.services,
+            'alphabet',
+            `alphabet.${isTypeScriptProject() ? 'ts' : 'js'}`
+          )
+
+          const serviceContent = ts
+            ? exampleServiceTemplateContent
+            : transformTSToJS(serviceFile, exampleServiceTemplateContent)
+
+          // write all files
+          return [
+            writeFile(sdlFile, sdlContent, {
+              overwriteExisting: force,
+            }),
+            writeFile(serviceFile, serviceContent, {
+              overwriteExisting: force,
+            }),
+          ]
+        },
+      },
       {
         title: 'Adding config to redwood.toml...',
         task: (_ctx, task) => {

packages/cli/src/commands/experimental/templates/defer/fastAndSlowFields/fastAndSlowFields.sdl.template

@@ -0,0 +1,14 @@
+export const schema = gql`
+  type Query {
+    """
+    A field that resolves fast.
+    """
+    fastField: String! @skipAuth
+
+    """
+    A field that resolves slowly.
+    Maybe you want to @defer this field ;)
+    """
+    slowField(waitFor: Int! = 5000): String @skipAuth
+  }
+`

packages/cli/src/commands/experimental/templates/defer/fastAndSlowFields/fastAndSlowFields.ts.template

@@ -0,0 +1,17 @@
+import { Repeater } from '@redwoodjs/realtime'
+
+import { logger } from 'src/lib/logger'
+
+const wait = (time: number) =>
+  new Promise((resolve) => setTimeout(resolve, time))
+
+export const fastField = async () => {
+  await wait(100)
+  return 'I am speedyyy'
+}
+
+export const slowField = async (_, { waitFor = 5000 }) => {
+  logger.debug('waiting on slowField')
+  await wait(waitFor)
+  return 'I am slowey'
+}

packages/cli/src/commands/experimental/templates/realtime.ts.template

@@ -21,13 +21,16 @@ import subscriptions from 'src/subscriptions/**/*.{js,ts}'
  * Redwood Realtime
  *  - uses a publish/subscribe model to broadcast data to clients.
  *  - uses a store to persist Live Query and Subscription data.
+ *  - and enable defer and stream directives to improve latency
+ *    for clients by sending data the most important data as soon as it's ready.
  *
  * Redwood Realtime supports in-memory and Redis stores:
  * - In-memory stores are useful for development and testing.
  * - Redis stores are useful for production.
  *
  */
 export const realtime: RedwoodRealtimeOptions = {
+  enableDeferStream: true,
   subscriptions: {
     subscriptions,
     store: 'in-memory',

packages/cli/src/commands/experimental/templates/stream/alphabet/alphabet.sdl.template

@@ -0,0 +1,9 @@
+export const schema = gql`
+  type Query {
+    """
+    A field that spells out the letters of the alphabet
+    Maybe you want to @stream this field ;)
+    """
+    alphabet: [String!]! @skipAuth
+  }
+`

packages/cli/src/commands/experimental/templates/stream/alphabet/alphabet.ts.template

@@ -0,0 +1,30 @@
+import { Repeater } from '@redwoodjs/realtime'
+
+import { logger } from 'src/lib/logger'
+
+export const alphabet = async () => {
+  return new Repeater<string>(async (push, stop) => {
+    const values = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
+    const publish = () => {
+      const value = values.shift()
+
+      if (value) {
+        logger.debug({ value }, 'publishing')
+        push(value)
+      }
+
+      if (values.length === 0) {
+        stop()
+      }
+    }
+
+    const interval = setInterval(publish, 1000)
+
+    stop.then(() => {
+      logger.debug('cancel')
+      clearInterval(interval)
+    })
+
+    publish()
+  })
+}