tanstack router + query + searchParams = keepPreviousData does not work

Hey

,
thanks for this great project. I'm using

tanstack/router

tanstack/router

and

tanstack/query

tanstack/query

. The filter + pagination state should be in searchParams. At the query I use

keepPreviousData: true

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

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

  const goToPage = ({ number }) => {
    navigate({
      search: (prev) => {
        return { ...prev, page: number };
      },
    });
  };

Thanks

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

tanstack/router

and

tanstack/query

tanstack/query

. The filter + pagination state should be in searchParams. At the query I use

keepPreviousData: true

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

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

  const goToPage = ({ number }) => {
    navigate({
      search: (prev) => {
        return { ...prev, page: number };
      },
    });
  };

Thanks

tanstack router + query + searchParams = keepPreviousData does not work

Similar Threads

tanstack router + query + searchParams = keepPreviousData does not work

Similar Threads

Similar Threads

Similar Threads