#Initial data is applied when the query key is changed

11 messages · Page 1 of 1 (latest)

thorn citrus
#

This all works well until I change the query key and then it goes back to the initial data until I fetch the new data.

export const usePostInfiniteQuery = (
  postIds: number[],
  initialData?: NewPublicPosts[],
) => {
  
  return useInfiniteQuery({
    queryKey: ["fetchPosts", postIds],
    queryFn: ({ pageParam }) => fetchPosts(postIds, pageParam),

    getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => {
      if (!lastPage) {
        return null;
      }

      if (lastPage.length < 10) return null;

      return lastPageParam + 10;
    },

    initialPageParam: 0,

    retry: 0,
    enabled: false,

    placeholderData: (previousData, previousQuery) => previousData,

    // Initial data is applied when the query key is changed
    initialData: {
      pages: [initialData],
      pageParams: [0],
    },
  });
};
blazing rivet
#

yes, this is on purpose. When the key changes, a new cache entry is created, so initialData is applied for that entry

west perch
blazing rivet
#

if you only want initialData for a specific queryKey (your "first" one) - you need to be explicit

thorn citrus
blazing rivet
#

by setting intialData to undefined if you don't want initial data ?

#

usual pagination example is:

function MyComponent({ initialData }) {
  const [page, setPage] = useState(0)
  const { data } = useQuery({
    queryKey: ['thing', page],
    queryFn: () => getThing(page),
    placeholderData: keepPreviousData,
    initialData: page === 0 ? initialData : undefined
  })
}
#

since you don't want initialData for page 2 or 3, we only set it for the first page.

thorn citrus
#

in the above example every time there is a new query there will be the initial data

#

In this example the initialData should only be there on the very first query all other ones are meant to use placeholderData until the new data is loaded

export const usePostInfiniteQuery = (
  postIds: number[],
  initialData?: NewPublicPosts[],
) => {
  
  return useInfiniteQuery({
    queryKey: ["fetchPosts", postIds],
    queryFn: ({ pageParam }) => fetchPosts(postIds, pageParam),

    getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => {
      if (!lastPage) {
        return null;
      }

      if (lastPage.length < 10) return null;

      return lastPageParam + 10;
    },

    initialPageParam: 0,

    retry: 0,
    enabled: false,

    placeholderData: (previousData, previousQuery) => previousData,

    // Initial data is applied when the query key is changed
    initialData: {
      pages: [initialData],
      pageParams: [0],
    },
  });
};
blazing rivet
#

again, if you say:

    initialData: {
      pages: [initialData],
      pageParams: [0],
    },

then yes, it will be for every entry