wrong url after refresh page

[veffev]

I using next-usequerystate library with Next Js 13, my problem is that when I refresh the page the state on url is lost . This is the url:

localhost:3000/?page=1&genres=tree

When I refresh the page the URL will be :

localhost:3000/

But if I check with console.log(page) and console.log(genres) my states I see the data

I think that the URL started on server component so when my client component start with the status the URL is already setted.

This is 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

I tried to avoid the problem with this solution :

useEffect(() => { setGenres(genres) setPageIndex(pageIndex) }, [])

I don't think is a good solution, but it works.

is there anyone having the same problem? Can you help me?

[franky47]

Do you have a minimal reproduction somewhere? What are your exact versions of Next.js and next-usequerystate?

[veffev]

Sure...

I use:

• next-usequerystate 1.10.0
• NextSj 14

[franky47]

Ok, you need to make sure you're not using Next.js 14.0.2 or higher, as there is currently a bug with prefetch links that may explain the behaviour you encounter.

See #388.

[veffev]

Thank you ! When are you thinking of fixing it?

[franky47]

Unfortunately the issue is on Next.js itself, I have a PR open to fix it. See vercel/next.js#58297.

[veffev]

Thank you

[franky47]

@veffev Could you please try the following combination, and let me know if you are still experiencing this issue?

• next@14.0.3-canary.6
• next-usequerystate@1.12.0-beta.1
• Setting the experimental flag windowHistorySupport to true

Edit: the prefetch fix has been released in Next.js, so you should be able to get it working with:

• next@14.0.3-canary.8
• next-usequerystate@latest
• No experimental flag

[serhii-yakymuk]

@franky47 I am currently using next@14.0.3-canary.8 and next-usequerystate@latest.
Whenever I change URL on client using useQueryState and use router.refresh afterwards, URL search params are being reset to the original value from server.
useQueryState still returns a client value though.

I'm not sure if this is connected to the issue discussed here, or is it something different?

[franky47]

@serhii-yakymuk make sure to await the state update before calling router.refresh:

setQuery(...).then(() => router.refresh())

If that's already the case and the URL still gets reset, could you try enabling the experimental windowHistorySupport in the Next.js config and see if it occurs with that?

[serhii-yakymuk]

@serhii-yakymuk make sure to await the state update before calling router.refresh:

setQuery(...).then(() => router.refresh())

If that's already the case and the URL still gets reset, could you try enabling the experimental windowHistorySupport in the Next.js config and see if it occurs with that?

Thanks, setting windowHistorySupport to true has helped :)

I am calling router.refresh in a different part of the app, after a mutation, so it's definitely not a race condition with setQuery

[franky47]

@serhii-yakymuk Thanks for the feedback, I'll run some tests without the flag to see what's going on.