React TanStack query を使って無限読み込みを実装する

create-react-app アプリ名

npm install @tanstack/react-query

src//
  |-- api//
  |    `-- comments.js
  |-- App.js
  `-- index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient()

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

let Comments = [
    { id: 1, comment: "Comment 1" },
    { id: 2, comment: "Comment 2" },
    { id: 3, comment: "Comment 3" },
    { id: 4, comment: "Comment 4" },
    { id: 5, comment: "Comment 5" },
]

export const getComment = (pageParam) => {
    return delay().then(() => {
        let res = {
            Comments: [Comments.find((r) => r.id === pageParam)],
            page: pageParam,
            totalPages: Comments.length
        }
        return res;
    }).catch((error) => {
        return Promise.reject({ error })
    })
}

async function delay(ms = 500) {
    return new Promise(resolve => setTimeout(resolve, ms))
    // return new Promise((resolve, reject) => setTimeout(() => reject("error message"), ms));
}

import { useInfiniteQuery } from '@tanstack/react-query'
import { getComment } from './api/comments';

function App() {
  const query = useInfiniteQuery({
    queryKey: ["comments"],
    queryFn: ({ pageParam = 1 }) => getComment(pageParam),
    getNextPageParam: (lastPage, allPages) => {
      if (lastPage.page < lastPage.totalPages) {
        return lastPage.page + 1;
      } else {
        return undefined;
      }
    },
    refetchOnWindowFocus: false,
  })
  if (query.isLoading) return <h1>Loading...</h1>
  if (query.isError) return <h1>{JSON.stringify(query.error)}</h1>

  return (
    <div className="App">
      {query.data.pages.map(page =>
        page.Comments.map(res => <div key={res.id}>{res.id}  {res.comment}</div>)
      )}
      {/* {query.data.pages.flatMap(page => page.Comments.map(res => <div key={res.id}>{res.id} {res.comment}</div>))} */}
      
      {query.hasNextPage && (
        <button onClick={() => query.fetchNextPage()}>
          {query.isFetchingNextPage ? "isLoading..." : "Load"}
        </button>
      )}
    </div>
  );
}

export default App;