feature: Generate boilerplate to create RedwoodJS Realtime with GraphQL Live Queries or Subscriptions

[dthyresson]

This PR adds the ability to generate starter boilerplate to create a live query or a subscription for redwoodJS realtime with GraphQL.

Prerequisites and the the app is serverful (ie, uses the server file) and already has setup realtime via its setup command.

Note: This command is experimental.

Use

When run, you can chose from the options to stub out a Live Query or Subscription:

realtime-live-chat-demo main % yarn rw exp generate-realtime Sprocket
? What type of realtime event would you like to create? › - Use arrow-keys. Return to submit.
❯   Live Query
    Create a Live Query to watch for changes in data
    Subscription

and prompted to:

? Realtime is currently an experimental RedwoodJS feature. Continue? (y/N) › false

Then generation proceeds:

realtime-live-chat-demo main % yarn rw exp generate-realtime Sprocket --force
✔ What type of realtime event would you like to create? › Live Query
✔ Confirmation
✔ Checking for realtime environment prerequisites ...
↓ Adding sprocket example subscription ...
✔ Adding sprocket example live query ...
✔ Generating types ...

Note: You may need to manually restart GraphQL in VSCode to see the new types take effect.
------------------------------------------------------------------
 🧪 Experimental Feature 🧪
------------------------------------------------------------------
This is an experimental feature to: Setup the experimental RedwoodJS Realtime feature.

Please find documentation and links to provide feedback for setup-realtime at:
 -> https://community.redwoodjs.com/t/5002
------------------------------------------------------------------

Note: based on the event type selected, it will skip either LQ or Subscription templating.

realtime-live-chat-demo main % yarn rw exp generate-realtime Chat
✔ What type of realtime event would you like to create? › Subscription
✔ Confirmation
✔ Checking for realtime environment prerequisites ...
✔ Adding chat example subscription ...
↓ Adding chat example live query ...
✔ Generating types ...

Note: You may need to manually restart GraphQL in VSCode to see the new types take effect.
------------------------------------------------------------------
 🧪 Experimental Feature 🧪
------------------------------------------------------------------
This is an experimental feature to: Setup the experimental RedwoodJS Realtime feature.

Please find documentation and links to provide feedback for setup-realtime at:
 -> https://community.redwoodjs.com/t/5002

After Generating

The command will generate basic, SDL, service resolvers, and subscription types/handling needed.

For subscription, instructions how to test are provided:

/**
 * To test this Chat subscription, run the following in one GraphQL Playground to subscribe:
 *
 * subscription ListenToChatChannel {
 *   listenToChatChannel(id: "1") {
 *     body
 *     from
 *   }
 * }
 *
 *
 * And run the following in another GraphQL Playground to publish and send a new chat to the channel:
 *
 * mutation PublishToChatChannel {
 *   publishToChatChannel(input: {id: "1", from: "hello", body: "bob"}) {
 *     body
 *     from
 *   }
 * }
 */

As well as for Live Queries:

/**
 * To test this live query, run the following in the GraphQL Playground:
 *
 * query GetRecentWidgets @live {
 *  recentWidgets(id: "1") {
 *    items {
 *      amount
 *    }
 *    largestWidgetItem {
 *      amount
 *    }
 *    id
 *    title
 *   }
 * }
 *
 * And then make a related item with the following mutation:
 *
 * mutation CreateWidgetItem {
 *   createWidgetItem(input: {widgetId: "1", amount: 100}) {
 *     amount
 *   }
 * }
 */

[Josh-Walker-GM]

Tested this out and it's good. I've left a few questions and comments, none of them too serious.

[Josh-Walker-GM]

Should we have some sort of prompt or option to avoid generating the examples? I'm not that fussed about it just in case someone doesn't want the new sdls, services and subscriptions.

[dthyresson]

Good idea. Am implementing.

[Josh-Walker-GM]

Oh can you confirm if this PR would close #8594? This one seems to supersede that one?

[dthyresson]

Oh can you confirm if this PR would close #8594? This one seems to supersede that one?

Odd. How did I get 2 PRs. I believe this should be the latest and will close #8594.

[dthyresson]

@Josh-Walker-GM I think I have in all the suggestions, thanks!

I am having problems building locally at the moment:

     ✖    3/42 targets failed, including the following:
         - @redwoodjs/auth-clerk-api:build
         - @redwoodjs/api-server:build
         - @redwoodjs/graphql-server:build

So, I have not been able to test my updates yet.

I'll try to figure out why my build is not working properly, but if you have a chance to test with the latest and approve if ok, that would be a huge help.

Thanks.

[Josh-Walker-GM]

I checked this out locally and didn't have any errors. I see CI is failing but I don't really know why straight away.

I probably wasn't clear enough about the examples flag I wanted. I meant that the setup command should be able to not generate any examples. The flag you added was on the generate command. I was about to switch them over but realised the template file for lib/realtime.ts includes the

import type { NewMessageChannel } from 'src/subscriptions/newMessage/newMessage'

which is intrinsically linked to the examples.

I'd be happy to approve if we switch the example flag from the generate to the setup command. If you feel it'll be too much of a pain to have the setup command not generate examples then I'd be happy to approve it in it's existing state given this is still 'experimental'. I don't think this should get held up on little details. Let's get it out and get people playing with it 🚀

[dthyresson]

I checked this out locally and didn't have any errors. I see CI is failing but I don't really know why straight away.

I probably wasn't clear enough about the examples flag I wanted. I meant that the setup command should be able to not generate any examples. The flag you added was on the generate command. I was about to switch them over but realised the template file for lib/realtime.ts includes the

import type { NewMessageChannel } from 'src/subscriptions/newMessage/newMessage'

which is intrinsically linked to the examples.

I'd be happy to approve if we switch the example flag from the generate to the setup command. If you feel it'll be too much of a pain to have the setup command not generate examples then I'd be happy to approve it in it's existing state given this is still 'experimental'. I don't think this should get held up on little details. Let's get it out and get people playing with it 🚀

Ok let me double check. I got distracted with the build error and perhaps didn’t think through

[dthyresson]

I'd be happy to approve if we switch the example flag from the generate to the setup command

Thanks for catching that. I intended it to the the setup command but the exp are all so named so similar I picked the wrong one :)

As for

import type { NewMessageChannel } from 'src/subscriptions/newMessage/newMessage'

Yeah. Not ideal.

I thin I will lease as is for now since the default behavior makes them.

And then I can revisit with better regex of codemods to cleanup these templates if feedback shows.

Added a few comments to clarify temporarily.

@Josh-Walker-GM this look ok?