loaderDeps / loader function race condition.

I have noticed, this issue in Tanstack router whereby the loader function within the router gets called first, before loaderDeps is executed.
As a result, few of the values in loaderDeps are undefined. However upon dropping console logs I can see loaderDeps gets search params later on, but at this point loader is never re-executed. How do we get loader to re-execute when loaderDeps changes ?

export const Route = createFileRoute('/some/desination/route')({
component: SomeComponent,
loaderDeps: ({search: {foo} }) => ({foo})
loader: async({context: {queryClient}}, deps: {foo}) => {

const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn(foo)
  })
)

}
})

export const Route = createFileRoute('/some/desination/route')({
component: SomeComponent,
loaderDeps: ({search: {foo} }) => ({foo})
loader: async({context: {queryClient}}, deps: {foo}) => {

const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn(foo)
  })
)

}
})

What's happening is when I reload the page loaderDeps does return foo with the correct value, however by this time loader has already finished execution and isn't being re-executed.
I could find this in version 1.35.3

TanStack•2y ago•

2 replies

dead-brown

loaderDeps / loader function race condition.

export const Route = createFileRoute('/some/desination/route')({
component: SomeComponent,
loaderDeps: ({search: {foo} }) => ({foo})
loader: async({context: {queryClient}}, deps: {foo}) => {

const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn(foo)
  })
)

}
})

export const Route = createFileRoute('/some/desination/route')({
component: SomeComponent,
loaderDeps: ({search: {foo} }) => ({foo})
loader: async({context: {queryClient}}, deps: {foo}) => {

const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn(foo)
  })
)

}
})

loaderDeps / loader function race condition.

Similar Threads

loaderDeps / loader function race condition.

Similar Threads

Similar Threads

Similar Threads