Serialize object to it's ID, and deserialize it back to an object

[Pirulax]

Basically, I have a search like function, where a user can be selected.
The user objects looks like this:

export type User = {
  id: number;
  name: string;
};

Now obviously I don't want to store this in the URL as-is, but rather only the id, which is simple enough... What's not so simple is retrieving the original object... If I just use nuqs for storing the id, then it's pretty simple, but also just messy (because I need to deserialize manually, and have a lot of duplicate code accross different components)

Using: nextjs 14

[franky47]

Where would the "name" property come from when recomposing the object just from an ID?

[Pirulax]

That is the problem at hand.
I'm fetching the original objects using ReactQuery, but obviously it can't be used inside parse... (Or, well, I can't use useQuery inside it).
[I guess there's this solution from SO, but if I could just somehow use the useQuery directly instead it would be nicer (Because my API wrapper is exposing hooks only, as I didn't need anything else so far)]

[franky47]

I see, what you need is a reusable hook, using the ID from the query string as part of the TanStack Query key:

export function useUser() {
  const [id] = useQueryState('userId')
  return useQuery({
    queryKey: ['user', id],
    enabled: id !== null
  })
}

[Pirulax]

Well I guess I could do a little wrapper too, and that would solve my issue pretty much:

export function useUserQueryState(name: string) {
  const [id, setId] = useQueryState(name);
  return [useGetUser(id), (user: User) => setId(user.id)];
}

I did have this solution in mind, but I just tunnel visioned on using the parser...
But this should be quite sufficient too.

[franky47]

The way I like to think about it is:

• Parsers for query string validation & formatting
• useQueryState(s) for reading & writing

Parsers should be pure functions, no side-effects there. Side-effects usually belong in the render tree, materialized by hooks (useEffect or other wrappers around them like useQuery or useQueryState).

[Pirulax]

Thanks for the tip, and for the help too!
Appreciate it!
Wish you a nice day/evening/night :)

[Pirulax]

Just one more question.
Is there a nice way to dynamically add withDefault?
Right now I have this:

export function useUserQueryState(name: string, def?: User) {
  const p = parseAsInteger;
  if (def !== undefined) {
    p.withDefault(def.id); // Not even sure this works like this, but I assume it just returns `this`, so `p === <return value>`?
  }
  //  ...
}

I have to do all this because def is optional...
Ideally parseAsInteger.withDefault(def?.id) would work (that is withDefault would accept undefined too).

[franky47]

You could spread the parser and add the default value conditionally:

export function useUserQueryState(name: string, def?: User) {
  return useQueryState('user', {
    ...parseAsInteger,
    defaultValue: def?.id
  })
}

Note however that while this would work at runtime (ie: if there is no user query key, and you have passed a default value, it will be returned), it will be impossible for TypeScript to know statically whether or not there is a default value, and so it will give you number | null for the state type.