Working with objects

[ForeshadowRU]

Hi. I want to create helpers that will manager state for my filters. I need for my url to look like:
/admin/entity?filter[stage]=All
And but in the code I want simple JS Record { stage: "All" }
For that I am using qs.parse + stringify methods.

But using nuqs I am getting url like /admin/entity?filter=filter[stage]=All

Reproduction sandbox: https://codesandbox.io/p/sandbox/4k4skv

Can someone explain me why there is "filter=" part and how can I get rid of it?

[franky47]

The parse and serialize functions in custom parsers only work on the values of the search params, but here by using qs you're specifying the key again as part of the value.

[ForeshadowRU]

So, how can I achieve this without qs? From what I read from documentation there is only json option but thats not quite it.

[franky47]

What I can see is that your keys are dynamic: they contain the name of the final key in the resulting object. Assuming you can enumerate the properties you want to support in that object, you could do something like this:

1. Turn that list of properties into a descriptor of parsers to use (they will need to have all the same type, so if you have multiple data types you could split those into separate hooks, each aggregating properties of the same type)
2. Use the urlKeys feature to remap those logical property names into dynamic keys in the url, by adding the filter[${property}] format
3. Feed that to useQueryStates

Example:

import {
  parseAsString,
  useQueryStates,
  type ParserBuilder,
  type UrlKeys
} from 'nuqs'

export function useFilters<Properties extends string>(
  properties: Properties[],
  defaults: Record<Properties, string>
) {
  // Memoization omitted for brevity
  const parsers = Object.fromEntries(
    properties.map(property => [
      property,
      parseAsString.withDefault(defaults[property])
    ])
  ) as Record<Properties, ParserBuilder<string> & { defaultValue: string }>
  const urlKeys = Object.fromEntries(
    properties.map(property => [property, `filter[${property}]`])
  ) as UrlKeys<typeof parsers>
  return useQueryStates(parsers, { urlKeys })
}

function Usage() {
  const [{ stage, foo, bar }, setFilters] = useFilters(
    // Properties
    ['stage', 'foo', 'bar'] as const,
    {
      // Default values
      stage: 'All',
      foo: 'foo',
      bar: 'bar'
    }
  )
  setFilters({ stage: 'Another' })
}

If you are able to statically define the properties, then it becomes easier, and you can mix and match data types:

function StaticUsage() {
  const [{ stage, int, bool }, setFilters] = useQueryStates(
    {
      stage: parseAsStringLiteral(['All', 'Some', 'None']).withDefault('All'),
      int: parseAsInteger.withDefault(42),
      bool: parseAsBoolean.withDefault(false)
    },
    {
      urlKeys: {
        stage: 'filter[stage]',
        int: 'filter[int]',
        bool: 'filter[bool]'
      }
    }
  )
}

[ForeshadowRU]

Thank you, very much.