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 = (page) => {
    return delay().then(() => {
        return [Comments.find((r) => r.id === page)]
    }).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 { useQuery } from '@tanstack/react-query'
import { useState } from 'react';
import { getComment } from './api/comments';

function App() {
  const [page, setPage] = useState(1);
  const query = useQuery({
    queryKey: ["comments", { page }],
    queryFn: () => getComment(page),
    keepPreviousData: true,
  })

  if (query.isLoading) return <h1>Loading...</h1>
  if (query.isError) return <h1>{JSON.stringify(query.error)}</h1>

  return (
    <div className="App">

      {query.data.map(res => (
        <div key={res.id}>{res.id}  {res.comment}</div>
      ))}
      {query.isFetching ? ('isLoading...') : <></>}
      <button onClick={() => setPage(page - 1)}>prev</button>
      <button onClick={() => setPage(page + 1)}>next</button>

    </div>
  );
}

export default App;