Getting access to the isLoading state when using queryClient.ensureQueryData() within TSR

I am using Tanstack router, along side Tanstack Query to fetch data for my route. When I navigate from one route to another, I wanted to display a loading spinner on the current page, while data is being fetched for the destination route. The below code snippet is what I'm working with.

export const Route = createFileRoute('/some/desination/route')({
component: DesinationComponent,
// I do pass the Tanstack queryClient via context.
loader: async({context: {queryClient}}) => {
// At the moment I display some kind of a loading event using the below hack.
document.body.style.cursor = 'wait'
const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn()
  })
)
// And after the data fetch completes I set the mouse pointer back to default
document.body.style.cursor = 'auto'
}
})

export const Route = createFileRoute('/some/desination/route')({
component: DesinationComponent,
// I do pass the Tanstack queryClient via context.
loader: async({context: {queryClient}}) => {
// At the moment I display some kind of a loading event using the below hack.
document.body.style.cursor = 'wait'
const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn()
  })
)
// And after the data fetch completes I set the mouse pointer back to default
document.body.style.cursor = 'auto'
}
})

Is their a cleaner approach, to getting access to the

isLoading

isLoading

event and how do I access that event on my current route component, so I can show some kind of a loading spinner during the data fetch ?

On the current route component, can I some how access the loading event by doing something like

// Where RouteForTheDestinationPage is a Route alias for the destination page.
const { isLoading } = RouteForTheDestinationPage.useLoaderData()
// similar to how I would access isLoading via useQuery

// Where RouteForTheDestinationPage is a Route alias for the destination page.
const { isLoading } = RouteForTheDestinationPage.useLoaderData()
// similar to how I would access isLoading via useQuery

TanStack•2y ago•

4 replies

dead-brown

Getting access to the isLoading state when using queryClient.ensureQueryData() within TSR

export const Route = createFileRoute('/some/desination/route')({
component: DesinationComponent,
// I do pass the Tanstack queryClient via context.
loader: async({context: {queryClient}}) => {
// At the moment I display some kind of a loading event using the below hack.
document.body.style.cursor = 'wait'
const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn()
  })
)
// And after the data fetch completes I set the mouse pointer back to default
document.body.style.cursor = 'auto'
}
})

export const Route = createFileRoute('/some/desination/route')({
component: DesinationComponent,
// I do pass the Tanstack queryClient via context.
loader: async({context: {queryClient}}) => {
// At the moment I display some kind of a loading event using the below hack.
document.body.style.cursor = 'wait'
const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn()
  })
)
// And after the data fetch completes I set the mouse pointer back to default
document.body.style.cursor = 'auto'
}
})

Is their a cleaner approach, to getting access to the

isLoading

isLoading

// Where RouteForTheDestinationPage is a Route alias for the destination page.
const { isLoading } = RouteForTheDestinationPage.useLoaderData()
// similar to how I would access isLoading via useQuery

// Where RouteForTheDestinationPage is a Route alias for the destination page.
const { isLoading } = RouteForTheDestinationPage.useLoaderData()
// similar to how I would access isLoading via useQuery

Getting access to the isLoading state when using queryClient.ensureQueryData() within TSR

Similar Threads

Getting access to the isLoading state when using queryClient.ensureQueryData() within TSR

Similar Threads

Similar Threads

Similar Threads