Query params namespaces

[Kostiantyn Doichev]

Hey!

Could you tell me, please, whether it's possible to add some kind of namespace or prefix to the query params? This is useful in case we use the library for storing table pagination info, like offset, limit, searchText... However, what should we do in case there is more than 1 table on the page? I wonder if we could transform the params to something like this:
?documents:offset=10&documents:limit=25&reports:offset=0&reports:limit=15

Thank you in advance

[Peter Beshai]

Here are examples of three approaches that could work:

Example 1 - useQueryParam

const prefix = 'documents'
const [limit, setLimit] = useQueryParam(`${prefix}:limit`, NumberParam)

// ...

<button onClick={() => setLimit(35)}>Set limit ({limit})</button>

Example 2 - useQueryParams and destructure yourself

const prefix = 'documents'
const [query, setQuery] = useQueryParams({
  [`${prefix}:limit`]: NumberParam,
  [`${prefix}:offset`]: NumberParam,
})
const limit = query[`${prefix}:limit`]

// ...

<button onClick={() => setQuery({ [`${prefix}:limit`]: 35 })}>
  Set limit ({limit})
</button>

Example 3 - useQueryParams and a custom param that includes the prefix

const prefix = 'documents'

const { LimitParam, OffsetParam } = React.useMemo(() => {
  return {
    LimitParam: { ...NumberParam, urlName: `${prefix}:limit` },
    OffsetParam: { ...NumberParam, urlName: `${prefix}:offset` },
  }
}, [prefix])

const [{ limit, offset, ...other }, setQuery] = useQueryParams({
    limit: LimitParam,
    offset: OffsetParam,
  })

// ...

<button onClick={() => setQuery({ limit: 25 })}>Set limit ({limit})</button>

[Kostiantyn Doichev]

Wow, thanks