I'm using react-admin v3.15 (because reasons). I am trying to create a simple Create form that populates a dropdown with values from a resource. For some reason I have a one dropdown that works and another that does not. They call different APIs but they literally return similar things. What are some things that might be implicitly known that I have to watch out for that might cause this?
export const CreateFormTest = () => {
return (
<SimpleForm>
<ReferenceInput
label="Foo 1"
source="foo1"
reference="foo1"
fullWidth
>
<SelectInput optionText="value" />
</ReferenceInput>
<ReferenceInput
label="Foo 2"
source="foo2"
reference="itemResource"
fullWidth
>
<SelectInput optionText="value" />
</ReferenceInput>
</SimpleForm>
);
}
I've checked the network calls and they literally return the same headers, body, etc. The resource are there too. There is a dataProvider function that manipulates the request / response but nothing that should affect the working endpoint specifically.
Any help / hints or common things to look out for when doing this would be appreciated.
Related
In react-admin we have ReferenceManyField. It would be fantastic to have also a component called ReferenceManyInput, with a functionallity very similar to the ArrayInput component (add, remove buttons) but with reference to a resource.
¿Does any one know if they have intention to include it or is there any workaround to achieve this?
The use case is:
I have a form for creating/editing an entity where one of its properties is an array of other related entities. I would like to add and/or remove new elements to that array and when submitting the main entity, it creates/updates/remove the related entity and the main entity.
Maybe I am asking for too much...
Thanks in advance
You're in luck: <ReferenceManyInput> was just published as part of React-admin Enterprise Edition. It works just like ReferenceManyField:
import {
Edit,
SimpleForm,
TextInput,
NumberInput,
ReferenceInput,
SelectInput,
} from 'react-admin';
import { ReferenceManyInput } from '#react-admin/ra-relationships';
const ProductEdit = () => (
<Edit mutationMode="optimistic">
<SimpleForm>
<TextInput source="name" />
<NumberInput source="price" />
<ReferenceInput source="category_id" reference="categories" />
<ReferenceManyInput reference="variants" target="product_id">
<SimpleFormIterator inline>
<TextInput source="sku" />
<SelectInput source="size" choices={sizes} />
<SelectInput source="color" choices={colors} />
<NumberInput source="stock" defaultValue={0} />
</SimpleFormIterator>
</ReferenceManyInput>
</SimpleForm>
</Edit>
);
The result looks like:
Check https://marmelab.com/ra-enterprise/modules/ra-relationships#referencemanyinput for details.
I have a list of resources, which I understood that must be the entities for which we have the CRUD operations:
The problem is that inside the entity page I want to use 2 tabs (components), one for the list of the entity and one for a list of aggregated data based on the entity. The problem is with the second, because I was required to write a custom graphql query, but both components use the same source (first list).
<ProtectedResource
name={RESOURCES.Product}
list={Product.homepage}
icon={StarHalfIcon}
options={{ label: translate('Products') }}
/>
Products.js is a hook which returns this:
<TabbedForm redirect={`/${RESOURCES.Product}`}>
<FormTab label={translate('Lines')}>
<ReferenceManyField reference={RESOURCES.Product} target="" label="" fullWidth {...paginationProps('id')}>
<ProductsList {...props} />
</ReferenceManyField>
</FormTab>
<FormTab label={translate('Aggregated Lines')} path="/aggregates">
<ReferenceManyField reference={RESOURCES.Product} target="" label="" fullWidth {...paginationProps('id')}>
<ProductAggregatesList {...props} />
</ReferenceManyField>
</FormTab>
</TabbedForm>
In reality, should hit 2 queries: getAllProducts and getAggregatedProducts. Based on fetchType and resource, I can rewrite the query which I want to execute (in frontend), but I can not catch the data and send to the specific component.
if (fetchType === GET_MANY_REFERENCE && resource === RESOURCES.Product)
return getAggregatedProducts(resource, params);
And GET_LIST fetch type will be used for first tab.
If I create another resource, for AggregatedProducts, there will throw an error because AggregatedProducts is not known in backend's schema.
When I use the referencinput, it sends a request to the server, is it possible to somehow read what I received from the referencinput server and use these values in the farthest. Thank you for any help!
<ReferenceInput
label="Person"
source={`${parentSourceWithIndex}.person.id`}
reference="people"
resource={resource}
perPage={INPUT_ITEMS_PER_PAGE}
>
<SelectInput
onChange={(event) => console.log(event)}
resource={resource}
optionText="fullName"
inputType="create"
fullWidth
/>
</ReferenceInput>
I suggest you to read the first two paragraphs of the ReferenceInput documentation:
https://marmelab.com/react-admin/ReferenceInput.html
As well as the linked useChoicesContext documentation:
https://marmelab.com/react-admin/useChoicesContext.html
AutocompleteInput is pretty good to use in react admin. However, is there a way to make it resettable? Thanks!
<ReferenceInput
label={translate('resources.cards.fields.search_name')}
source="id"
reference="cards"
alwaysOn
resettable
>
<AutocompleteInput optionText="name" inputValueMatcher={() => null} resettable />
</ReferenceInput>
I put resettable for both ReferenceInput and also AutocompleteInput but the reset button just doesn't show up. Thanks!
Unfortunately, no, it looks like it is not possible at this moment:
https://github.com/marmelab/react-admin/issues/2564
Here is the ref : Admin-on-Rest
in app.js :
<Resource name="customers" list={CustomerList} icon={UserIcon} edit={CustomerEdit} create={CustomerCreate}/>
in customer.js :
<TextInput source="firstname" />
<ReferenceInput label="Partner" source="id" reference="partners" >
<AutocompleteInput optionText="name" />
</ReferenceInput>
<TextInput source="email" />
The problem is autocomplete not shown, but I check in log data retrieved from API end point /partners
And if I change reference to reference="customers", data and autocomplete shown.
Help please ??
You need another <Resource> for the relationship, even empty:
<Resource name="customers" list={CustomerList} icon={UserIcon} edit={CustomerEdit} create={CustomerCreate}/>
<Resource name="partners" />
It is well documented for <ReferenceField> (see the note), perhaps it needs the same note for <ReferenceInput>.
You <ReferenceInput reference="..."> needs to match the <Resource name="..."> for this to work. So this is the reason why reference="customers" worked for you.
If you want to get data from customers endpoints, but you want the label to be Partner you can specify it as label attribute on your ReferenceInput component, e.g. <ReferenceInput label="Partner" ...>.
The problem is probably the way you're importing your 'ReferenceInput' object. I had the same issue while creating my app and had no idea what is the problem.
Check your import line and if it looks like this:
import {ReferenceInput} from "../../src/mui/input/ReferenceInput";
then change it to look this way:
import ReferenceInput from '../../src/mui/input/ReferenceInput';
Hope that helps you!