Support the useQueryState type generic argument with parser withDefault.

[ronny1020]

I have a code like the following and get a type error Type 'string | null' is not assignable to type 'OrderByDirection | null'.

export type OrderByDirection = 'desc' | 'asc';	

const [direction, setDirection] = useQueryState<OrderByDirection>(
   'direction',
    parseAsString.withDefault('desc'),  // get a type error here
);

if I remove the <OrderByDirection> there is no error but the type of direction would be string which I expect to be 'desc' | 'asc'.

I have found a walk around like this. However, could the code work like the previous one?

const [direction, setDirection] = useQueryState<OrderByDirection>(
   'direction',
    (parseAsString as ParserBuilder<OrderByDirection>).withDefault('desc'),
);

[franky47]

You'll need the parser to be a bit smarter about the runtime value if you want to achieve type-safety. The string parser doesn't check values (it doesn't do anything actually, it's a pass-through).

What you want is the parseAsStringLiteral parser:

const orderByDirection = ['asc', 'desc'] as const;
export type OrderByDirection = (typeof orderByDirection)[number];

const [direction, setDirection] = useQueryState(
   'direction',
    parseAsStringLiteral(orderByDirection).withDefault('desc')
);