React Query とデータベースを使用したページフリップクエリ処理

npm install react-query

import React from 'react';
import { useQuery } from 'react-query';
import { connect } from 'pg-promise';

// 创建数据库连接
const pgp = require('pg-promise')();
const db = pgp('postgres://username:password@localhost:5432/database');

const PAGE_SIZE = 10; // 每页显示的数据量

const PaginationExample = () => {
  const [currentPage, setCurrentPage] = React.useState(0); // 当前页数

  // 使用 React Query 获取数据
  const { isLoading, data, error } = useQuery(['posts', currentPage], async () => {
    const offset = currentPage * PAGE_SIZE;
    const limit = PAGE_SIZE;

    // 查询数据库获取数据
    const posts = await db.any('SELECT * FROM posts OFFSET $1 LIMIT $2', [offset, limit]);

    return posts;
  });

  // 处理翻页
  const handlePreviousPage = () => {
    if (currentPage > 0) {
      setCurrentPage((prev) => prev - 1);
    }
  };

  const handleNextPage = () => {
    setCurrentPage((prev) => prev + 1);
  };

  // 渲染数据和翻页按钮
  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error.message}</p>
      ) : (
        <>
          <ul>
            {data.map((post) => (
              <li key={post.id}>{post.title}</li>
            ))}
          </ul>
          <button onClick={handlePreviousPage} disabled={currentPage === 0}>
            Previous
          </button>
          <button onClick={handleNextPage}>Next</button>
        </>
      )}
    </div>
  );
};

export default PaginationExample;