feature: Support GraphQL Subscriptions on web side

[dthyresson]

This PR includes changes needed to support use of GraphQL Subscriptions on the web side of a RedwoodJS project.

Note a project must be running via yarn rw serve and have the Redwood Fastify GraphQL Server properly configured (and be using Redwood canary for v6). Won't work in serverless or yarn rw dev

For example:

  await fastify.register(redwoodFastifyGraphQLServer, {
    loggerConfig: {
      logger: logger,
      options: { query: true, data: true, level: 'trace' },
    },
    graphiQLEndpoint: '/.redwood/functions/graphql', // 👈 this mimics the location of the classic handler function
    sdls,
    services,
    directives,
    subscriptions,
    allowedOperations: [
      OperationTypeNode.SUBSCRIPTION,
      OperationTypeNode.QUERY,
      OperationTypeNode.MUTATION,
    ],
    allowIntrospection: true,
    allowGraphiQL: true,
  })

• Add code gen options to look for subscriptions inside the api/src/subscriptions/** directory so they gen included in the generated GraphQL schema
• Adds useSubscription GraphQL hook to GraphQLHooksProvider so can import useSubscription from @redwoodjs/web

import { useSubscription } from '@redwoodjs/web'

const COUNTDOWN_SUBSCRIPTION = gql`
  subscription OnTheFinalCountdown {
    countdown(from: 1000, interval: 10)
  }
`

function FinalCountdown() {
  const { data, loading } = useSubscription(COUNTDOWN_SUBSCRIPTION, {
    variables: {},
  })
  console.log(data)
  return <h4>Duh dah dah dah dah!: {!loading && data.countdown}</h4>
}

This allows Subscription to be used and live query to run on server, but there is one remaining issue in that the @live directive is not part of the GraphQL schema that is generated.

While it would be easy to simply add this to the redwood root schema, I think it would be better to add the sdl types to create the directive use a yarn rw exp setup realtime cli command.

In short, the current code gen and code file loader only extracts the gel pluck and string interpolation isn't supported, so the schema won't be loaded to generate. Thus a command will be able to output the live directive better (I think).

The PR lets you use subs and live queries from pages and cells, but linting will show a warning for anything that uses @live at the moment.

[replay-io]

19 replays were recorded for 76fcf6f.

0 Failed

19 Passed

• requireAuth graphql checks
• useAuth hook, auth redirects checks

  locator.waitFor: Target closed
  =========================== logs ===========================
  waiting for locator('text=Username `testuser@bazinga.com` already in use') to be visible
  ============================================================

• Check that a specific blog post is prerendered
• Check that about is prerendered
• Check that homepage is prerendered
• Check that meta-tags are rendering the correct dynamic data
• Check that rehydration works for page not wrapped in Set
• Check that rehydration works for page with Cell in Set
• Check that rehydration works for page with code split chunks
• Check that you can navigate from home page to specific blog post
• Waterfall prerendering (nested cells)
• RBAC: Admin user should be able to delete contacts
• RBAC: Should not be able to delete contact as non-admin user

  page.waitForNavigation: Navigation failed because page was closed!
  =========================== logs ===========================
  waiting for navigation to "**/" until "load"
  ============================================================

• Smoke test with dev server
• Smoke test with rw serve
• Loads Cell mocks when Cell is nested in another story
• Loads Cell Stories
• Loads MDX Stories
• Mocks current user, and updates UI while dev server is running

View test run on Replay ↗︎

[jtoar]

@dthyresson looks good!