fair-rose•5mo ago

useSelect issue - After build TypeError: Cannot read properties of undefined (reading 'isFetching')

I am using useSelect like so: const { selectProps: categorySelectProps } = useSelect({ resource: "categories", optionLabel: "title", optionValue: "id", }); <Form.Item label={"Categories"} name="categories" rules={[ { required: false, }, ]} > <Select mode="multiple" {...categorySelectProps} /> </Form.Item> Form and Select are antd. In dev, this is working well, but when built and deployed i get the following error: TypeError: Cannot read properties of undefined (reading 'isFetching') at useSelect (index-76c04c5b.js:726:31290) Has anyone encountered this issue before? Any ideas on where I could next look to find a solution?

3 Replies

kapa.ai•5mo ago

Hi @kinetic. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're encountering an issue with the useSelect hook from refine when building and deploying your application. This issue might be related to how the data provider is handling the responses, especially in the getList method. Potential Solution Based on the information from the knowledge sources, the issue might be due to the data provider returning an unexpected structure. Specifically, the getList method should return the data in a format that useSelect expects. #### Correcting the Data Provider Ensure that your data provider's getList method returns the data in the correct format. For useSelect, the data should be returned as follows:

return {
  data: data,
  total: data.total,
};

return {
  data: data,
  total: data.total,
};

This is different from the format used by useList, which is:

return {
  data: data.data,
  total: data.total,
};

return {
  data: data.data,
  total: data.total,
};

Example Code Here is an example of how you might adjust your data provider:

const getList = async (resource, params) => {
  const response = await fetch(`/api/${resource}`);
  const data = await response.json();

  return {
    data: data, // Ensure this is the correct format for useSelect
    total: data.total,
  };
};

const getList = async (resource, params) => {
  const response = await fetch(`/api/${resource}`);
  const data = await response.json();

  return {
    data: data, // Ensure this is the correct format for useSelect
    total: data.total,
  };
};

Additional Resources For more detailed information, you can refer to the refine documentation on the useSelect hook: - useSelect Documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/#basic-usage) If the issue persists, you might want to check if there are any updates or patches available for refine that address this specific problem. Related Issues This issue has been discussed in the following GitHub issue, which might provide additional context and solutions: - GitHub Issue #4572 (https://github.com/refinedev/refine/issues/4572) If you need further assistance, consider reaching out to the refine community or checking the latest documentation for any updates. I hope this helps you resolve the issue! If you have any more questions, feel free to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

fair-roseOP•5mo ago

This is my current getList. Not sure if this is the right track though. getList: async <TData extends BaseRecord = BaseRecord>({ resource, pagination, sort, filters, }: { resource: string; pagination?: any; sort?: any; filters?: any; }): Promise<GetListResponse<TData>> => { if (resource === "users") { const { data, error } = await supabaseClient.auth.admin.listUsers(); if (error) throw error; return { data: data.users as unknown as TData[], // Cast to TData[] total: data.users.length, }; } return baseDataProvider.getList<TData>({ resource, pagination, sort, filters, }); }, Updated refine - now it works.

useSelect issue - After build TypeError: Cannot read properties of undefined (reading 'isFetching')

Did you find this page helpful?