4

I'm using react-admin with data that I get from a restAPI data source that I can customize for my needs, I've added a standard resource with only a list and an edit attributes:

<Resource name="topic" edit={TopicsEdit} list={TopicsList} />

When I look at the network tab of Chrome dev tools I see that I use the right endpoints:

For the list:

GET request for http://api.loc/topic

And for the edit:

GET request for http://api.loc/topic/{{topic_id}}

Up to this point everything works just fine. My problem starts when I try to have the edit screen split into two tabs, one of them will be for editing the topic (This works just fine), and the other tab should use data from a different endpoint:

http://api.loc/topic/{{topic_id}}/modifiers

The code for my TopicsEdit file:

<Show {...props}>
    <TabbedShowLayout>
        <Tab label='topic'>
            <Edit {...props}>
                <SimpleForm>
                    <TextInput source="id"/>
                    <TextInput source="title"/>
                </SimpleForm>
            </Edit>
        </Tab>
        <Tab label='modifiers' path='modifiers'>
            <List {...props}>
                <Datagrid>
                    <TextField source="id"/>
                    <TextField source="name"/>
                </Datagrid>
            </List>
        </Tab>
    </TabbedShowLayout>
</Show>

In the topic tab everything is working as I mentioned before, but when I switch to the modifiers tab I see in the network dev tool that the data arrives from

http://api.loc/topic

instead of

http://api.loc/topic/{{topic_id}}/modifiers

How can I customize the URL that the modifiers tab will pull the data from?

The only thing I did find was to use a <ReferenceInput> but the problem here is that the reference="" attribute will only get the info from a predefined structure, meaning that if I use reference="modifiers" it tries to fetch the data from:

http://api.loc/modifiers

And not from the desired URL.

Adi Bnaya
  • 473
  • 4
  • 14

0 Answers0