cold-orange

Tanstack Query cached data as a dependency in `beforeLoad` guidance

reacttypescript

Hello,
Say I have a route such as:

export const Route = createFileRoute("/_layoutA/")({
    beforeLoad: async ({ context }) => {
        // Using `fetchQuery` to fetch data if cache gets invalidated
        const slowDependentData = await context.queryClient.fetchQuery(getSlowDependentDataQueryOptions())
        if (shouldRedirectToX(slowDependentData)){
          throw redirect({  to: "/somePageX" });
        }
        return { slowDependentData }
    },
    component: () => { return <div>My Unauthenticated Page</div> },
});

export const Route = createFileRoute("/_layoutA/")({
    beforeLoad: async ({ context }) => {
        // Using `fetchQuery` to fetch data if cache gets invalidated
        const slowDependentData = await context.queryClient.fetchQuery(getSlowDependentDataQueryOptions())
        if (shouldRedirectToX(slowDependentData)){
          throw redirect({  to: "/somePageX" });
        }
        return { slowDependentData }
    },
    component: () => { return <div>My Unauthenticated Page</div> },
});

I want to cache the results of

slowDependentData

slowDependentData

because this slow call gets called for all

/_unauthenticated

/_unauthenticated

routes.
But, I want the latest cached result if

getSlowDependentDataQueryOptions().queryKey

getSlowDependentDataQueryOptions().queryKey

gets invalidated.

Questions:
1. Is using

fetchQuery

fetchQuery

the proper way in do this?
2. I also want to access

slowDependentData

slowDependentData

via

Route.useRouteContext()

Route.useRouteContext()

. Is there a guide on accessing data via

Route Context

Route Context

vs using

useQuery / useSuspenseQuery

useQuery / useSuspenseQuery

for this cached data?

TanStack•2mo ago

cold-orange

Tanstack Query cached data as a dependency in `beforeLoad` guidance

reacttypescript

Hello,
Say I have a route such as:

export const Route = createFileRoute("/_layoutA/")({
    beforeLoad: async ({ context }) => {
        // Using `fetchQuery` to fetch data if cache gets invalidated
        const slowDependentData = await context.queryClient.fetchQuery(getSlowDependentDataQueryOptions())
        if (shouldRedirectToX(slowDependentData)){
          throw redirect({  to: "/somePageX" });
        }
        return { slowDependentData }
    },
    component: () => { return <div>My Unauthenticated Page</div> },
});

export const Route = createFileRoute("/_layoutA/")({
    beforeLoad: async ({ context }) => {
        // Using `fetchQuery` to fetch data if cache gets invalidated
        const slowDependentData = await context.queryClient.fetchQuery(getSlowDependentDataQueryOptions())
        if (shouldRedirectToX(slowDependentData)){
          throw redirect({  to: "/somePageX" });
        }
        return { slowDependentData }
    },
    component: () => { return <div>My Unauthenticated Page</div> },
});

I want to cache the results of

slowDependentData

slowDependentData

because this slow call gets called for all

/_unauthenticated

/_unauthenticated

routes.
But, I want the latest cached result if

getSlowDependentDataQueryOptions().queryKey

getSlowDependentDataQueryOptions().queryKey

gets invalidated.

Questions:
1. Is using

fetchQuery

fetchQuery

the proper way in do this?
2. I also want to access

slowDependentData

slowDependentData

via

Route.useRouteContext()

Route.useRouteContext()

. Is there a guide on accessing data via

Route Context

Route Context

vs using

useQuery / useSuspenseQuery

useQuery / useSuspenseQuery

for this cached data?

Tanstack Query cached data as a dependency in `beforeLoad` guidance

Similar Threads

Tanstack Query cached data as a dependency in `beforeLoad` guidance

Similar Threads

Similar Threads

Similar Threads