wise-white•15mo 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•15mo 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•15mo ago

<@240974567730970625> kapa.ai is still learning and improving, please let us how it did by reacting below

wise-white•15mo 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•15mo ago

Hey @zomh , Can you create a GitHub issue? It seems like we need to investigate this.