Open4
React QueryのuseInfiniteQueryについて
ドキュメント
const {
fetchNextPage,
fetchPreviousPage,
hasNextPage,
hasPreviousPage,
isFetchingNextPage,
isFetchingPreviousPage,
...result
} = useInfiniteQuery({
queryKey,
queryFn: ({ pageParam = 1 }) => fetchPage(pageParam),
...options,
getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
})
useQuery
をベースにしている。
queryKey
: cache key, queryFn
: 取得時の処理は同じ。
キャッシュはインメモリ。永続化する場合は別途ライブラリを用いてqueryClientのpersiter optionに設定する
useInfiniteQuery
は useQuery
とobserverが異なる
fetchNextPage
を用いる。
fetchNextPageを呼び出すと、getNextPageParamが実行されて