useIfiniteQuery with additional query params

[renanfcamara]

Hi, im currently developing an timeline page with useIfiniteQuery and an InfiniteScroll

i have 3 possible params to my endpoint: page, sort and search

i can add sort and search to my dependency key, but when i scroll down to fetch more data, my endpoint is fetching with olders params but page.

Here is my code:

const [ sort, setSort ] = useState({ timelineDate: -1 });
const [ search, setSearch ] = useState('');
const [ page, setPage ] = useState(1);

const handleChangeSort = async (newSort) => {
  setSort(newSort);
}

const handleChangeSearch = (newSearch) => {
  setSearch(newSearch);
}

const { data, fetchNextPage, hasNextPage, isFetching, isLoading } = useInfiniteQuery({
    queryKey: getTimelineKey(search, sort), 
    queryFn: ({ pageParam = 1 }) => timelineService.getTimeline(pageParam, sort, search),
    getNextPageParam: (lastPage, allPages) => lastPage.paging.hasNextPage ? lastPage.paging.page + 1 : undefined
})

<button onClick={() => handleChangeSort({ favorites: -1 }) }>Filter to favorites</button>

<InfiniteScrollExample
  next={fetchNextPage}
  hasMore={hasNextPage}
  scrollThreshold={'90%'}
>

After change my sort to { favorites: -1 }

payload when fires pagination

Im wondering, there's any way to preserve my sort and search?

[TkDodo]

code looks good. show a codesandbox reproduction please