Set empty query param (i.e. ?foo)

[correttojs]

When I call setFoo(null) the query param is removed. Is it possible to set an empty value instead? Either ?foo&bar=value or ?foo=&bar=value
I could create an EmptyParam encoder/decoder, is there any simpler option?

[guiherzog]

This would help me as well.

[pbeshai]

Hmm this is a good point. I think empty string '' could work... but probably makes sense to just allow null values and require setting "undefined" for it to be removed.

[guiherzog]

@pbeshai Thank you for your answer.

The use case I have is the following:

I have a query param that is an array. (For a filter, for example). But if this filter is not set, I have a default value for it, however, if the user explicitly wants to remove all values on it, I want the query param to be an empty array, instead of undefined (otherwise, it would get the default value again).

This is how it would look like in code:

const defaultFilter = ['onlyAvailable', 'onlyOnline'];
const Component = () => {
  const [filter = defaultFilter, setFilter] = useQueryParams();

  // If user calls this, it wants to remove all filters;
 const removeAllFilters = () => setFilter([]);
}

As you can see, the case above is not possible. Because if I set the filter empty, it changes it to undefined instead of an empty array, and that's also valid for strings and other types.

Any other suggestions would also be appreciated.

I would also be happy to help on working on that.

[pbeshai]

Ok I see. The function that needs to be adjusted is here https://github.com/pbeshai/serialize-query-params/blob/master/src/updateLocation.ts#L8

I am not sure offhand the repercussions of not calling filterNully (i.e., if we set a query param to undefined does it still remove it?). Maybe it just needs to be replaced as filterUndefined instead of nully. Would need some testing, but if you want to take a stab at it please do. There should be tests in each repo that will need adjusting. Sorry I'm a bit busy right now to do it myself

[guiherzog]

Hi, thanks for the answer. I understand that, I am also quite busy too.

I am not sure if I will be able to take a look soon, but I will sure add to my todo list and hope for it not to be forgotten.

Have a good week :)

[JeffBaumgardt]

I have exactly the opposite issue. I have an api where null means something and I am using this to prepare search. In my use case I have fields that are either string[] | undefined not null. Using the DelimitedArrayParam has the default (string | null}[] | null | undefined and the null is biting me.

Is there a simple way to express that a query param cannot be null?

value	encoding
['a', 'b', 'c', 'd']	?qp=a_b_c_d
undefined	? (removed from URL)

[JeffBaumgardt]

It's also the same with the null[] as a possibility. I know it's difficult because you've gotten explicit requests to do these. ie #73, pbeshai/serialize-query-params#20

[pbeshai]

I added withDefault for this, does it work for you? It will convert nulls to the default value... so you can do:

const MyArrayParam = withDefault(DelimitedArrayParam, undefined)

const [myArray, setMyArray] = useQueryParam('arr', MyArrayParam);
setMyArray(null) // should be converted to undefined and work as you want

Essentially the idea here is the default serializers now accept and handle null and empty string, but if you prefer simpler serializers that only deal with undefined and strings, you can use your own encoders... or do what I did above. I haven't ever wanted null params myself, so I expect to do something like the above. In my apps I typically have a urlParams.ts file that has my custom params and I just import from there anyway. I think it's best to predefine the withDefault instead of doing it inline like useQueryParam('arr', withDefault(DelimitedArrayParam, undefined)) since this will return a new parameter type each render.

[pbeshai]

You also mayyyyyyy be able to set the skipNull option in <QueryParamProviders stringifyOptions={...}> but I haven't tried it...

[JeffBaumgardt]

Thank you I will give those a try. I am thinking it has more to do with the actual types on QueryParamConfig

/**
 * Configuration for a query param specifying how to encode it
 * (convert it to a string) and decode it (convert it from a string
 * back to its native type)
 *
 * D = type to be encoded
 * D2 = type from decode (typically = D)
 */
export interface QueryParamConfig<D, D2 = D> {
    /** Convert the query param value to a string */
    encode: (value: D) => string | (string | null)[] | null | undefined;
    /** Convert the query param string value to its native type */
    decode: (value: string | (string | null)[] | null | undefined) => D2;
}

The encode has a null as a possibility on the return so the query value is typed as string | (string | null)[] | null | undefined So the result of something like StringParam can be a string | null | undefined

I've basically re-created all the param functions but removed null and labeled them as required. So string | undefined. So either way I'm working, it's just in my api null means something and if I patch call null will clear out a value in the database where if it's undefined the param is just not sent at all, so I have to be careful when I send nulls around.

[JeffBaumgardt]

In my apps I typically have a urlParams.ts file that has my custom params and I just import from there anyway

Do you have a public example of this? I'm just curious.