TanStack Query
Pagination és infinite query
Lapszám a queryKey-ben, placeholderData, useInfiniteQuery.
Pagination és infinite query
Pagination
Lapszám a queryKey része:
useQuery({
queryKey: ['users', { page }],
queryFn: () => fetchUsers(page),
placeholderData: keepPreviousData,
})keepPreviousData (v5: placeholderData) = a régi lap adata látható marad, amíg az új betölt.
useInfiniteQuery
„Tovább töltés” / infinite scroll minta:
const {
data,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
} = useInfiniteQuery({
queryKey: ['posts'],
queryFn: ({ pageParam }) => fetchPosts(pageParam),
initialPageParam: 0,
getNextPageParam: (lastPage) => lastPage.nextCursor,
})v5-ben initialPageParam kötelező.
📝 Összefoglaló
- Pagination: lap a key-ben,
placeholderData: keepPreviousData. - Infinite:
useInfiniteQuery,getNextPageParam,fetchNextPage,initialPageParam.