useSwrInfinite with react-infinite-scroll-component | after changing fetch key -> current index does not reset

[talkl]

Bug report

userSwrInfinite + react-infinite-scroll-component bug

Description / Observed Behavior

I have react-infinite-scroll-component with useSwrInfinite integration. I also have an input to search by name the api. if i'm beyond page 1 and do a search (thus changing the useSwrInfinite key), useSwrInifinite will start searching serially all pages until the current page i am 1...N. It's interesting to observe that if my scroll position is viewing only the first page, then only the first page will be fetched not 1...N

Expected Behavior

I expect that on change of key in useSwrInfinite get key function will reset the scroll position to the first page.

Repro Steps / Code Example

https://codesandbox.io/s/react-infiinite-scroll-component-with-userswrinfinite-bug-reproduce-ch7hi

Reproduce steps:

1. click the repositories link to go to the page where the bug happens
2. if you need to refresh please refresh the whole page (because of detecting mobile css)
3. scroll a few pages down (see that react-infinite-scroll-component fetches the pages)
4. now search for a name in the input field.
5. you can see useSwrInfinite serially fetching 1...N (pages) one by one.

Expected Behaviour steps:

1. instead of scrolling -> search after the first load of the page
2. you can see now useSwrInfinite only fetches the first (1) page.

another way to see expected behaviour:

1. scroll a few pages
2. pages are fetched normally
3. now scroll back to first (1) page
4. now search for a term
5. see that useSwrInfinite only fetches the first page

Thank you guys I

https://user-images.githubusercontent.com/9368630/118966849-b04a4600-b972-11eb-8871-7cf439284d34.mov

appreciate it :)

[popsa85]

Same issue. Have to use this trick:

    React.useEffect(() => {
        const scrollable = document.getElementById("scrollableDiv");
        scrollable.scrollTop = 0
    },[searchString])

react-infinite-scroll-component latest with apollo graphql

[talkl]

@4ndv

can you help?

[talkl]

Same issue. Have to use this trick:

    React.useEffect(() => {
        const scrollable = document.getElementById("scrollableDiv");
        scrollable.scrollTop = 0
    },[searchString])

react-infinite-scroll-component latest with apollo graphql

doesn't work for me.

@popsa85 how can i reach you privately?

[talkl]

Made it work!

this is the solution:

https://github.com/vercel/swr/issues/1168#issuecomment-864490525