V5-RC: replicate `keepPreviousData` behaviour for pagination

I'm trying to move to the v5 release candidate and facing a blocker here.

Scenario: I've got a

useQuery

useQuery

which calls a paginated API for a list of posts.

With v4, on page change, I was able to keep the keep the previous query's data on the screen using the

keepPreviousData

keepPreviousData

flag until the new request was resolved (success or error).
Now on v5, the

keepPreviousData

keepPreviousData

flag has been removed and the migration guide doesn't give you an example of an identity function that'd replicate the behaviour lost.

Some help would be appreciated.

Example useQuery:

function usePosts({ page, size }: { page: number; size: number }) {
  return useQuery({
    queryKey: ['posts', page, size],
    queryFn: () => fetchPosts(page, size),
    keepPreviousData: true,
    // placeholderData ??? // what identity function would replicate the behaviour of keepPreviousData
  });
}

function usePosts({ page, size }: { page: number; size: number }) {
  return useQuery({
    queryKey: ['posts', page, size],
    queryFn: () => fetchPosts(page, size),
    keepPreviousData: true,
    // placeholderData ??? // what identity function would replicate the behaviour of keepPreviousData
  });
}

Migrating to TanStack Query v5 | TanStack Query Docs

Breaking Changes

v5 is a major version, so there are some breaking changes to be aware of:

TanStack•3y ago•

15 replies

popular-magenta

V5-RC: replicate `keepPreviousData` behaviour for pagination

I'm trying to move to the v5 release candidate and facing a blocker here.

Scenario: I've got a

useQuery

useQuery

which calls a paginated API for a list of posts.

With v4, on page change, I was able to keep the keep the previous query's data on the screen using the

keepPreviousData

keepPreviousData

flag until the new request was resolved (success or error).
Now on v5, the

keepPreviousData

keepPreviousData

flag has been removed and the migration guide doesn't give you an example of an identity function that'd replicate the behaviour lost.

Some help would be appreciated.

Example useQuery:

function usePosts({ page, size }: { page: number; size: number }) {
  return useQuery({
    queryKey: ['posts', page, size],
    queryFn: () => fetchPosts(page, size),
    keepPreviousData: true,
    // placeholderData ??? // what identity function would replicate the behaviour of keepPreviousData
  });
}

function usePosts({ page, size }: { page: number; size: number }) {
  return useQuery({
    queryKey: ['posts', page, size],
    queryFn: () => fetchPosts(page, size),
    keepPreviousData: true,
    // placeholderData ??? // what identity function would replicate the behaviour of keepPreviousData
  });
}

Migrating to TanStack Query v5 | TanStack Query Docs

Breaking Changes

v5 is a major version, so there are some breaking changes to be aware of:

V5-RC: replicate `keepPreviousData` behaviour for pagination

Similar Threads

V5-RC: replicate `keepPreviousData` behaviour for pagination

Similar Threads

Similar Threads

Similar Threads