T
TanStack•16mo ago
like-gold

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
2 Replies
like-gold
like-goldOP•16mo ago
The above bug happens when you try manually reloading a page that has some search params in the url.
flat-fuchsia
flat-fuchsia•16mo ago
please show a reproduction by forking one of our examples

Did you find this page helpful?