How to implement pagination in React

# Query  
query getPostList($first: Int, $skip: Int) {  
  postsConnection {  
    aggregate {  
      count  
    }  
  }  
  posts(first: $first, skip: $skip) {  
    title  
  }  
}

# Variables  
{  
  "first": 5,  
  "skip": 0  
}

import { gql } from "@apollo/client";

export const getPostList = gql`  
query getPostList($first: Int, $skip: Int) {  
  postsConnection(first: $first, skip: $skip) {  
    aggregate {  
      count  
    }  
  }  
  posts(first: $first, skip: $skip) {  
    id  
    title  
    body  
  }  
}`

import { Button, ButtonGroup } from "@mui/material";

interface ICustomPaginationProps {  
  totalPages: number;  
  page: number;  
  onChange: (pageNumber: number) => void;  
}

export function CustomPagination({  
  totalPages,  
  page,  
  onChange,  
}: ICustomPaginationProps) {  
  const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);  
  return (  
    <ButtonGroup variant="outlined" aria-label="Basic button group">  
      {pageNumbers.map((number) => {  
        const buttonColor = number === page ? "primary" : "inherit";  
        return (  
          <Button  
            key={number}  
            onClick={() => onChange(number)}  
            color={buttonColor}  
          >  
            {number}  
          </Button>  
        );  
      })}  
    </ButtonGroup>  
  );  
}

import { useState } from "react";  
import { Container } from "@mui/material";  
... 

const DEFAULT_PAGE = 1;  
const DEFAULT_PAGE_SIZE = 5;

export function PostList() {  
  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);

  const handlePageChange = (value: number) => {  
    setCurrentPage(value);  
  };

  ...

 return (  
  <Container>  
    ...  
 </Container>  
 )  
}

import { useQuery } from "@apollo/client";  
import { useEffect } from "react";  
import { getPostList } from "../../graphql/queries";  
import { CircularProgress } from "@mui/material";  
...

export function PostList() {  
  ...

  const { loading, error, data, refetch } = useQuery(getPostList, {  
    variables: {  
      first: DEFAULT_PAGE_SIZE,  
      skip: DEFAULT_PAGE_SIZE * (currentPage - 1),  
    },  
  });

  useEffect(() => {  
    refetch({  
      first: DEFAULT_PAGE_SIZE,  
      skip: (currentPage - 1) * DEFAULT_PAGE_SIZE,  
    });  
  }, [currentPage, refetch]);

  if (loading) return <CircularProgress />;  
  if (error) return <p>Error : {error.message}</p>;

  const totalPosts = data.postsConnection.aggregate.count;  
  const totalPages = Math.ceil(totalPosts / DEFAULT_PAGE_SIZE);

 ...  
}

import { useQuery } from "@apollo/client";  
import { useEffect, useState } from "react";  
import { getPostList } from "../../graphql/queries";  
import { CustomPagination } from "../navigation/pagination";  
import {  
  Grid,  
  Container,  
  CircularProgress,  
  Typography,  
  Box,  
} from "@mui/material";

const DEFAULT_PAGE = 1;  
const DEFAULT_PAGE_SIZE = 5;

export function PostList() {  
  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);

  const { loading, error, data, refetch } = useQuery(getPostList, {  
    variables: {  
      first: DEFAULT_PAGE_SIZE,  
      skip: DEFAULT_PAGE_SIZE * (currentPage - 1),  
    },  
  });

  useEffect(() => {  
    refetch({  
      first: DEFAULT_PAGE_SIZE,  
      skip: (currentPage - 1) * DEFAULT_PAGE_SIZE,  
    });  
  }, [currentPage, refetch]);

  if (loading) return <CircularProgress />;  
  if (error) return <p>Error : {error.message}</p>;

  const totalPosts = data.postsConnection.aggregate.count;  
  const totalPages = Math.ceil(totalPosts / DEFAULT_PAGE_SIZE);

  const handlePageChange = (value: number) => {  
    setCurrentPage(value);  
  };

  return (  
    <Container>  
      <Grid container direction="column" style={{ minHeight: "80vh" }}>  
        <Grid item xs>  
          {data.posts.map(({ id, title, body }) => (  
            <Box key={id} my={4}>  
              <Typography variant="h5">{title}</Typography>  
              <Typography>{body}</Typography>  
            </Box>  
          ))}  
        </Grid>  
        <Grid item container justifyContent="center">  
          <CustomPagination  
            page={currentPage}  
    totalPages={totalPages}  
            onChange={handlePageChange}  
          />  
        </Grid>  
      </Grid>  
    </Container>  
  );  
}

