helpful-purple•3y ago

How to create a multi-select control for resources with Antd?

I'm trying to build a select list which it can select multiple related resources (with Strapi v4 relation). However I found that useList can only select one item. Is there any way to make it select multiple resources? https://refine.dev/docs/api-reference/core/hooks/data/useList/

useList | refine

useList data hook from refine is a modified version of react-query's useQuery for retrieving items from a resource with pagination, search, sort, and filter configurations.

5 Replies

rival-black•3y ago

Hey @_erichu useList does not support multiple resource. Meybe you can merge resources object.

helpful-purpleOP•3y ago

Hi @yildirayunlu, I'm new to refine.dev, could you please elaborate a bit? How to merge it?

rival-black•3y ago

const postQueryResult = useList({ resource: "posts" })
const categoryQueryResult = useList({ resource: "categories" })

const data = [...postQueryResult.data, ...categoryQueryResult.data];

const postQueryResult = useList({ resource: "posts" })
const categoryQueryResult = useList({ resource: "categories" })

const data = [...postQueryResult.data, ...categoryQueryResult.data];

Meybe you can write it.

helpful-purpleOP•3y ago

Thanks for your reply. I think I found the problem now. I could just use <Select with mode="multiple" />. However, when I'm trying to save an item which is from strapi resource, (populated relation), the result would be like for example: { id: 1, categories: [{ id: 1, name: 'abc' }, { id: 2, name: 'def' }] }. I'm using

<Form.Item
  wrapperCol={{ span: 8 }}
  label="Categories"
  name={['categories', 'id']}
  rules={[
    {
      required: true,
    },
  ]}
  >
  <Select {...selectProps} mode="multiple" />
</Form.Item>

<Form.Item
  wrapperCol={{ span: 8 }}
  label="Categories"
  name={['categories', 'id']}
  rules={[
    {
      required: true,
    },
  ]}
  >
  <Select {...selectProps} mode="multiple" />
</Form.Item>

which can successfully read the data from strapi. But when I try to save it (on an edit page), there is an error, since for strapi the posted data should be { id: 1, categories: [1, 2]}. However using the form above will generate something like { id: 1, categofies: [{ id: 1 }, { id: 2} ]}. How can I solve that problem?

rival-black•3y ago

You can check here https://refine.dev/docs/api-reference/antd/hooks/form/useForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api

useForm | refine

useForm is used to manage forms. It is based on Antd Form and refine useForm to supports all the features of these packages and adds some additional features.

How to create a multi-select control for resources with Antd?

Did you find this page helpful?