From 0800e023d6703446b0b31b278b8f7d17a1d4e401 Mon Sep 17 00:00:00 2001 From: Daniel Choudhury Date: Thu, 31 Aug 2023 13:53:18 +0700 Subject: [PATCH 1/4] Update comments to QueryResult type to explain status of missing apis --- .../web/src/components/cell/cellTypes.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/web/src/components/cell/cellTypes.tsx b/packages/web/src/components/cell/cellTypes.tsx index fa352cc3805d..b4fad433ce60 100644 --- a/packages/web/src/components/cell/cellTypes.tsx +++ b/packages/web/src/components/cell/cellTypes.tsx @@ -208,18 +208,20 @@ export interface SuspenseCellQueryResult< networkStatus?: NetworkStatus called: boolean // can we assume if we have a queryRef its called? - // Stuff not here: - // observable: ObservableQuery - // previousData?: TData, May not be relevant anymore. + // Stuff not here compared to useQuery: + // observable: ObservableQuery // Lenz: internal implementation detail, should not be required anymore + // previousData?: TData, // emulating suspense, not required in the new Suspense model // ObservableQueryFields 👇 - // subscribeToMore ~ returned from useSuspenseQuery. What would users use this for? - // updateQuery - // refetch - // reobserve - // variables <~ variables passed to the query. Startup club have reported using this, but why? - // fetchMore - // startPolling <~ Apollo team are not ready to expose Polling yet + // subscribeToMore ~ returned from useSuspenseQuery but not useReadQuery. Apollo team **may** expose from useReadQuery. + // updateQuery <~ May not be necessary in the Suspense model + // refetch ~ <~ refetch signature is different in useQuery vs useSuspenseQuery. Apollo team need an internal discussion. + // reobserve <~ avoid + // variables <~ variables passed to the query, useful if you updated the variables using updateQuery or refetch. Apollo team need an internal discussion. + + // Polling: Apollo team are not ready to expose Polling yet. Unlikely to be shipped in the next few months. + // But possible to re-implement this in a different way using setInternal or client.startPolling + // startPolling // stopPolling // ~~~ } From 44b44310faf30894272df1d465c98cf866ec0473 Mon Sep 17 00:00:00 2001 From: Daniel Choudhury Date: Thu, 31 Aug 2023 13:53:31 +0700 Subject: [PATCH 2/4] Dont suspend cell if no loading component supplied --- .../components/cell/createSuspendingCell.tsx | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/packages/web/src/components/cell/createSuspendingCell.tsx b/packages/web/src/components/cell/createSuspendingCell.tsx index e4574ff7b435..589b1db8dfe2 100644 --- a/packages/web/src/components/cell/createSuspendingCell.tsx +++ b/packages/web/src/components/cell/createSuspendingCell.tsx @@ -44,7 +44,7 @@ export function createSuspendingCell< }), afterQuery = (data) => ({ ...data }), isEmpty = isDataEmpty, - Loading = () => <>Loading..., + Loading, Failure, Empty, Success, @@ -125,17 +125,35 @@ export function createSuspendingCell< ) } - return ( - + const wrapInSuspenseIfLoadingPresent = ( + superSuccessElement: React.ReactNode, + LoadingComponent: typeof Loading + ) => { + if (!LoadingComponent) { + return superSuccessElement + } + + return ( } + fallback={ + + } > + {superSuccessElement} + + ) + } + + return ( + + {wrapInSuspenseIfLoadingPresent( } suspenseQueryResult={suspenseQueryResult} - /> - + />, + Loading + )} ) } From 0663cefde76c9316ede9aa19989bc8575ac21862 Mon Sep 17 00:00:00 2001 From: Daniel Choudhury Date: Thu, 31 Aug 2023 14:56:17 +0700 Subject: [PATCH 3/4] Rename SuperSuccess -> SuspendingSuccess --- packages/web/src/components/cell/cellTypes.tsx | 2 +- packages/web/src/components/cell/createSuspendingCell.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/web/src/components/cell/cellTypes.tsx b/packages/web/src/components/cell/cellTypes.tsx index b4fad433ce60..91ac3f19dfef 100644 --- a/packages/web/src/components/cell/cellTypes.tsx +++ b/packages/web/src/components/cell/cellTypes.tsx @@ -180,7 +180,7 @@ export interface CreateCellProps { displayName?: string } -export type SuperSuccessProps = React.PropsWithChildren< +export type SuspendingSuccessProps = React.PropsWithChildren< Record > & { queryRef: QueryReference // from useBackgroundQuery diff --git a/packages/web/src/components/cell/createSuspendingCell.tsx b/packages/web/src/components/cell/createSuspendingCell.tsx index 589b1db8dfe2..5dbdcdc4d672 100644 --- a/packages/web/src/components/cell/createSuspendingCell.tsx +++ b/packages/web/src/components/cell/createSuspendingCell.tsx @@ -11,7 +11,7 @@ import { CellErrorBoundary, FallbackProps } from './CellErrorBoundary' import { CreateCellProps, DataObject, - SuperSuccessProps, + SuspendingSuccessProps, SuspenseCellQueryResult, } from './cellTypes' import { isDataEmpty } from './isCellEmpty' @@ -50,7 +50,7 @@ export function createSuspendingCell< Success, displayName = 'Cell', } = createCellProps - function SuperSuccess(props: SuperSuccessProps) { + function SuspendingSuccess(props: SuspendingSuccessProps) { const { queryRef, suspenseQueryResult, userProps } = props const { data, networkStatus } = useReadQuery(queryRef) const afterQueryData = afterQuery(data as DataObject) @@ -79,7 +79,7 @@ export function createSuspendingCell< ) } - SuperSuccess.displayName = displayName + SuspendingSuccess.displayName = displayName // @NOTE: Note that we are returning a HoC here! return (props: CellProps) => { @@ -147,7 +147,7 @@ export function createSuspendingCell< return ( {wrapInSuspenseIfLoadingPresent( - } suspenseQueryResult={suspenseQueryResult} From 7bf90f230e8015c3cdfe2d044375ca2a23ccb0f8 Mon Sep 17 00:00:00 2001 From: Daniel Choudhury Date: Thu, 31 Aug 2023 14:59:32 +0700 Subject: [PATCH 4/4] Rename elements too --- packages/web/src/components/cell/createSuspendingCell.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/web/src/components/cell/createSuspendingCell.tsx b/packages/web/src/components/cell/createSuspendingCell.tsx index 5dbdcdc4d672..e78d0dfd8088 100644 --- a/packages/web/src/components/cell/createSuspendingCell.tsx +++ b/packages/web/src/components/cell/createSuspendingCell.tsx @@ -126,11 +126,11 @@ export function createSuspendingCell< } const wrapInSuspenseIfLoadingPresent = ( - superSuccessElement: React.ReactNode, + suspendingSuccessElement: React.ReactNode, LoadingComponent: typeof Loading ) => { if (!LoadingComponent) { - return superSuccessElement + return suspendingSuccessElement } return ( @@ -139,7 +139,7 @@ export function createSuspendingCell< } > - {superSuccessElement} + {suspendingSuccessElement} ) }