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

Author: dac09

packages/web/jest.config.js

@@ -8,6 +8,10 @@ module.exports = {
         '**/*.test.+(ts|tsx|js|jsx)',
         '!**/__typetests__/*.+(ts|tsx|js|jsx)',
       ],
+      globals: {
+        // Required for code that use experimental flags
+        RWJS_ENV: {},
+      },
     },
     {
       displayName: {

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,20 @@
-import { OperationVariables } from '@apollo/client'
+import type {
+  OperationVariables,
+  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
+ *
+ * Do not import types for hooks directly from Apollo here, unless it is an Apollo specific hook.
+ */
+
 type DefaultUseQueryType = <
   TData = any,
   TVariables extends OperationVariables = GraphQLOperationVariables
@@ -24,14 +38,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 +79,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`.'
+    )
+  },
+
+  useReadQuery: () => {
+    throw new Error(
+      'You must register a useReadQuery hook via the `GraphQLHooksProvider`.'
+    )
+  },
 })
 
 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 +127,9 @@ export const GraphQLHooksProvider = <
   useQuery,
   useMutation,
   useSubscription,
+  useSuspenseQuery,
+  useBackgroundQuery,
+  useReadQuery,
   children,
 }: GraphQlHooksProviderProps<TuseQuery, TuseMutation>) => {
   return (
@@ -82,6 +138,9 @@ export const GraphQLHooksProvider = <
         useQuery,
         useMutation,
         useSubscription,
+        useSuspenseQuery,
+        useBackgroundQuery,
+        useReadQuery,
       }}
     >
       {children}
@@ -127,3 +186,29 @@ export function useSubscription<
     TVariables
   >(query, options)
 }
+
+export function useSuspenseQuery<
+  TData = any,
+  TVariables extends OperationVariables = GraphQLOperationVariables
+>(
+  query: DocumentNode,
+  options?: GraphQLSuspenseQueryHookOptions<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/CellCacheContext.tsx packages/web/src/components/cell/CellCacheContext.tsx

@@ -1,11 +1,18 @@
 import React from 'react'
 
-import type { CellFailureProps } from './createCell'
+import type { CellFailureProps } from './cellTypes'
 
-type CellErrorBoundaryProps = {
+export type FallbackProps = {
+  error: QueryOperationResult['error']
+  resetErrorBoundary: () => void
+}
+
+export 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>
+  renderFallback: (
+    fbProps: FallbackProps
+  ) => React.ReactElement<CellFailureProps>
   children: React.ReactNode
 }
 
@@ -29,21 +36,24 @@ export class CellErrorBoundary extends React.Component<
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     // @TODO do something with this?
-    console.log(error, errorInfo)
+    console.log('Cell failure: ', {
+      error,
+      errorInfo,
+    })
   }
 
   render() {
-    const { fallback: Fallback } = this.props
+    // The fallback is constructed with all the props required, except error and errorCode
+    // in createSusepndingCell.tsx
+    const { renderFallback } = this.props
+
     if (this.state.hasError) {
-      return (
-        <Fallback
-          error={this.state.error}
-          errorCode={
-            this.state.error?.graphQLErrors?.[0]?.extensions?.['code'] as string
-          }
-          // @TODO (STREAMING) query-result not available here
-        />
-      )
+      return renderFallback({
+        error: this.state.error,
+        resetErrorBoundary: () => {
+          this.setState({ hasError: false, error: undefined })
+        },
+      })
     }
 
     return this.props.children