Removing invalid states from the URL

[stychu]

Hi, I would like to have a custom filter parser where it only accepts allowed values to be present otherwise the param should be removed or cleared out from the invalid value. But I have a problem with handling the invalid value still persisting in in the url despite it being invalid. This probably doesnt clear the value from url because of eq check if im not mistaken. But how I can debug the eq function? It doesnt seem to fire like the serialize or parse where I can check the values.

Anyway here is what I have for now

const filterParser = (options: string[]) =>
  createParser({
    parse(query) {
      const values = parseAsArrayOf(parseAsString).parse(query);

      if (values === null) return null;
      if (
        !values.every((filter) =>
          options
            .map((option) => toKebabCase(option.toLowerCase()))
            .includes(toKebabCase(filter.toLowerCase())),
        )
      ) {
        return null;
      }

      return values;
    },
    serialize(value) {
      return parseAsArrayOf(parseAsString).serialize(value);
    },
    eq(a, b) {
      console.log('AAA -> ', a);
      console.log('BBB -> ', b);
      return false;
    },
  });
  
  
  const allowedFilters = ['filterA', 'filterB']
  
   const [typeFilter, setTypeFilter] = useQueryState(
    'type',
    filterParser(allowedFilters).withDefault([]),
  );
  

So I want url to only have ?type=filterA,filterB as param values if anything else it should clear completely the param from url or only the invalid value. How do i do that

[stychu]

Seems it work when I dynamically change values from within application but when I reload the page the params persist. This also seems to happen on the homepage of nuqs.
Is this desired default behavior that when parser doesnt parse the param its left as is ?? Shouldnt it be removed ??

https://nuqs.47ng.com/?count=okok // <--- I would expect this param to be automatically removed as its not valid

Is validation only achievable via useEffect or something ? Where i need to manually check params and set manually if not valid ?

[franky47]

Here's how it works:

• The parse function of parsers needs to return null (or throw an error) if the incoming query string is invalid (eg: banana for an integer state).
• If there is a default value specified, it is returned as state instead (as if the URL didn't contain any value, because it doesn't contain a valid value).
• The equality function is only evaluated when setting the state, to check against the default value, and remove it from the URL (when clearOnDefault is set to true, which is the case by default).
• nuqs will not automatically touch the URL (like adding default values to the URL, or removing invalid ones). This is a side-effect that needs to be handled carefully to avoid conflicts between components hooked onto the same key.

One of the issues is that we don't have a way to know the reason why a state is null/default (is it not present in the URL vs is it invalid). This is something we might address when adding support for validation with Zod / Valibot / ArkType / Standard Schema.