[question/bug] Should parsers be called per hook?

[davidohlin]

I'm new to nuqs, so I'm unsure if this is intended or not.

I have a param like name={operator}.{value}. Example: /some-page?name=eq.eric In my Next.js application, I parse it as a string on the server because that's the format I need the param in there. On this page, I have two client side components, Component A and B.

Component A

In Component A, I need to parse the value with a custom parser. The end goal is to destructure the information into an object, like this: { operators: ['eq'], value: 'eric' }. So I grab the value like this:

const [state, setState] = useQueryState("name", customParser);

Component B

In Component B, I need the value as a string to pass along to another API call. So, I grab the value like this:

const [state, setState] = useQueryState("name", parseAsString);

The problem

On the first render, this works as I would expect. Component A has the object state, and Component B reads the state as a string. However, if I update the state from either of the components, the parser doesn't seem to be called. Whatever I update the state to (an object or a string) is what I get back from both hook calls.

I'm humble to the fact that I might be thinking about this the wrong way, but I can't seem to find a better solution than not using custom parsers for this use case.

Any ideas and thoughts are welcome. Here's a reproduction:
https://codesandbox.io/p/devbox/nuqs-question-or-bug-report-forked-8xrfjp

[davidohlin]

.. I found the answer to my own question, but if anyone else ends up here, this caveat is documented with a proposed solution:

https://nuqs.dev/docs/troubleshooting#different-parsers-on-the-same-key

[franky47]

I need the value as a string to pass along to another API call

You can re-serialise it from a "hydrated" (parsed) value using the serializer API:
https://nuqs.dev/docs/utilities#serializer-helper