Zenn
Open3

無限スクロール

React Query
無限スクロール
nerusannerusan

useQueryを利用する場合keepPreviousData: true,にすると良い
この時、クエリパラメータも第一引数に加えること

そうするとリクエストのたびに前取得した状態が、消えることなく、新しいコンテンツのみ表示できる。

isLoadingは初回のみのローティングとして利用して、isFetchingは「もっと見る」を押すたびに走るローティング。

  const { isLoading, data, isFetching } = useQuery(
    [
      'api',
      'contents',
      { limit },  // 20, 30, 40となる
    ],
    () =>
      axiso(
        `https://sampe.com/api/contents&limit=${limit}`,
      ).then((data) => data),
    {
      keepPreviousData: true,
    }
  );