I was trying to perform the infinite-query using a json-server data. I have tried this with react-query, not tanstack query. It is not throwing any error, but showing the same value again and again. I have checked for pageParams working or not, it is increasing properly. Infact the button disabled thing also working fine, but data is not changing, it is not appending the new data. Can anyone please help?

The code is:

import { useInfiniteQuery } from "react-query";
import axios from "axios";
import React from "react";

const fetchUsers = ({ pageParam = 1 }) =>
  axios.get(`http://localhost:1000/users?_page=${pageParam}&_limit=2`);

const InfiniteQuery = () => {
  const {
    isLoading,
    isError,
    error,
    data,
    hasNextPage,
    fetchNextPage,
    isFetching,
    isFetchingNextPage,
  } = useInfiniteQuery(["users"], fetchUsers, {
    getNextPageParam: (_lastPage, pages) => {
      if (pages.length < 3) {
        return pages.length + 1;
      } else {
        return undefined;
      }
    },
  });
  console.log("data", data);

  if (isLoading) {
    return <h2>Loading...</h2>;
  }
  if (isError) {
    return <h2>{error.message}</h2>;
  }
  return (
    <div>
      {data?.pages.map((usrGrp, index) => (
        <React.Fragment key={index}>
          {usrGrp?.data.map((usr) => (
            <div key={usr.id}>
              <h2>{usr.name}</h2>
              <hr />
            </div>
          ))}
        </React.Fragment>
      ))}
      <div>
        <button disabled={!hasNextPage} onClick={fetchNextPage}>
          Load more
        </button>
      </div>
      <div>{isFetching && !isFetchingNextPage ? "Fetching..." : null}</div>
    </div>
  );
};

export default InfiniteQuery;

And the json data is:

{
  "users": [
    {
      "id": "1",
      "name": "John Doe"
    },
    {
      "id": "2",
      "name": "Mary James"
    },
    {
      "id": "3",
      "name": "Tom Brown"
    },
    {
      "id": "4",
      "name": "Ron Watson"
    },
    {
      "id": "5",
      "name": "Luna Paul"
    },
    {
      "id": "6",
      "name": "Richard Harris"
    }
  ]
}

I was trying to perform the infinite-query using a json-server data. I have tried this with react-query, not tanstack query. It is not throwing any error, but showing the same value again and again. I have checked for pageParams working or not, it is increasing properly. Infact the button disabled thing also working fine, but data is not changing, it is not appending the new data. Can anyone please help?

The code is:

import { useInfiniteQuery } from "react-query";
import axios from "axios";
import React from "react";

const fetchUsers = ({ pageParam = 1 }) =>
  axios.get(`http://localhost:1000/users?_page=${pageParam}&_limit=2`);

const InfiniteQuery = () => {
  const {
    isLoading,
    isError,
    error,
    data,
    hasNextPage,
    fetchNextPage,
    isFetching,
    isFetchingNextPage,
  } = useInfiniteQuery(["users"], fetchUsers, {
    getNextPageParam: (_lastPage, pages) => {
      if (pages.length < 3) {
        return pages.length + 1;
      } else {
        return undefined;
      }
    },
  });
  console.log("data", data);

  if (isLoading) {
    return <h2>Loading...</h2>;
  }
  if (isError) {
    return <h2>{error.message}</h2>;
  }
  return (
    <div>
      {data?.pages.map((usrGrp, index) => (
        <React.Fragment key={index}>
          {usrGrp?.data.map((usr) => (
            <div key={usr.id}>
              <h2>{usr.name}</h2>
              <hr />
            </div>
          ))}
        </React.Fragment>
      ))}
      <div>
        <button disabled={!hasNextPage} onClick={fetchNextPage}>
          Load more
        </button>
      </div>
      <div>{isFetching && !isFetchingNextPage ? "Fetching..." : null}</div>
    </div>
  );
};

export default InfiniteQuery;

And the json data is:

{
  "users": [
    {
      "id": "1",
      "name": "John Doe"
    },
    {
      "id": "2",
      "name": "Mary James"
    },
    {
      "id": "3",
      "name": "Tom Brown"
    },
    {
      "id": "4",
      "name": "Ron Watson"
    },
    {
      "id": "5",
      "name": "Luna Paul"
    },
    {
      "id": "6",
      "name": "Richard Harris"
    }
  ]
}

• reactjs
• react-query
• json-server

1 Answer 1

I have finally found the solution. I have changed axios.get(http://localhost:1000/users?_page=${pageParam}&_limit=2); this to : axios.get(http://localhost:1000/users?_page=${pageParam}&_per_page=2);

The response is a little complex, I have used map within a map to display data, But it is working fine.

The return part is :

 return (
    <div>
      {
        data?.pages?.map((page,index)=>(
          <React.Fragment key={index}>
          {
            page.data.data.map((usr) => (
              <div key={usr.id}>
                <h2>{usr.name}</h2>
                <hr />
              </div>
            ))
          }
          </React.Fragment>
        ))
      }
      <div>
        <button disabled={!hasNextPage} onClick={fetchNextPage}>
          Load more
        </button>
      </div>
      <div>{isFetching && !isFetchingNextPage ? "Fetching..." : null}</div>
    </div>
  );