Can we make query as name=abc instead of name=%27abc%27

[DuanTranHuy]

In your playground page, I see the query url of name is %27abc%27 instead of name=abc

Can we make it as name=abc instead?

[asmyshlyaev177]

@DuanTranHuy probably we can't.

When parsing values need to know type, 'abc' or %27abc%27 point that value is a string, if we do prop=123 there is no way ahead of time to know type of 123, e.g number or string. Some special characters get encoded by browser as %CHARCODE.

So, it's a choice between keeping type of value or keeping URI simpler.

But, some browsers already hiding query string from users until click on it, and generally users don't pay much attention to it.

There are many libraries that chose simple URI but can't automatically preserve types and structure, nuqs for example.

[franky47]

There is one issue with this approach: unless you do some form of runtime validation, there is a mismatch between what the URL represents and what the app expects.

For example, this URL crashes the demo page: https://www.state-in-url.dev/?name={%22validation%22:false}

That's because the app expects the value for the name key to deserialise and parse to a string in JavaScript, and instead it JSON parses to an object, which doesn't satisfy a contract defined only in the type system.

Now the solution would be to pass in a Zod schema or any other runtime validation library to verify that the input (which is controller by the user, so it can be anything) conforms to the expected data type.

This is what parsers do in nuqs, albeit not via Zod, which only brings half of the solution: to answer OP's question, you also need serialisation for non-primitive data types. Parsers enforce the contract that you defined in code (and much like Zod, the output type is inferred from the runtime rather than the other way around).

[asmyshlyaev177]

For now, I'm still not sure that need to overcomplicate it with validators, I mean, how often you realistically will deal with such situations? Why would users want to put some abracadabra in URL?

Validators are good for forms, when validation of data is necessary before sending it.

If do it via library, encoding and parsing handled correctly, that is important.

OP asked about pure aesthetics.