Possible to use useQueryStates but with a not explicitly known schema?

[heylookalive]

Hi, I'm trying to build out a Tanstack table incl filters and was wondering if its possible to grab all query state params via a zod schema e.g.

  const filtersSchema = getUsersDataQuerySchema.omit({
    page: true,
    pageSize: true,
    sort_by: true,
    sort_order: true,
  });

  const [columnFilters] = useQueryState('filters', {
    serialize: (obj) => encodeURIComponent(JSON.stringify(obj)),
    parse: (query) => filtersSchema.parse(JSON.parse(decodeURIComponent(query))),
  });

[franky47]

Yes that example should work (you could even use parseAsJson which accepts a parse function from a Zod schema).

[heylookalive]

Hey! Thank you for the reply!

I did try this exact code but on load where we have a URL of users?page=1&role=admin,accounts the columnFilters value is null.

I just picked filter as a key for the useQueryState hook to have something to put there.

The actual query string values are things like page, pageSize, sort_by, email, id, role etc etc

[franky47]

If you're trying to capture all search params and feed that to your schema for filtering/parsing/validating, then the hooks won't work, they need to know the key they're working with.

What you could do however is transform your Zod schema into an object that describes each key as how to serialise/deserialise and parse/validate, then feed that to useQueryStates.

This wrapper only supports a subset of types and associated SerDe methods, but it could be used as an inspiration:

https://github.com/dewstouh/nuqs-zod-adapter

As for why we need SerDe separated from parsing and validation:

https://nuqs.47ng.com/blog/beware-the-url-type-safety-iceberg