TanStackT
TanStack•16mo ago•
4 replies
slow-yellow

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

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.
Was this page helpful?