united-yellow
united-yellow11mo ago

useSelect typing when using optionLabel and optionValue

I am using useSelect with optionLable and optionValue as described here: https://refine.dev/docs/api-reference/core/hooks/useSelect/#optionlabel-and-optionvalue How to type useSelect when using Object path syntax?
const { options, queryResult } = useSelect<IRevenueResponseResultOnly>({
resource: "revenue",

filters: [
{ field: "financialplan][id]", operator: "eq", value: selectedFinplan },
{ field: "resultsonly", operator: "eq", value: true },
],



optionLabel: "revenuestream.base.name",
optionValue: "revenuestream.basisangaben.id",

queryOptions: {
queryKey: ["revenue", selectedFinplan],
enabled: selectedFinplan > 0 ? true : false,
},

})
const { options, queryResult } = useSelect<IRevenueResponseResultOnly>({
resource: "revenue",

filters: [
{ field: "financialplan][id]", operator: "eq", value: selectedFinplan },
{ field: "resultsonly", operator: "eq", value: true },
],



optionLabel: "revenuestream.base.name",
optionValue: "revenuestream.basisangaben.id",

queryOptions: {
queryKey: ["revenue", selectedFinplan],
enabled: selectedFinplan > 0 ? true : false,
},

})
optionLabel and optionValue give a typescript error: Type '"revenuestream.basisangaben.name"' is not assignable to type 'keyof IRevenueResponseResultOnly'.ts(2322)
useSelect | refine
useSelect hook allows you to manage any select (like a Html `` tag, React Select, etc...) component. Since it is designed as headless, It expects you to handle the UI.
4 Replies
kapa.ai
kapa.ai11mo ago
Hi @zomh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The TypeScript error you're encountering is because the optionLabel and optionValue properties are expecting keys that exist directly on the IRevenueResponseResultOnly type. However, you're trying to access nested properties using the Object path syntax. Unfortunately, the information extracts provided do not contain specific details on how to type useSelect when using Object path syntax. However, it's mentioned in the extracts that useSelect supports nested properties with option Object path (https://lodash.com/docs/4.17.15#get) syntax. This suggests that the optionLabel and optionValue properties can accept nested properties as strings. You might need to extend your IRevenueResponseResultOnly type to include these nested properties or adjust your TypeScript configuration to allow this kind of assignment. For more specific guidance, I would recommend referring to the official refine documentation (https://refine.dev/docs) or seeking advice from the TypeScript community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@240974567730970625> kapa.ai is still learning and improving, please let us how it did by reacting below
united-yellow
united-yellow11mo ago
Here is a workaround for now to make typescript quiet. But i think its wrongly typed internally
optionLabel: "revenuestream.basisangaben.name" as keyof IRevenueResponseResultOnly,
optionValue: "revenuestream.basisangaben.id" as keyof IRevenueResponseResultOnly,
optionLabel: "revenuestream.basisangaben.name" as keyof IRevenueResponseResultOnly,
optionValue: "revenuestream.basisangaben.id" as keyof IRevenueResponseResultOnly,
Omer
Omer11mo ago
Hey @zomh , Can you create a GitHub issue? It seems like we need to investigate this.