TanStackT
TanStack•3y ago•
12 replies
verbal-lime

tanstack router + query + searchParams = keepPreviousData does not work

Hey 👋🏽 ,
thanks for this great project. I'm using tanstack/router and tanstack/query. The filter + pagination state should be in searchParams. At the query I use keepPreviousData: true, but if a page is not in cache, I get a loading-state. What I'm doing wrong?

export const participantsRoute = new Route({
  path: "/participants",
  getParentRoute: () => rootRoute,
  component: ParticipantsPage,
});


export function ParticipantsPage({ useSearch }) {
  const { page, sort } = useSearch({ from: "/participants" });

  const { data, isLoading } = useParticipantsQuery({ page, sort });

  if (isLoading) {
    return <Loading size="lg" />;
  }

  return <ParticipantTable data={data} page={page} />;
}


The page switch is done via a navigation:
  const goToPage = ({ number }) => {
    navigate({
      search: (prev) => {
        return { ...prev, page: number };
      },
    });
  };


Thanks
Was this page helpful?