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.