Search code examples
react-admin

Use path parameter for ReferenceInput instead of query parameter for react-admin


In my react-admin app I have an Edit view which uses a ReferenceInput.

When I select one entry from the <AutocompleteInput> element then react-admin calls the following URL for getting the requested resource:

http://localhost:8090/api/entities/institution?id=84246

The API however needs this:

http://localhost:8090/api/entities/institution/84246

Is there a way telling react-admin to use path parameter instead of the query parameter?

export const CustomInstitutionEdit = props => (
  <EditTemplate {...props}>
    <SimpleFormTemplate>
      <TextInput source="name" />
      <TextInput source="nameShort" />
      <ReferenceInput
        source="institution.id"
        reference="institution"
        perPage={0}
        sort={{ field: "name", order: "ASC" }}
        filterToQuery={searchText => ({ _filter_name: searchText })}
      >
        <AutocompleteInput optionText="name" />
      </ReferenceInput>
    </SimpleFormTemplate>
  </EditTemplate>
);

Solution

  • React Admin isn't responsible for making API calls directly, it uses a Data Provider. If an existing Data Provider doesn't fit your needs you can easily write your own. The data provider is what's responsible for translating react-admin CRUD operations into API calls.

    See this for more info: https://marmelab.com/react-admin/DataProviders.html