Preserving size in useSWRInfinite on navigation between key change

[pbshgthm]

Context

I have few pages that that use a custom useSWRInfinite hook

export function useFeed(feedId){

  const getKey = (pageIndex: any, previousPageData: any) => {
    if(!feedId) return null
    const baseUrl = `/api?feedId=${feedId}`
    if (previousPageData && !previousPageData.cursor) return null
    if (pageIndex === 0) return baseUrl
    return `${baseUrl}&cursor=${previousPageData.cursor}`
  }

  const { data, error, size, setSize } = useSWRInfinite(getKey)
  return {
    data,
    error,
    size,
    setSize
  }
}

With the options

const noRefreshSwr = {
  revalidateOnFocus: false,
  revalidateOnMount: true,
  revalidateOnReconnect: false,
  refreshWhenOffline: false,
  refreshWhenHidden: false,
  refreshInterval: 0,
  dedupingInterval: 10000,
  persistSize: false
}

And I use in different pages as follows

// pageA as /pageA
const feed = useFeed('feedA')

// pageB as /pageB
const feed = useFeed('feedB')

and in each of these pages, setSize() is used depending on context.

Issue

Let's say pageA's feed size is set to 3 after some scrolling. Then I navigate from pageA to pageB, feedB is loaded and back to pageA. Initially, pageA's scroll position is preserved (done via next-router-scroll). But after a few moments, pageA's feed data changes as if feed size is set to 1 and not 3, like it was before navigating.

I tried persistSize: false in option, but doesn't seem to work. I want to persist page sizes when nagivating between different pages using useFeed hook.

Current Working Solution (hacky?)

I tried preserving the feed size in URL params as /pageA?p={size} every time size is changed via setSize.

useEffect(() => {
    if (size) {
      router.push(`/shelf/bookmarks/?p=${size}`, undefined, {
        shallow: true
      })
    }
  }, [size])

And setSize(p) on router change so when navigating back to pageA the last size is set

useEffect(() => {
    if (router.query.p) {
      if (setSize) {
        setSize(parseInt(router.query.p))
      }
    }
  }, [router.pathname, setSize])

This works as expected but feels hacky. Is there a better way to solve this issue? What am I missing? How do I achieve the desired effect?