harsh-harlequin•2y ago

Load category data one by one

Hi, My post object has a category id, and on the table, I want to display the category name. I have tried useMany hook but my category API does not support multiple IDs so I can only use useOne hook. As per the documentation https://refine.dev/docs/api-reference/core/hooks/data/useMany/ if my data provider does not have the getMany, useMany will use getOne but my data provider has getMany method. So my questions are: Is there a way to tell useMany to use getOne and call API multiple times? if not, then how can I use the getOne in the same fashion? I have tried to use getOne as follows:

const dataProvider = useDataProvider();

    const { getOne } = dataProvider();
    const c = handleMultiple(
        companyIds.map((id) =>
            getOne({
                resource: "site",
                id
            }),
        ),
    );

const dataProvider = useDataProvider();

    const { getOne } = dataProvider();
    const c = handleMultiple(
        companyIds.map((id) =>
            getOne({
                resource: "site",
                id
            }),
        ),
    );

where c is returning the promise and I need help to use this c in the columns list of data grid Thanks

5 Replies

sensitive-blue•2y ago

Hi @Hanif Mianjee, You can do many things, but simplest way to use useOne hook multiple times, you can follow this steps. 1. create react component (for example <CategoryRow>) and you can take category id as a prop. 2. Render <CategoryRow> inside <Table> 3. use useOne inside <CategoryRow> and send id prop to useOne 4. <Table> will render <CategoryRow> for all rows and will mount useOne hook. With this way you can fetch multiple times.

harsh-harlequin•2y ago

Hi @alicanerdurmaz , Thank you for your suggestion. This is a good solution but it won't work in my case because I have to use multiple columns from the category in the posts table

sensitive-blue•2y ago

When you say multiple colum, is that what you mean?

| category id | category title | cateogry status |
|-------------|----------------|-----------------|
| 1           | dummy 1        | status 1        |
| 2           | dummy 1        | status 2        |

| category id | category title | cateogry status |
|-------------|----------------|-----------------|
| 1           | dummy 1        | status 1        |
| 2           | dummy 1        | status 2        |

modern-teal•2y ago

Hello! came here to suggest two other ways than to use handleMultiple and getOne manually 😅 1- Using getList by useList with setting a filter for your case. 2- Passing multiple data providers, one is the default and other is the customized one for categories which has getMany property as undefined. So by passing dataProviderName to the hook or if you have categories resource defined in the resources array, you can use options.dataProviderName to setting a default data provider to a specific resource.

harsh-harlequin•2y ago

@alicanerdurmaz Yes @aliemirs Thank you for the solution, I will your solution and get back to you.