TanStackT
TanStack•8mo ago•
9 replies
urgent-maroon

Suspense around Outlets

I am using Apollo Client with Tanstack Router. I have wrapped an <Outlet /> in a <Suspense> and I am using useReadQuery to receive preloaded data from the loader I would assume this would trigger the Suspense fallback based on this line from the Apollo documenation
The preload function returns a queryRef that is passed to useReadQuery to read the query data and suspend the component while loading.

Here is my example code

route.tsx
export const Route = createFileRoute('/_auth/priority')({
  component: Priority,
});

function Priority() {
  return (
    <div className="flex h-full gap-2">
        <PriorityList className="h-full" /> <-- These list items '<Link>' to the '/priority/$dealId' routes

      ...

      <div className="flex-1">
        <Suspense fallback={<div>Loading... from priority route</div>}>
          <Outlet /> <-- Display list item details 
        </Suspense>
      </div>
    </div>
  );
}


$dealId.tsx
export const Route = createFileRoute('/_auth/priority/$dealId')({
  loader: ({ params }) =>
    preloadQuery(DealQuery, {
      returnPartialData: true,
      variables: { dealId: params.dealId },
    }),
  component: RouteComponent,
});

function RouteComponent() {
  const dealQueryRef = Route.useLoaderData();
  const { data } = useReadQuery(dealQueryRef);
  
  return <DealInfo />;
}


This layout does not show my Suspense fallback in the route.tsx file. However when I pass down the dealQueryRef to the <DealInfo /> component, wrap it in a <Suspense> and call useReadQuery from inside the fallback shows up correctly in the $dealId.tsx route.

Perhaps @jerelmiller might be of assistance as well.
Apollo GraphQL Docs
Suspense
Suspense
Was this page helpful?