useInfiniteQuery : hasNextPage returns false even if returning value from getNextPageParam

[dvpateliy]

I am trying to implement infinite scroll using usInfiniteQuery.

Problem :
I have returned a value from getNextPageParam to make hasNextPage true, but it is still showing false when used for fetching second page.
It gets true and runs well when some state updates.

This is the code.

const fetchRepositoryData = async ({ pageParam = 1 }) => {
    const response = await axios.get(`https://api.github.com/search/repositories?q=topic:reactjs&per_page=30&page=${pageParam}`)
    return response.data
}

const {
    data: repositoryData,
    fetchNextPage: fetchNextRepositoryData,
    hasNextPage: hasNextRepositoryPage,
    isFetchingNextPage: isFetchingNextRepositoryPage
} = useInfiniteQuery({
    queryKey: ["Repository"],
    queryFn: fetchRepositoryData,
    getNextPageParam: (lastPage, allPages) => {
        const maxPage = Math.ceil(lastPage.total_count / 30);
        const nextPage = allPages.length + 1;
        return nextPage <= maxPage ? nextPage : undefined;
    }
})

useEffect(() => {

    let fetching = false

    const onScroll = async (event) => {
        const { scrollHeight, scrollTop, clientHeight } = event.target;
        if (!fetching && (scrollHeight - scrollTop <= clientHeight * 1.5)) {
            fetching = true;
            console.log(hasNextRepositoryPage)    // Here it shows false
            if (hasNextRepositoryPage) await fetchNextRepositoryData();
            fetching = false;
        }
    }

    document.getElementById("Scrollable-Div").addEventListener("scroll", onScroll)
    return () => {
        document.getElementById("Scrollable-Div").removeEventListener("scroll", onScroll)
    }

}, [])

return (
    <div className='container'>
        <h1 className='header'>Repositories {hasNextRepositoryPage}</h1>
        <div id='Scrollable-Div' className='list-outter-container'>
            {repositoryData?.pages.map((page) => (
                page.items.map((item) => (
                    <div key={item.id} className='list-container'>
                        <p><b>{item.name}</b></p>
                        <p>{item.description}</p>
                    </div>
                ))
            ))}
            {isFetchingNextRepositoryPage && <h3 className='loading-message'>Loading...</h3>}
        </div>
    </div>
)

[TkDodo]

I would need to see a reproduction to comment on this

[dvpateliy]

Got the answer, when i had added the hasNextPage as hasNextRepositoryPage to the dependency of useEffect the inifinite query ran perfectly.

Thank you for replying. Have a nice day @TkDodo.