Add defaults to url on load

[jonkwheeler]

Please tell me I'm missing something. I'm trying to ensure that all the proper url param are there on page load, or loading of a dynamic import (Next.js), etc.

I'd prefer there be a server-side or middleware nuqs function to do this without a lot of manual work, however, I'm having to do this a lot.

'use client'

import { useEffect } from 'react'

import { useSearchParams } from 'next/navigation'

import { parseAsStringLiteral, useQueryState } from 'nuqs'

const DEFAULT_NETWORK_SOLANA = 'devnet'

export const networks = ['devnet', 'testnet', 'mainnet-beta'] as const

export type Network = (typeof networks)[number]

export function useQueryStateNetworkSolana() {
  const queryStateNetworkSolana = useQueryState(
    'network',
    parseAsStringLiteral(networks)
      .withDefault(DEFAULT_NETWORK_SOLANA)
      .withOptions({ clearOnDefault: false }),
  )

  const [val, set] = queryStateNetworkSolana

  const searchParams = useSearchParams()

  useEffect(() => {
    if (!searchParams.get('network')) {
      set(DEFAULT_NETWORK_SOLANA)
    }
  }, [val, set, searchParams])

  return queryStateNetworkSolana
}

This seems like it should be an out-of-the-box function in a way. But ultimately I feel like I'm using nuqs incorrectly. Please humor me! Thanks!

[franky47]

This is a side-effect that nuqs does not do on its own, it's been discussed a few times:

• Persisting defaultValue in the URL on Mount #842
• Add defaultValue to URL #940
• `withDefaults` should (optionally) populate the URL #761