variable-lime
variable-lime2y 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
wise-white
wise-white2y ago
Hey @_erichu useList does not support multiple resource. Meybe you can merge resources object.
variable-lime
variable-lime2y ago
Hi @yildirayunlu, I'm new to refine.dev, could you please elaborate a bit? How to merge it?
wise-white
wise-white2y 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.
variable-lime
variable-lime2y 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?
wise-white
wise-white2y ago
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.