React Infinite Query Pagination PageParams Issue

[aldryn-gutierrez]

Hi everyone I would like to ask regarding Typescript and Infinite Queries. At the moment I have a page variable in the state (using useState hook) which I pass down the components and I am having issues with it if I traverse back to the page.

I can get all the data results as expected on first page:

But if I traverse back, it returns me all the results which is good but it seems the pageParams is all wrong already (all the items are repeated as well 😭):

My code inside the render function has this Infinite Query implementation:

const [page, setPage] = useState(props.page);
  
const productHitsQuery: InfiniteQueryObserverResult<SearchResponse<IAlgoliaHit>> = useInfiniteQuery(
  ["algolia-hit", props.categoryId, facetFilters, numericFilters],
  async (): Promise<SearchResponse<IAlgoliaHit>> => {
    return await searchByCategoryId(
      props.categoryId,
      facetFilters,
      numericFilters,
      page
    );
  },
  {
    getNextPageParam: (lastPage: SearchResponse<IAlgoliaHit>) =>
      lastPage.page + 1,
  }
);

useEffect(() => {
  setPage(0);
  setSearchFilters(new Map<string, Array<string>>());
}, [props.categoryId]);

useEffect(() => {
  void productHitsQuery.fetchNextPage();
}, [page]);

I am using useState for my page variable because deep down in my components I need this information, hence I do the fetchNextPage() trigger via the useEffect()

Am I using React Infinite Query wrongly?

[TkDodo]

it would really help if you'd trim that example down to a bare minimum and make a runnable codesandbox example out of it. As it stands, I have no idea what this is doing or where the issue is 😅

[aldryn-gutierrez]

My bad ill try to trim the file down

[aldryn-gutierrez]

I have trimmed the code snippet to the related code only, hope it makes sense

[aldryn-gutierrez]

I tried creating a simple component that utilizes Infinite Query but it seems the getNextPageParam doesnt work, it keeps hitting the same page which just keeps duplicating the entries (Hope this example is more meaningful or clear 😅) :

https://codesandbox.io/s/polished-frog-dq94u?file=/pages/index.tsx:0-1205

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

const fetchPeople = async (_, page = 1) => {
  console.log("I will use this page for API", page);
  return await axios.get(`https://swapi.dev/api/people/?page=${page}`);
};

const TestMe = (): JSX.Element => {
  const peopleQuery = useInfiniteQuery("people", fetchPeople, {
    getNextPageParam: (lastPage) => {
      const nextNumber = parseInt(lastPage.data.next.split("page=").pop());
      console.log("The Next Page to be called is", nextNumber);
      return nextNumber;
    }
  });

  return (
    <div>
      <div>People List</div>
      <div>
        {peopleQuery.data?.pages.map((page, index) => {
          return (
            <div key={index}>
              <hr />
              {page.data.results.map((result) => (
                <div key={result.name}>{result.name}</div>
              ))}
            </div>
          );
        })}
      </div>
      <button onClick={() => peopleQuery.fetchNextPage()}>Load More</button>
    </div>
  );
};

export default TestMe;

Page Params is duplicated based on React Query Devtools:

[TkDodo]

The result of getNextPageParam will be injected into the queryFn as part of the queryContext, which is the first parameter to the queryFn. It's an object containing the queryKey as well as the pageParam property, which is the value you seek.

from the example in the docs:

  const fetchProjects = ({ pageParam = 0 }) =>
     fetch('/api/projects?cursor=' + pageParam)

so you need to change your `fetchPeople function accoringly:

- const fetchPeople = async (_, page = 1) => {
+ const fetchPeople = async ({ pageParam = 1 }) => {

[aldryn-gutierrez]

My issue was that I was referencing from the React Query v2 wherein the format of arguments was like that. Upon checking the docs you are right that is it stated there to be like that for v3, it works fine now. Thank you very much :)