Infinite Scroll with React useInfiniteQuery

Question

I am new to react-query and I am having some trouble implementing the useInfiniteQuery function. I've tried implementing it into my website, however it doesn't seem to increment the pageIndex variable as it should. The pageIndex remains at 0 all the time, hence duplicating my posts every time I'm fetching the data. The offset variable is used for my database to get the n row from where the query is to be fetched.

Looking for help, thanks.

Here is the front-end part:

import React from "react";
import { useRef, useCallback} from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { useInfiniteQuery } from "react-query";

const PAGE_LIMIT = 10;

const fetchPosts = async (key, pageIndex = 0) => {
  const offset = pageIndex * PAGE_LIMIT;
  try {
    const { data } = await axios.get(`/posts`, {
      params: { offset: offset, limit: PAGE_LIMIT },
    });
    return data;
  } catch (err) {
    console.log(err);
  }
};

const Home = () => {
  const {
    fetchNextPage,
    hasNextPage, 
    isFetchingNextPage, 
    data,
    status,
    error,
  } = useInfiniteQuery("/posts", ({ pageIndex = 0 }) => fetchPosts(pageIndex), {
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.length ? allPages.length : undefined;
    },
  });

  const intObserver = useRef();
  const lastPostRef = useCallback(
    (post) => {
      if (isFetchingNextPage) return;

      if (intObserver.current) intObserver.current.disconnect();

      intObserver.current = new IntersectionObserver((posts) => {
        if (posts[0].isIntersecting && hasNextPage) {
          console.log("We are near the last post!");
          fetchNextPage();
        }
      });

      if (post) intObserver.current.observe(post);
    },
    [isFetchingNextPage, fetchNextPage, hasNextPage]
  );

  if (status === "error")
    return <p className="center">Error: {error.message}</p>;

  const content = data?.pages.map((pg) => {
    return pg.map((post, i) => {
      if (pg.length === i + 1) {
        return (
          <Link ref={lastPostRef} className="link" to={`/post/${post.id}`}>
            <div className="post" key={post.id}>
              <p> {post.title}</p>
              <p> {post.content}</p>
            </div>
          </Link>
        );
      }
      return (
        <Link className="link" to={`/post/${post.id}`}>
          <div className="post" key={post.id}>
            <p> {post.title}</p>
            <p> {post.content}</p>
          </div>
        </Link>
      );
    });
  });

  return (
    <div>
      <div className="home">
        <div className="container">
          <div className="posts">
            {content}
            {isFetchingNextPage && (
              <p className="center">Loading More Posts...</p>
            )}
            <p className="center">
              <a href="#top">Back to Top</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;

Here is the back-end part:

import { db } from "../db.js";

export const getPosts = (req, res) => {
  const { offset, limit } = req.query;
  console.log(`Offset is ${offset}`);
  const q = `SELECT * FROM test1 ORDER BY ID LIMIT ?, ?`;

  db.query(q, [parseInt(offset), parseInt(limit)], (err, data) => {
    if (err) return res.status(500).json(err);

    return res.status(200).json(data);
  });
};

Answer 1

The fetch callback you give useInfiniteQuery receives a QueryFunctionContext. It has a property called pageParam. You use pageIndex which is not on that object. Because you give it a default value of 0 it will just always be zero. Use pageParam instead.