feat(streaming): Make Cells render on the server with useBackgroundQuery and useReadQuery

packages/web/apollo/suspense.js

@@ -0,0 +1,2 @@
+/* eslint-env es6, commonjs */
+module.exports = require('../dist/apollo/suspense')

packages/web/src/apollo/index.tsx

@@ -19,6 +19,9 @@ const {
   useQuery,
   useMutation,
   useSubscription,
+  useBackgroundQuery,
+  useReadQuery,
+  useSuspenseQuery,
   setLogVerbosity: apolloSetLogVerbosity,
 } = apolloClient
 
@@ -314,6 +317,9 @@ export const RedwoodApolloProvider: React.FunctionComponent<{
           useQuery={useQuery}
           useMutation={useMutation}
           useSubscription={useSubscription}
+          useBackgroundQuery={useBackgroundQuery}
+          useReadQuery={useReadQuery}
+          useSuspenseQuery={useSuspenseQuery}
         >
           {children}
         </GraphQLHooksProvider>

packages/web/src/apollo/suspense.tsx

@@ -3,7 +3,8 @@
  * This is a lift and shift of the original ApolloProvider
  * but with suspense specific bits. Look for @MARK to find bits I've changed
  *
- * Done this way, to avoid making changes breaking on main.
+ * Done this way, to avoid making changes breaking on main, due to the experimental-nextjs import
+ * Eventually we will have one ApolloProvider, not multiple.
  */
 
 import type {
@@ -24,6 +25,9 @@ import {
   NextSSRApolloClient,
   NextSSRInMemoryCache,
   useSuspenseQuery,
+  useBackgroundQuery,
+  useReadQuery,
+  useQuery,
 } from '@apollo/experimental-nextjs-app-support/ssr'
 
 import { UseAuth, useNoAuth } from '@redwoodjs/auth'
@@ -229,12 +233,12 @@ export const RedwoodApolloProvider: React.FunctionComponent<{
         logLevel={logLevel}
       >
         <GraphQLHooksProvider
-          // @MARK 👇 swapped useQuery for useSuspense query here
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error
-          useQuery={useSuspenseQuery}
+          useQuery={useQuery}
           useMutation={useMutation}
           useSubscription={useSubscription}
+          useSuspenseQuery={useSuspenseQuery}
+          useBackgroundQuery={useBackgroundQuery}
+          useReadQuery={useReadQuery}
         >
           {children}
         </GraphQLHooksProvider>

packages/web/src/apollo/typeOverride.ts

@@ -7,6 +7,8 @@ import type {
   OperationVariables,
   SubscriptionHookOptions,
   SubscriptionResult,
+  UseSuspenseQueryResult,
+  SuspenseQueryHookOptions,
 } from '@apollo/client'
 
 // @MARK: Override relevant types from Apollo here
@@ -36,6 +38,16 @@ declare global {
     TData,
     TVariables extends OperationVariables
   > extends SubscriptionHookOptions<TData, TVariables> {}
+
+  interface SuspenseQueryOperationResult<
+    TData = any,
+    TVariables extends OperationVariables = OperationVariables
+  > extends UseSuspenseQueryResult<TData, TVariables> {}
+
+  interface GraphQLSuspenseQueryHookOptions<
+    TData,
+    TVariables extends OperationVariables
+  > extends SuspenseQueryHookOptions<TData, TVariables> {}
 }
 
 export {}

packages/web/src/components/GraphQLHooksProvider.tsx

@@ -1,6 +1,19 @@
-import { OperationVariables } from '@apollo/client'
+import type {
+  OperationVariables,
+  SuspenseQueryHookOptions,
+  useBackgroundQuery as apolloUseBackgroundQuery,
+  useReadQuery as apolloUseReadQuery,
+} from '@apollo/client'
 import type { DocumentNode } from 'graphql'
 
+/**
+ * @NOTE
+ * The types QueryOperationResult, MutationOperationResult, SubscriptionOperationResult, and SuspenseQueryOperationResult
+ * are overridden in packages/web/src/apollo/typeOverride.ts. This was originally so that you could bring your own gql client.
+ *
+ * The default (empty) types are defined in packages/web/src/global.web-auto-imports.ts
+ */
+
 type DefaultUseQueryType = <
   TData = any,
   TVariables extends OperationVariables = GraphQLOperationVariables
@@ -24,14 +37,29 @@ type DefaultUseSubscriptionType = <
   subscription: DocumentNode,
   options?: GraphQLSubscriptionHookOptions<TData, TVariables>
 ) => SubscriptionOperationResult<TData, TVariables>
+
+type DefaultUseSuspenseType = <
+  TData = any,
+  TVariables extends OperationVariables = GraphQLOperationVariables
+>(
+  query: DocumentNode,
+  options?: GraphQLSuspenseQueryHookOptions<TData, TVariables>
+) => SuspenseQueryOperationResult<TData, TVariables>
+
 export interface GraphQLHooks<
   TuseQuery = DefaultUseQueryType,
   TuseMutation = DefaultUseMutationType,
-  TuseSubscription = DefaultUseSubscriptionType
+  TuseSubscription = DefaultUseSubscriptionType,
+  TuseSuspenseQuery = DefaultUseSuspenseType
 > {
   useQuery: TuseQuery
   useMutation: TuseMutation
   useSubscription: TuseSubscription
+  useSuspenseQuery: TuseSuspenseQuery
+  // @NOTE note that we aren't using typeoverride here.
+  // This is because useBackgroundQuery and useReadQuery are apollo specific hooks.
+  useBackgroundQuery: typeof apolloUseBackgroundQuery
+  useReadQuery: typeof apolloUseReadQuery
 }
 
 export const GraphQLHooksContext = React.createContext<GraphQLHooks>({
@@ -50,13 +78,37 @@ export const GraphQLHooksContext = React.createContext<GraphQLHooks>({
       'You must register a useSubscription hook via the `GraphQLHooksProvider`'
     )
   },
+  useSuspenseQuery: () => {
+    throw new Error(
+      'You must register a useSuspenseQuery hook via the `GraphQLHooksProvider`.'
+    )
+  },
+
+  //  These are apollo specific hooks!
+  useBackgroundQuery: () => {
+    throw new Error(
+      'You must register a useBackgroundQuery hook via the `GraphQLHooksProvider`. Make sure you are importing the correct Apollo provider in App.tsx'
+    )
+  },
+
+  useReadQuery: () => {
+    throw new Error(
+      'You must register a useReadQuery hook via the `GraphQLHooksProvider`. Make sure you are importing the correct Apollo provider in App.tsx'
+    )
+  },
 })
 
 interface GraphQlHooksProviderProps<
   TuseQuery = DefaultUseQueryType,
   TuseMutation = DefaultUseMutationType,
-  TuseSubscription = DefaultUseSubscriptionType
-> extends GraphQLHooks<TuseQuery, TuseMutation, TuseSubscription> {
+  TuseSubscription = DefaultUseSubscriptionType,
+  TuseSuspenseQuery = DefaultUseSuspenseType
+> extends GraphQLHooks<
+    TuseQuery,
+    TuseMutation,
+    TuseSubscription,
+    TuseSuspenseQuery
+  > {
   children: React.ReactNode
 }
 
@@ -74,6 +126,9 @@ export const GraphQLHooksProvider = <
   useQuery,
   useMutation,
   useSubscription,
+  useSuspenseQuery,
+  useBackgroundQuery,
+  useReadQuery,
   children,
 }: GraphQlHooksProviderProps<TuseQuery, TuseMutation>) => {
   return (
@@ -82,6 +137,9 @@ export const GraphQLHooksProvider = <
         useQuery,
         useMutation,
         useSubscription,
+        useSuspenseQuery,
+        useBackgroundQuery,
+        useReadQuery,
       }}
     >
       {children}
@@ -127,3 +185,29 @@ export function useSubscription<
     TVariables
   >(query, options)
 }
