spotty-amber

Using useSuspenseQuery with ensureQueryData in the loader

reacttypescript

I am dealing with some inconsistent behavior while using useSupsenseQuery with ensureQueryData. Where the query will sometimes get stuck in a permanent

isFetching

isFetching

state in the devtools. Before digging deeper, i just wanted to get a little clarity on the validity of what i am doing here. I just want to launch the query on SSR and pick it up on the client side to finish loading the data

export const Route = createFileRoute("/(app)/app/_layout/workspace/settings/")({
    loader: ({ context }) => {
        context.queryClient.ensureQueryData(currentUser.workspace(context.workspaceId));
    },
    pendingComponent: InfoPageModuleSkeleton,
    component: RouteComponent,
});

export const Route = createFileRoute("/(app)/app/_layout/workspace/settings/")({
    loader: ({ context }) => {
        context.queryClient.ensureQueryData(currentUser.workspace(context.workspaceId));
    },
    pendingComponent: InfoPageModuleSkeleton,
    component: RouteComponent,
});

and then in my RouteComponent I have an immediate

function RouteComponent() {
    const { data: workspaceData } = useSuspenseQuery(currentUser.workspace(workspaceId));
...

function RouteComponent() {
    const { data: workspaceData } = useSuspenseQuery(currentUser.workspace(workspaceId));
...

on every 3rd or 4th page reload, this query just...hangs. If I await the loader ensureQueryData it works every time, so now I'm thinking my understanding of how useSuspenseQuery picks up queries at the server/client boundary is wrong...Codex is failing to give me a good explanation why this intermittently happens. Is anything out of the ordinary here, all the docs I see have similar syntax...?

CODEX:
Loader starts query without awaiting it (stream mode).
HTML hydrates; useSuspenseQuery sees query as pending/fetching and subscribes to that placeholder thenable.
Before the stream payload that resolves it is applied, React does extra hydration work/reconciliation (your FallbackImage causes additional early commits via onLoad/onError state updates).
Route/tab state changes or hydration boundary transitions can cause that pending streamed record to be replaced/aborted/unmounted in that pass.
Result: observer is still attached to a pending query state, but no resolving stream event is now wired to it, and no fresh client fetch is started (because cache thinks it is already “fetching”).

CODEX:
Loader starts query without awaiting it (stream mode).
HTML hydrates; useSuspenseQuery sees query as pending/fetching and subscribes to that placeholder thenable.
Before the stream payload that resolves it is applied, React does extra hydration work/reconciliation (your FallbackImage causes additional early commits via onLoad/onError state updates).
Route/tab state changes or hydration boundary transitions can cause that pending streamed record to be replaced/aborted/unmounted in that pass.
Result: observer is still attached to a pending query state, but no resolving stream event is now wired to it, and no fresh client fetch is started (because cache thinks it is already “fetching”).

TanStack•5d ago

spotty-amber

Using useSuspenseQuery with ensureQueryData in the loader

reacttypescript

I am dealing with some inconsistent behavior while using useSupsenseQuery with ensureQueryData. Where the query will sometimes get stuck in a permanent

isFetching

isFetching

export const Route = createFileRoute("/(app)/app/_layout/workspace/settings/")({
    loader: ({ context }) => {
        context.queryClient.ensureQueryData(currentUser.workspace(context.workspaceId));
    },
    pendingComponent: InfoPageModuleSkeleton,
    component: RouteComponent,
});

export const Route = createFileRoute("/(app)/app/_layout/workspace/settings/")({
    loader: ({ context }) => {
        context.queryClient.ensureQueryData(currentUser.workspace(context.workspaceId));
    },
    pendingComponent: InfoPageModuleSkeleton,
    component: RouteComponent,
});

and then in my RouteComponent I have an immediate

function RouteComponent() {
    const { data: workspaceData } = useSuspenseQuery(currentUser.workspace(workspaceId));
...

function RouteComponent() {
    const { data: workspaceData } = useSuspenseQuery(currentUser.workspace(workspaceId));
...

CODEX:
Loader starts query without awaiting it (stream mode).
HTML hydrates; useSuspenseQuery sees query as pending/fetching and subscribes to that placeholder thenable.
Before the stream payload that resolves it is applied, React does extra hydration work/reconciliation (your FallbackImage causes additional early commits via onLoad/onError state updates).
Route/tab state changes or hydration boundary transitions can cause that pending streamed record to be replaced/aborted/unmounted in that pass.
Result: observer is still attached to a pending query state, but no resolving stream event is now wired to it, and no fresh client fetch is started (because cache thinks it is already “fetching”).

CODEX:
Loader starts query without awaiting it (stream mode).
HTML hydrates; useSuspenseQuery sees query as pending/fetching and subscribes to that placeholder thenable.
Before the stream payload that resolves it is applied, React does extra hydration work/reconciliation (your FallbackImage causes additional early commits via onLoad/onError state updates).
Route/tab state changes or hydration boundary transitions can cause that pending streamed record to be replaced/aborted/unmounted in that pass.
Result: observer is still attached to a pending query state, but no resolving stream event is now wired to it, and no fresh client fetch is started (because cache thinks it is already “fetching”).

Using useSuspenseQuery with ensureQueryData in the loader

Similar Threads

Using useSuspenseQuery with ensureQueryData in the loader

Similar Threads

Similar Threads

Similar Threads