T
TanStack•2y ago
extended-salmon

Loader hits all API when loderDeps are updated.

I have two APIs for my route, one gets the table data and the other one gets filter data. Every time I change the page number in the loaderDeps I only want the table data API to hit since my filter data API is a huge list which is slowing down my app. And I need it only once, so it doesn't make sense to hit it every time 
export const Route = createFileRoute("/_layout/cages")({
 loaderDeps: ({ search: { page } }) => ({ page )},
 loader: async ({ deps }) => {
  const tableData = await fetcher("TableData/GetAll?PageNo=${deps.page}")
    
  const initialFilterData = await fetcher("Filters/GetAll") // don't want this to hit every time, take's a lot of time

  return {
   tableData,
   initialFilterData
  }
}


<Pagination
  onPageChange={page => {
    navigate({
      from: "/cages",
      search: prev => ({ ...prev, page })
    })
  }}
/>
export const Route = createFileRoute("/_layout/cages")({
 loaderDeps: ({ search: { page } }) => ({ page )},
 loader: async ({ deps }) => {
  const tableData = await fetcher("TableData/GetAll?PageNo=${deps.page}")
    
  const initialFilterData = await fetcher("Filters/GetAll") // don't want this to hit every time, take's a lot of time

  return {
   tableData,
   initialFilterData
  }
}


<Pagination
  onPageChange={page => {
    navigate({
      from: "/cages",
      search: prev => ({ ...prev, page })
    })
  }}
/>
2 Replies
xenial-black
xenial-black•2y ago
This sound like a time to add some caching behaviour into your application. The basic concept of a loader is that it runs every time. Opting out of it for certain requests would require some sort of cachinng solution. I tend to use TanStack Query and use a staleTime that works for me, so I don't fetch redundant data. Because to opt out of requests for certain loader runs, means that you need to be able to track that a request has been made, and then conditionally allow for a refetch of data for certain calls. Ofc, this is something you could implement yourself, but when there purpose built libs for this, it may be worth taking a look at those.
xenial-black
xenial-black•2y ago

Did you find this page helpful?