Tanstack Start, React Query, deferred loading, prefetch, streaming

I have been trying to achieve deferred loading for hours now and I cannot make it work.
Basically I have /dashboard/* routes that are only accessible to authenticated users.
So in my dashboard/route.tsx layout, I prefetch in the loader without awaiting and useSuspenseQuery in the layout.
Even this simple setup doesn't work. When I look at the network tab I can see a client call the /me trpc

export const Route = createFileRoute('/dashboard')({
  component: RouteComponent,
  loader: async ({ context }) => {
    context.queryClient.prefetchQuery({
      ...context.trpc.me.queryOptions(), // this query takes 4 seconds
      staleTime: Infinity,
    })
  },
})

function RouteComponent() {
  const trpc = useTRPC()
  const { data: me } = useSuspenseQuery({
    ...trpc.me.queryOptions(),
    staleTime: Infinity,
  })

  return <div>{me.email}</div>
}

export const Route = createFileRoute('/dashboard')({
  component: RouteComponent,
  loader: async ({ context }) => {
    context.queryClient.prefetchQuery({
      ...context.trpc.me.queryOptions(), // this query takes 4 seconds
      staleTime: Infinity,
    })
  },
})

function RouteComponent() {
  const trpc = useTRPC()
  const { data: me } = useSuspenseQuery({
    ...trpc.me.queryOptions(),
    staleTime: Infinity,
  })

  return <div>{me.email}</div>
}

What I am trying to achieve is showing a loading while the query resolves.

The documentation mention NextJS but not Tanstack Start.
For example, on some NextJS documentation they say you need shouldDehydrateQuery.
Do I need it for Tanstack Start ?

const queryClient = new QueryClient({
  defaultOptions: {
    dehydrate: {
      serializeData: superjson.serialize,
      shouldDehydrateQuery: (query) =>
        defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
    },
    hydrate: { deserializeData: superjson.deserialize },
    queries: {
      retry: false,
    },
  },
})

const queryClient = new QueryClient({
  defaultOptions: {
    dehydrate: {
      serializeData: superjson.serialize,
      shouldDehydrateQuery: (query) =>
        defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
    },
    hydrate: { deserializeData: superjson.deserialize },
    queries: {
      retry: false,
    },
  },
})

TanStack•11mo ago•

38 replies

verbal-lime

Tanstack Start, React Query, deferred loading, prefetch, streaming

export const Route = createFileRoute('/dashboard')({
  component: RouteComponent,
  loader: async ({ context }) => {
    context.queryClient.prefetchQuery({
      ...context.trpc.me.queryOptions(), // this query takes 4 seconds
      staleTime: Infinity,
    })
  },
})

function RouteComponent() {
  const trpc = useTRPC()
  const { data: me } = useSuspenseQuery({
    ...trpc.me.queryOptions(),
    staleTime: Infinity,
  })

  return <div>{me.email}</div>
}

export const Route = createFileRoute('/dashboard')({
  component: RouteComponent,
  loader: async ({ context }) => {
    context.queryClient.prefetchQuery({
      ...context.trpc.me.queryOptions(), // this query takes 4 seconds
      staleTime: Infinity,
    })
  },
})

function RouteComponent() {
  const trpc = useTRPC()
  const { data: me } = useSuspenseQuery({
    ...trpc.me.queryOptions(),
    staleTime: Infinity,
  })

  return <div>{me.email}</div>
}

const queryClient = new QueryClient({
  defaultOptions: {
    dehydrate: {
      serializeData: superjson.serialize,
      shouldDehydrateQuery: (query) =>
        defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
    },
    hydrate: { deserializeData: superjson.deserialize },
    queries: {
      retry: false,
    },
  },
})

const queryClient = new QueryClient({
  defaultOptions: {
    dehydrate: {
      serializeData: superjson.serialize,
      shouldDehydrateQuery: (query) =>
        defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
    },
    hydrate: { deserializeData: superjson.deserialize },
    queries: {
      retry: false,
    },
  },
})

Tanstack Start, React Query, deferred loading, prefetch, streaming

Similar Threads

Tanstack Start, React Query, deferred loading, prefetch, streaming

Similar Threads

Similar Threads

Similar Threads