Bad understanding of useQueryStates

[DamienJoub]

I think there is some things that I don't understand with useQueryStates.

I have a list of many filters that I wanted to show in the url with useQueryStates.
By default, my route looks like this : /search

So first, I passed an empty object in useQueryStates like this :
const [filters, setFilters] = useQueryStates<UseQueryStatesKeysMap<filtersType>>({});
With :
type filtersType = { [key: string]: string; };

and I reallized that when I change one filter, my state was not updated and so the url.

I suppose it use the object passed as a reference and update the url only with the properties that match between them (none in this case).

The thing is I don't want to list all my filters since I have so many, included some filters generated dynamically by the result of an API call.

I saw this post that suggest to use a parser, but it seams to work only with params that already are in the url.

So my question is, is there a way to work like I want ?

[franky47]

I suppose it use the object passed as a reference and update the url only with the properties that match between them (none in this case).

Your intuition is correct: the object passed in is the reference for which keys are managed by the hook.

useQueryStates was designed to accept arbitrary keys, so if they are coming from an external source, you could craft a { [key: string]: parseAsString } object to pass it:

const filterKeys = ['foo', 'bar', 'egg'] // Suppose this is returned from an API call
const parsers = useMemo(
  () => Object.fromEntries(filterKeys.map((filterKey) => [filterKey, parseAsString])),
  [filterKeys.join(',')]
)

const [searchParams, setSearchParams] = useQueryStates(parsers)

[abhion]

@franky47 how do I clear dynamic values? I have this:

 const parsers = useMemo(() => {
    return Object.fromEntries(
      channels.map((channel) => [
        `${vehicleId}-${channel.index}`,
        parseAsJson(),
      ]),
    );
  }, [channels, vehicleId]);

  const [, setVehicleCameraInfo] = useQueryStates(parsers);

I tried:

void setVehicleCameraInfo((prev) => {
  const { [`${vehicleId}-${channelIndex}`]: _, ...rest } = prev;
  return rest;
});

but I still see the value in url

I tried setting the value to null and undefined but it didn't work

[franky47]

Setting the value to null should remove it from the URL.

You don't need to spread the previous values when setting via useQueryStates: just pass the ones you want to update, the rest will be left as-is.

void setVehicleCameraInfo({
  [`${vehicleId}-${channelIndex}`]: null
});