import { useState, useEffect } from "react";  
import { DocumentNode, useQuery } from "@apollo/client";

const DEFAULT_PAGE = 1;  
const DEFAULT_PAGE_SIZE = 5;

export function usePaginatedQuery(  
  query: DocumentNode,  
  totalCountPath: string,  
  variables: Record<string, unknown>  
) {  
  const [currentPage, setCurrentPage] = useState(DEFAULT_PAGE);

  const { loading, error, data, refetch } = useQuery(query, {  
    variables: {  
      ...variables,  
      first: DEFAULT_PAGE_SIZE,  
      skip: DEFAULT_PAGE_SIZE * (currentPage - 1),  
    },  
  });

  useEffect(() => {  
    refetch({  
      ...variables,  
      first: DEFAULT_PAGE_SIZE,  
      skip: (currentPage - 1) * DEFAULT_PAGE_SIZE,  
    });  
  }, [currentPage, refetch, variables]);

  const totalCount = data?.[totalCountPath].aggregate.count || 0;  
  const totalPages = Math.ceil(totalCount / DEFAULT_PAGE_SIZE);

  const handlePageChange = (page: number) => {  
    setCurrentPage(page);  
  };

  return { loading, error, data, totalPages, handlePageChange };  
}

import { getPostList } from "../../graphql/queries";  
import { usePaginatedQuery } from "../../hooks/usePaginatedQuery";  
import { CustomPagination } from "./pagination";  
import {  
  Grid,  
  Container,  
  CircularProgress,  
  Typography,  
  Box,  
} from "@mui/material";

export function DisplayPosts() {  
  const { loading, error, data, totalPages, handlePageChange } =  
    usePaginatedQuery(getPostList, 'postsConnection', {});

  if (loading) return <CircularProgress />;  
  if (error) return <p>Error : {error.message}</p>;

  return (  
    <Container>  
      <Grid container direction="column" style={{ minHeight: "80vh" }}>  
        <Grid item xs>  
          {data.posts.map(({ id, title, body }) => (  
            <Box key={id} my={4}>  
              <Typography variant="h5">{title}</Typography>  
              <Typography>{body}</Typography>  
            </Box>  
          ))}  
        </Grid>  
        <Grid item container justifyContent="center">  
          <CustomPagination  
            totalPages={totalPages}  
            onChange={handlePageChange}  
          />  
        </Grid>  
      </Grid>  
    </Container>  
  );  
}

import { Pagination } from "@mui/material";  
// ...existing code

export function DisplayPosts() {  
  const {  
    loading,  
    error,  
    data,  
    currentPage,  
    totalPages,  
    handlePageChange,  
    handlePageChangeMui,  
  } = usePaginatedQuery(getPostList, "postsConnection", {});

  // ... all existing code

  return (  
    // ...all existing code  
    <Pagination  
      page={currentPage}  
      count={totalPages}  
      onChange={handlePageChangeMui}  
    />  
  );  
}

// Add this function before the return statement  
  const handlePageChangeMui = (_, page: number) => {  
    setCurrentPage(page);  
  };

 return {  
    // ... all existing code,  
    handlePageChangeMui,  
  };