+
+export function useSuspenseQuery<
+  TData = any,
+  TVariables extends OperationVariables = GraphQLOperationVariables
+>(
+  query: DocumentNode,
+  options?: SuspenseQueryHookOptions<TData, TVariables>
+): SuspenseQueryOperationResult<TData, TVariables> {
+  return React.useContext(GraphQLHooksContext).useSuspenseQuery<
+    TData,
+    TVariables
+  >(query, options)
+}
+
+export const useBackgroundQuery: typeof apolloUseBackgroundQuery<any> = (
+  ...args
+) => {
+  // @TODO something about the apollo types here mean I need to override the return type
+  return React.useContext(GraphQLHooksContext).useBackgroundQuery(
+    ...args
+  ) as any
+}
+
+export const useReadQuery: typeof apolloUseReadQuery = (...args) => {
+  return React.useContext(GraphQLHooksContext).useReadQuery(...args)
+}

packages/web/src/components/CellErrorBoundary.tsx → packages/web/src/components/cell/CellErrorBoundary.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import type { CellFailureProps } from './createCell'
+import type { CellFailureProps } from './cellTypes'
 
 type CellErrorBoundaryProps = {
   // Note that the fallback has to be an FC, not a Node
   // because the error comes from this component's state
-  fallback: React.FC<CellFailureProps>
+  fallback?: React.FC<CellFailureProps>
   children: React.ReactNode
 }
 
@@ -33,15 +33,18 @@ export class CellErrorBoundary extends React.Component<
   }
 
   render() {
+    // The fallback is constructed with all the props required, except error and errorCode
+    // in createSusepndingCell.tsx
     const { fallback: Fallback } = this.props
-    if (this.state.hasError) {
+
+    // @TODO what happens when no Fallback supplied??
+    if (this.state.hasError && Fallback) {
       return (
         <Fallback
           error={this.state.error}
           errorCode={
             this.state.error?.graphQLErrors?.[0]?.extensions?.['code'] as string
           }
-          // @TODO (STREAMING) query-result not available here
         />
       )
     }