T
TanStack•14mo ago
extended-salmon

Abort preload when navigating to different route

I use tanstack router in combination with tanstack query. In my route loader function I use queryClient.ensureQueryData. This loader is triggered with I hover over the Link component (because of the preload functionality). 
...
loader: async ({ context }) => {
  const { gamma, queryClient } = context;
  queryClient.ensureQueryData(gammaDefinitionsQueryOptions(gamma.definitions));
  queryClient.ensureQueryData(gammaCatalogQueryOptions(gamma.catalog));
},
...
...
loader: async ({ context }) => {
  const { gamma, queryClient } = context;
  queryClient.ensureQueryData(gammaDefinitionsQueryOptions(gamma.definitions));
  queryClient.ensureQueryData(gammaCatalogQueryOptions(gamma.catalog));
},
...
I have a list with items that each have their own Link component and route, but when I click on a link, the fetch requests that are still happening from hovering over the other Links, keep going. Is there a way to cancel/abort them, since they are no longer relevant? I attempted to pass the signal of the Abortcontroller passed by the loader to the query function, but that did not seem to work.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?