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 })
    })
  }}
/>

TanStack•2y ago•

3 replies

moderate-tomato

Loader hits all API when loderDeps are updated.

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 })
    })
  }}
/>

Loader hits all API when loderDeps are updated.

Similar Threads

Loader hits all API when loderDeps are updated.

Similar Threads

Similar Threads

Similar Threads