T
TanStack•11mo ago
quickest-silver

data loader only on first render

I have an overview of posts with pagination and filters and i want to make use of the function that preloads the first render with posts when you hover the link so i implemented this 
export const Route = createFileRoute('/_app/posts/')({
  validateSearch: zodSearchValidator(PostsRequest),
  loaderDeps: ({ search }) => pick(search, [
    'pageNumber',
    'pageSize',
  ]),
  loader: ({ abortController, deps }) => queryClient.ensureQueryData(postsQueries.get({
    signal: abortController.signal, filters: deps
  })),
  component: () => Posts()
})

function Posts() {

  const routeApi = getRouteApi('/_app/posts/')
  const navigate = useNavigate({ from: Route.fullPath })
  const filters = routeApi.useSearch()

  const query = useSuspenseQuery(postssQueries.get({ filters }))

  const setFilters = (partialFilters: Partial<typeof filters>) =>
    navigate({
      search: prev => ({ ...prev, ...partialFilters }),
    })
export const Route = createFileRoute('/_app/posts/')({
  validateSearch: zodSearchValidator(PostsRequest),
  loaderDeps: ({ search }) => pick(search, [
    'pageNumber',
    'pageSize',
  ]),
  loader: ({ abortController, deps }) => queryClient.ensureQueryData(postsQueries.get({
    signal: abortController.signal, filters: deps
  })),
  component: () => Posts()
})

function Posts() {

  const routeApi = getRouteApi('/_app/posts/')
  const navigate = useNavigate({ from: Route.fullPath })
  const filters = routeApi.useSearch()

  const query = useSuspenseQuery(postssQueries.get({ filters }))

  const setFilters = (partialFilters: Partial<typeof filters>) =>
    navigate({
      search: prev => ({ ...prev, ...partialFilters }),
    })
this works perfect! But whenever the user changes pagination the whole page including the loader will rerender, this takes a little while. I don't want this loader to run again but only the query, so placeholderData: keepPreviousData inside the query will actually work and the previous posts are shown until the query is finished reloading the next page.
4 Replies
quickest-silver
quickest-silverOP•11mo ago
Or should i just get rid of the whole loader?
like-gold
like-gold•11mo ago
don't put page number in the deps if you don't want the loader to rerun when it changes
sensitive-blue
sensitive-blue•11mo ago
@Manuel Schiller @andredewaard I have similar case, but can i add some loader inside my table component ? useSuspenseQuery is always returning isFetching false, so I wrapped actions (ex. page number change) inside startTransistion from react, I got the isPending from the useTransition hook but when I set network mode to 3g I still get the whole page loader from defaultPendingComponent, can you guys help please, I'm struggling with it for hours
like-gold
like-gold•11mo ago
can you please create a new thread including a complete minimal example (e.g. by forking one of the existing router examples on stackblitz )?

Did you find this page helpful?