conscious-sapphire

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 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 flag until the new request was resolved (success or error). Now on v5, the 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:

11 Replies

quickest-silver•3y ago

An identity function is a function that returns its first argument https://en.m.wikipedia.org/wiki/Identity_function

Identity function

In mathematics, an identity function, also called an identity relation, identity map or identity transformation, is a function that always returns the value that was used as its argument, unchanged. That is, when f is the identity function, the equality f(X) = X is true for all values of X to which f can be applied.

quickest-silver•3y ago

so it's: placeholderData: (prev) => prev If you want, please open a PR to the docs to clarify it

conscious-sapphireOP•3y ago

@TkDodo 🔮 For clarification, am I basing my branch off of the beta or rc branch?

quickest-silver•3y ago

RC please

conscious-sapphireOP•3y ago

https://github.com/TanStack/query/pull/6075

GitHub

docs(useQuery): explain what an identity function is for placeholde...

conscious-sapphire•3y ago

Any idea what I'm doing wrong when previousData and previousQuery are both always undefined @TkDodo 🔮 ? My queryKey looks like this: ['foo', { ...params }] and params contains page which is the only variable that changes when fetching a different page. (this is the only hurdle in our otherwise extremely smooth migration from v4 to v5)

quickest-silver•3y ago

can you show a reproduction?

conscious-sapphire•3y ago

import { keepPreviousData } from '@tanstack/react-query';

const createSearchQuery = (params, debouncedSearch) => ({
  queryKey: ['search', { ...params, search: debouncedSearch }],
  queryFn: async ({ queryKey: [, params], signal }) =>
    await axios.get('/foo', { params, signal }).data,
  placeholderData: keepPreviousData,
  retry: false,
  throwOnError: true,
});

import { keepPreviousData } from '@tanstack/react-query';

const createSearchQuery = (params, debouncedSearch) => ({
  queryKey: ['search', { ...params, search: debouncedSearch }],
  queryFn: async ({ queryKey: [, params], signal }) =>
    await axios.get('/foo', { params, signal }).data,
  placeholderData: keepPreviousData,
  retry: false,
  throwOnError: true,
});

This is the helper function to create the query which is then fed to useQuery. The search property in the queryKey is debounced and signal is used to abort fetches that are in flight if needed.

quickest-silver•3y ago

I mean a runnable codesandbox reproduction that shows your issue 🙂

conscious-sapphire•3y ago

I was afraid you'd say something like that 😄 Anyway, as long as there's nothing glaringly obviously wrong already, I'm sure I'll figure it out. Thanks! Figured it out… useQueries instead of useQuery 😬 It's interesting how keepPreviousData did work fine using useQueries. Any specific reason why this would not work using placeholderData and an identity function?

quickest-silver•3y ago

keepPreviousData didn't work with useQueries. We tried to support it somewhen in v4 but it never worked out

Gaming

Programming

V5-RC: replicate `keepPreviousData` behaviour for pagination

Did you find this page helpful?