Currently, I am using the next-usequerystate library with Next Js 13. However, I have encountered an issue where the state on the URL is lost when I refresh the page.
The initial URL looks like this:
localhost:3000/?page=1&genres=tree
But upon refreshing the page, the URL becomes:
localhost:3000/
Oddly enough, when I use console.log to check the values of 'page' and 'genres', I can see that the data is still present in the states.
I suspect that the URL is being reset at the server component level, causing the client component to initialize with a blank URL.
This is a snippet of my code:
'use client'
import React from 'react'
import {
useQueryState,
parseAsArrayOf,
parseAsString,
parseAsInteger,
} from 'next-usequerystate'
import Filters from './Filters'
import ListItem from './ListItem'
const ListProvider = () => {
const [genres, setGenres] = useQueryState(
'genres',
parseAsArrayOf(parseAsString).withDefault([])
)
const [pageIndex, setPageIndex] = useQueryState(
'page',
parseAsInteger.withDefault(1)
)
return (
<>
<Filters genres={genres} setGenres={setGenres} />
<ListItem
genresFilters={genres}
setGenres={setGenres}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
/>
</>
)
}
export default ListProvider
To tackle this problem, I attempted the following solution:
useEffect(() => {
setGenres(genres)
setPageIndex(pageIndex)
}, [])
While this workaround seems to work, I do not consider it to be an ideal solution. Are there others facing similar challenges? Any suggestions or assistance would be greatly appreciated.