TanStack•10mo ago•

9 replies

urgent-maroon

Suspense around Outlets

I am using Apollo Client with Tanstack Router. I have wrapped an

<Outlet />

<Outlet />

in a

<Suspense>

<Suspense>

and I am using

useReadQuery

useReadQuery

to receive preloaded data from the

loader

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.

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>
  );
}

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 />;
}

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

route.tsx

file. However when I pass down the

dealQueryRef

dealQueryRef

to the

<DealInfo />

<DealInfo />

component, wrap it in a

<Suspense>

<Suspense>

and call

useReadQuery

useReadQuery

from inside the fallback shows up correctly in the

$dealId.tsx

$dealId.tsx

route.

Perhaps @jerelmiller might be of assistance as well.

Apollo GraphQL Docs

Suspense

TanStack•10mo ago•

9 replies

urgent-maroon

Suspense around Outlets

I am using Apollo Client with Tanstack Router. I have wrapped an

<Outlet />

<Outlet />

in a

<Suspense>

<Suspense>

and I am using

useReadQuery

useReadQuery

to receive preloaded data from the

loader

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.

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>
  );
}

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 />;
}

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

route.tsx

file. However when I pass down the

dealQueryRef

dealQueryRef

to the

<DealInfo />

<DealInfo />

component, wrap it in a

<Suspense>

<Suspense>

and call

useReadQuery

useReadQuery

from inside the fallback shows up correctly in the

$dealId.tsx

$dealId.tsx

route.

Perhaps @jerelmiller might be of assistance as well.

Apollo GraphQL Docs

Suspense

Suspense around Outlets

Suspense around Outlets

Similar Threads

Similar Threads

Similar Threads