TypeScript Type Error When Using useQueryState With String Union Types

[sahilverma-dev]

Hi, I'm running into a TypeScript issue when trying to use useQueryState with a string-union type that represents a set of allowed data views for my route.

Code Snippet Causing the Issue

export type ViewMode = "list" | "grid" | "compact";

const [viewMode, setViewMode] = useQueryState<ViewMode>("view", {
  defaultValue: "list",
});

The Issue

TypeScript throws errors around the generic type parameter passed to useQueryState<DataType>.

My Questions

1. What am I doing wrong?
2. Should I be using enum instead of a string union?
3. Is there a recommended/better way to restrict valid values from a query param?

If you need more context, I can provide the full component or the type error logs.

Thanks in advance! 🙏

[franky47]

You should use parseAsStringLiteral.

Passing in a generic type cast is a form of "lying to TypeScript", as the runtime will still accept any string value, it's up to the parsers to implement the basic query value validation to conform to the type they describe.

[sahilverma-dev]

Thanks for response.