47ng/nuqs

Cannot link from page where useQueryState is used

camin-mccluskey opened this issue · 1 comments

camin-mccluskey commented

Context

What's your version of nuqs?

"nuqs": "^1.16.1"

Next.js information (obtained by running next info):

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:43:05 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6020
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: N/A
  pnpm: 8.14.1
Relevant Packages:
  next: 14.1.1-canary.45
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Are you using:

  • ❌ The app router
  • ✅ The pages router
  • ❌ The basePath option in your Next.js config
  • ❌ The experimental windowHistorySupport flag in your Next.js config

Description

Suffering router abort fetch errors from a page where nuqs is used. This occurs when the page is SSG and SSR. More details in this issue comment.

Update: setting the throttleMs option to 200ms "solves" the issue for me.

  const [comparisonProductApplicationIds, setComparisonProductApplicationIds] = useQueryState(
    'comparisonPAIds',
    parseAsArrayOf(parseAsString).withDefault([]).withOptions({
      throttleMs: 200,
    }),
  )

Reproduction

camin-mccluskey commented

Issue was due to a bad useEffect call which was rerendering the page

  • 👍1