Server side pagination is not working as expected - reactjs

Question

I am developing a MERN stack app where I am trying to implement server side pagination.
Note that I am using React Query for managing server state.
On the root route, I display two posts.
When I click on the Next button, NEXT two blog posts should be displayed. However, this is not happening. I see the same two posts on page 2 as on page 1.
Where is the problem?
I think, there is either some problem with my server side pagination logic or with React Query. I suspect React Query is not fetching blog posts when I click on the Next button; instead it is fetching the posts from the cache. (I could be wrong here).
These are my code snippets:
postControllers.js
const asyncHandler = require("express-async-handler");
const Post = require("../models/postModel");
const fetchAllPosts = asyncHandler(async (req, res) => {
const { pageNumber } = req.body;
const pageSize = 2;
const postCount = await Post.countDocuments({});
const pageCount = Math.ceil(postCount / pageSize);
const posts = await Post.find({})
.limit(2)
.skip(pageSize * (pageNumber - 1));
res.json({ posts, pageCount });
});
postRoutes.js
const express = require("express");
const { fetchAllPosts, createPost } = require("../controllers/postControllers");
const router = express.Router();
router.get("/api/posts", fetchAllPosts);
module.exports = router;
Posts.js
import React, { useState } from "react";
import { useFetchAllPosts } from "../hooks/postsHooks";
import Spinner from "../sharedUi/Spinner";
const Posts = () => {
const [pageNumber, setPageNumber] = useState(1);
const { data, error, isLoading, isError } = useFetchAllPosts(pageNumber);
const handlePrevious = () => {
setPageNumber((prevPageNum) => prevPageNum - 1);
};
const handleNext = () => {
setPageNumber((prevPageNum) => prevPageNum + 1);
};
return (
<div>
{isLoading ? (
<Spinner />
) : isError ? (
<p>{error.message}</p>
) : (
data.posts.map((post) => (
<p className="m-6" key={post.title}>
{post.title}
</p>
))
)}
<div>
{isLoading ? (
<Spinner />
) : isError ? (
<p>{error.message}</p>
) : (
<div className="flex justify-between m-6 w-60">
<button
disabled={pageNumber === 1}
className="bg-blue-400 px-1 py-0.5 text-white rounded"
onClick={handlePrevious}
>
Previous
</button>
<p>{data.pageCount && `Page ${pageNumber} of ${data.pageCount}`}</p>
<button
disabled={pageNumber === data.pageCount}
className="bg-blue-400 px-1 py-0.5 text-white rounded"
onClick={handleNext}
>
Next
</button>
</div>
)}
</div>
</div>
);
};
export default Posts;
postHooks.js
import { useQuery, useMutation, useQueryClient } from "#tanstack/react-query";
import { useNavigate } from "react-router-dom";
import axios from "axios";
export const useFetchAllPosts = (pageNumber) => {
const response = useQuery(["posts"], async () => {
const { data } = await axios.get("/api/posts", pageNumber);
return data;
});
return response;
};

Answer 1

all dependencies of a query (= everything that is used inside the query function) needs to be part of the query key. React Query will only trigger auto fetches when the key changes:
export const useFetchAllPosts = (pageNumber) => {
const response = useQuery(["posts", pageNumber], async () => {
const { data } = await axios.get("/api/posts", pageNumber);
return data;
});
return response;
};
to avoid hard loading states between pagination, you might want to set keepPreviousData: true
see also:
the official pagination example
the guide on paginated queries