Using useBgQuery and useReadQuery to construct a Redwood Cell

createSuspendingCell.tsx

import { QueryReference, UseBackgroundQueryResult, useBackgroundQuery, useReadQuery } from "@apollo/client"
import type { DocumentNode } from "graphql"
import { Suspense } from "react"
import { CellErrorBoundary } from "./CellErrorBoundary.tsx"

interface Cell {
  QUERY: DocumentNode,
  Success: React.FC,
  Loading: React.FC,
  Failure: React.FC,
}

type DataObject = { [key: string]: unknown }
type BgQueryResult = UseBackgroundQueryResult[1]

interface SuperSuccessProps {
  queryRef: QueryReference,
  queryResult: BgQueryResult,
  userProps: any
}

const createSuspendingCell = (cell: Cell) => {
  const SuperSuccess = ({ queryRef, queryResult, userProps }: SuperSuccessProps) => {
    // const { data, client, error, fetchMore, networkStatus, refetch, subscribeToMore } = useSuspenseQuery(cell.QUERY)

    // @ts-expect-error Cant be bothered right now
    const { data } = useReadQuery<DataObject>(queryRef);

    const { Success } = cell

    return (<Success {...data} {...userProps} queryResult={queryResult} />)
  }

  return (cellProps: Record<any, any>) => {
    const [queryRef, queryResult] = useBackgroundQuery(cell.QUERY)

    const { Failure, Loading } = cell

    return (
      <CellErrorBoundary fallback={Failure} queryResult={queryResult}>
        {/* @ts-expect-error Canot be bothered right now */}
        <Suspense fallback={<Loading queryResult={queryResult} />}>
          <SuperSuccess queryRef={queryRef} queryResult={queryResult} userProps={cellProps} />
        </Suspense>
      </CellErrorBoundary>
    );

  }

}

export default createSuspendingCell