graceful-beige•2y 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

fair-rose•2y ago

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

graceful-beige•2y ago

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

fair-rose•2y 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.

graceful-beige•2y 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?

fair-rose•2y 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.