Extract correct type when using key parser mapping

[guanboo-yang]

First of all, thank you for the amazing package! I have encountered a scenario for which I'm seeking some guidance. Here's what I'm working with:

const keyMap = {
  [Key.A]: parseAsBoolean,
  [Key.B]: parseAsString, 
}

const [state, setState] = useQueryState(Key.A, keyMap[Key.A])
// state1: boolean | null

The behavior shown above is what I expected. However, I tried to create a helper hook to automatically select the correct parser, as shown below:

function useKeyState(key: keyof typeof keyMap) {
  return useQueryState(key, keyMap[key])
}

const [state, setState] = useKeyState(Key.A)
// state1: string | null

Unfortunately, this resulted in the wrong type being returned. Is there a way to extract the correct type in this context? I would greatly appreciate any guidance or suggestions you might have.

[franky47]

Just to rule this out, have you checked useQueryStates? For arbitrary key maps it's the preferred interface.

https://nuqs.47ng.com/docs/batching

Otherwise, the root of the issue is a TypeScript one rather than related to nuqs, so your useKeyState definition needs a little generic addon:

function useKeyState<K extends keyof typeof keyMap>(key: K) {
  return useQueryState(key, keyMap[key])
}

This should help "specialise" the call by narrowing it to only the key passed in the argument.

[guanboo-yang]

Sorry for the late response. I am familiar with useQueryStates and in fact the keyMap is also used in useQueryStates to clear all state at once (where I encountered another issue that I am unsure how to check if every state is in its default state). However, I also used each state in different components since they function independently. I think it is more efficient to manage each state individually rather than batching them together in every component. Please let me know if my understanding is incorrect.

Additionally, I understand this may be a TypeScript issue, but I thought you might frequently encounter this. Unfortunately, the code you provided does not work either.

function useKeyState<K extends keyof typeof keyMap>(key: K) {
  return useQueryState(key, keyMap[key])
}

const [state, setState] = useKeyState(Key.A)
// state1: string | null

I would greatly appreciate any corrections you might have. Thank you!