absent-sapphire•12mo ago

useSelect isLoading boolean

Hi! Just wondering if useSelect returns an attribute representing whether it's loaded or not. (btw, I feel like I ask this question alot -- I've noticed the docs are outdated in this regard most of the time, since 1) the answer is usually yes, and 2) the method given in the docs is generally using overtimeOptions )

6 Replies

kapa.ai•12mo ago

Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useSelect hook does not directly return a loading state. However, it does use the useList hook internally for fetching data, which might have a loading state. But this is not directly exposed by useSelect. However, in the context of Ant Design, the useSelect hook from the @refinedev/antd package does return a loading attribute. This is part of the selectProps returned by the hook, as shown in the following code snippet:

const { queryResult, defaultValueQueryResult, onSearch, options } =  
 useSelectCore(props);  
  
return {  
 selectProps: {  
 options,  
 onSearch,  
 loading: defaultValueQueryResult.isFetching,  
 showSearch: true,  
 filterOption: false,  
 },  
 queryResult,  
 defaultValueQueryResult,  
};

const { queryResult, defaultValueQueryResult, onSearch, options } =  
 useSelectCore(props);  
  
return {  
 selectProps: {  
 options,  
 onSearch,  
 loading: defaultValueQueryResult.isFetching,  
 showSearch: true,  
 filterOption: false,  
 },  
 queryResult,  
 defaultValueQueryResult,  
};

In this case, loading is set to defaultValueQueryResult.isFetching, which indicates whether the default value is being fetched. For more details, you can refer to the source code (https://refine.dev/blog/refine-react-invoice-generator-4) of useSelect inside the @refinedev/antd package. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

absent-sapphire•12mo ago

@kapa.ai Is there one that indicates whether the dropdown information is being fetched?

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useSelect hook from the Mantine package in Refine returns a queryResult object, which is a QueryObserverResult from the react-query library. This object includes an isLoading property that indicates whether the query is currently fetching data. Here is the structure of the return values from useSelect:

| Property | Description | Type |
| --- | --- | --- |
| selectProps | Mantine Select props | **`SelectPropsType`** (<https://refine.dev/docs/api-reference/mantine/hooks/useSelect#selectpropstype>) |
| queryResult | Result of the query of a record | **`QueryObserverResult<{ data: TData }>`** (<https://react-query.tanstack.com/reference/useQuery>) |
| defaultValueQueryResult | Result of the query of a `defaultValue` record | **`QueryObserverResult<{ data: TData }>`** (<https://react-query.tanstack.com/reference/useQuery>) |
| defaultValueQueryOnSuccess | Default value onSuccess method | `() => void` |

| Property | Description | Type |
| --- | --- | --- |
| selectProps | Mantine Select props | **`SelectPropsType`** (<https://refine.dev/docs/api-reference/mantine/hooks/useSelect#selectpropstype>) |
| queryResult | Result of the query of a record | **`QueryObserverResult<{ data: TData }>`** (<https://react-query.tanstack.com/reference/useQuery>) |
| defaultValueQueryResult | Result of the query of a `defaultValue` record | **`QueryObserverResult<{ data: TData }>`** (<https://react-query.tanstack.com/reference/useQuery>) |
| defaultValueQueryOnSuccess | Default value onSuccess method | `() => void` |

You can check the isLoading property of the queryResult object to see if the dropdown data is being fetched. For more details, you can refer to the useSelect documentation (https://refine.dev/docs/api-reference/mantine/hooks/useSelect). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

genetic-orange•12mo ago

Hey @avangeous useSelect makes a request to get the options. It returns queryResult. Here you can check queryResult.isLoading or queryResult.isFetched.