useInfiniteQuery jumps to bottom after fetchMore is executed

[idenyigabriel]

Hello,
I am currently working on a project and using the react-query for the first time. I am looking to implement an infinite load feature, which works fine using the useInfiniteQuery hook. However the page jumps to the bottom whenever fetchMore is executed.
Any idea, how I can use this infiniteQuery feature without skipping from the user's current view to the page bottom?

Here is a snippet of my current code.

import React from 'react'
import { useInfiniteQuery, useQueryCache } from 'react-query'
import Card from './Card'
import '../css/headlines.css'


function Headlines() {

    const cache = useQueryCache

    const getHeadline = async (key, nextCursor=1 ) => {
        const response = await fetch(
            `${process.env.REACT_APP_FEED_BASE_URL}headlines/?cursor=${nextCursor}`)
        return response.json()
    }

    const { 
        status, 
        data, 
        isFetching, 
        isFetchingMore, 
        fetchMore, 
        canFetchMore, 
        } = useInfiniteQuery('headlines', getHeadline, {
            getFetchMore: (lastGroup, allGroups) => {
                lastGroup.page = lastGroup.next?.split('=')[1]
                return lastGroup.page;
            }
    })

    
    return (
        <>
            {data && data.map((group, i) => (
                <React.Fragment key={i}>
                    {group.results.map((headline, index) =>  
                        <Card key={headline.id}
                            details={headline}
                            index={index}
                        />
                    )}
                </React.Fragment>
            ))}
            { canFetchMore && 
                <button onClick={() => fetchMore()}>
                    FETCH MORE
                </button>
            }
        </>
    )
}   export default Headlines

[idenyigabriel]

Apparently, changing the last part of my code from

{ 
    canFetchMore && 
       <button onClick={() => fetchMore()}>
            FETCH MORE
       </button>
}

to

{ 
       isFetchingMore ? (
                <div className="ellipse-wrapper">
                    <div class="lds-ellipsis">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
       ) :canFetchMore ? ( 
                <button onClick={() => fetchMore()}>
                    FETCH MORE
                </button>
       ) : ' '
}

fixed the issue. I hope that's a valid fix? 🙂

[tannerlinsley]

Yep! That's valid. It actually has more to do with how your browser keeps your scroll position in tact. If you are at the bottom of a screen, and more content is added above you, most browsers will now keep you scrolled to the bottom of the screen. So as you discovered you may have to pad the bottom of the screen with some content to keep it from doing that.