useInfiniteQuery
関連しそうなページ
例
useInfiniteQueryをいつ使うのか？
無限スクロールを実装したい時
pagenationを実装したいときではなくmrsekut.icon
useQueryとuseInfiniteQueryの大きな違いは「keyを変えた時に前回の値を保持し続けるか」
どういうUIにするかが判断基準になる
queryだけみれば、無限スクロールもpagenationも、page/1、page/2.. という風になっている。ここは着目ポイントではないmrsekut.icon
新しいものを読み込んだ時に、前回の結果も表示し続けたいならuseInfiniteQueryを使う
仮にpagenationをuseInfiniteQueryでやろうとすると面倒くさくなるだけ
別にindexをstateで持っておきdata.pages[index]で見ることになる
だから素直にuseQueryを使えばいい
OptionsやReturnsの全容を掴むコツ
TData型がどこに出現するのかを見れば全容をつかみやすいmrsekut.icon
わかりやすさのため、以下のメモではparamsの型をTParamとして書いておく
これは実際はunknownになっている
paramsとは、pagingする時に呼ぶ引数のやつ
↓こんなのだったら、0とか3の部分
この場合はTParam == number
code:ts
fetch('/api/projects?cursor=0')
fetch('/api/projects?cursor=3')
どれが必須の項目7日分かりづらい
optionsの方
getNextPageParamさえ指定すれば使えるのか
通常の無限スクロールをイメージすると、prev系の関数は殆ど使う機会ないんだろうなmrsekut.icon
TParamって、[1,2,3]の状態でprevしたらどうなるの #?? [1,2]になるのか、[1,2,3,2]になるのか
[1,2,3]になる。そらそうかmrsekut.icon
無意味にデータを変えない
hasMoreの実装方法
返り値にhasNextPageがあるのでそれを使えばいい
pageParamの型の指定
Options
queryFn: (context: QueryFunctionContext) => Promise<TData>
queryFnの返り値はTDataであり、これを全体で共有するmrsekut.icon
pageParamの型は、TParam
Required, but only if no default query function has been defined defaultQueryFn
The function that the query will use to request data.
Receives a QueryFunctionContext object with the following variables:
queryKey: EnsuredQueryKey: the queryKey, guaranteed to be an Array
pageParam: unknown | undefined
Must return a promise that will either resolve data or throw an error.
Make sure you return the data and the pageParam if needed for use in the props below.
次のpageのindexを返したほうが良さそう？
これの返り値が、dataとか、getNextPageparasの引数とかに対応するのね
getNextPageParam: (lastPage: TData, allPages: TData[]) => TParam | undefined
2つのことをやっている
次のTParamを決定する
次に読み込むものが存在しないことを判断する(undefined)
lastPageと「allPagesの最後の要素」は一致するはずmrsekut.icon
常に？
例えば、初回と、読み込みきったときとかはどう？
getPreviousPageParam()
getNextPageParamのprev版
Returns
The returned properties for useInfiniteQuery are identical to the useQuery hook, with the addition of the following:
data: { pages: TData[], pageParams: TParam[] }
pages
型の通り。結果がページごとに配列になっている
pageParams
fetchする時に使ったparamsの、ページごとの配列
普通にindexで見てるなら、例えば[1,2,3]とか
isFetchingNextPage: boolean
Will be true while fetching the next page with fetchNextPage.
loading中の表示とかに使える
fetchNextPage: (options?: FetchNextPageOptions)
This function allows you to fetch the next "page" of results.
options.pageParam: unknown allows you to manually specify a page param instead of using getNextPageParam.
options.cancelRefetch: boolean if set to true, calling fetchNextPage repeatedly will invoke fetchPage every time, whether the previous invocation has resolved or not. Also, the result from previous invocations will be ignored. If set to false, calling fetchNextPage repeatedly won't have any effect until the first invocation has resolved. Default is true.
hasNextPage
getNextPageParamの返り値がundefinedならfalseになる
それぞれにprev版がある
isFetchingPreviousPage
fetchPreviousPage()
hasPreviousPage