ReferenceInput with nested CheckBoxGroupInput behaving strangely

Question

I have looked around for many hours and tried various things but alot of the examples i see for CheckBoxGroupInput simply have a hardcoded list of choices associated which is a bit useless... My scenario here is that i have a list of tags that i want to be able to associate with a product, pretty common stuff..

i need that list to be fetched from the postgres database... and that part all seems to work and my list looks normal when first rendered on the create screens for react-admin... The control looks like below

<ReferenceInput reference="ProductRealBenefit" source="realbenefits" sort={{ field: 'name', order: 'ASC' }}>
     <CheckboxGroupInput source="name" />                                                      
</ReferenceInput>

This all well and good so far..

it renders my list as expected.. i have my schema all set up according to the format for ra_data_graphql_simple... Thing that is unexpected, is that as soon as i click on one of the tags, it immediately sends off a request to the server for the allProductRealBenefit query with a filter value equal to the clicked id and it adds a duplicate of that clicked tag to the list which breaks the control with a duplicate key error... i don't see why it would be sending off a request after i click anyway, i am not trying to save anything just assemble which tags would be sent off with the form data to create the link records, and i already have all that data after the initial populating of the control..

i am guessing maybe this should not be nested in ReferenceInput but i don't see any other way to populate my choices with database query result. I know this is ridiculously common functionality & I'll need to figure out a way to use this in multiple spots because this tagging functionality should be available in multiple resources.. I also tried this with AutocompleteArrayInput and it had similar issues so i know the problem is i must be missing an important step.... Be great if someone can point be in the right direction. i am going back to the docs for now to see what i can dig up!

Answer 1

OK, i am gonna answer another one of my questions in case anyone lands here equally as upsidedown as i was when i asked it... I simply didn't realize what some of the behind the scenes magic was doing therefore i was using this wrong... And i find the docs confusing

In my example above... my ProductRealBenefits in the reference was a one to many relationship represented in my schema with realbenefits: [ProductRealBenefits]... Therefore i needed the following components.

<ReferenceArrayInput label="Real Benefit Tags" source="realbenefitsIds" reference="ProductRealBenefit">
    <CheckboxGroupInput  optionValue="id" optionText="name" allowEmpty />
</ReferenceArrayInput>

There is a little magic in the ra_data_graphql_simple dataProvider that creates an item for you in state called realbenefitsIds, which is what you use as the source for the ReferenceArrayInput, i was trying to use the actual realbenefits array object, and that was not gonna work. I could not find any good examples out there or any decent explanations on how to get this to work... So ultimately it was Redux Dev Tools that saved my bacon here. I had to jump through some hoops in the graph server to get all this working with the dataprovider sending back diff things for GET_MANY and GET_REFERENCE_MANY filter values, but that was just a matter of parsing the filter args to match what sequelize was expecting. I'll end up writing a dataProvider eventually but this fit the bill for now..

PS.. i was seeing some strange behaviour in my CheckboxGroupInput, when i clicked something it duplicated whatever box was clicked... The reason for that was an error in object type in my schema... There was an Int mixed in with ID, and luckily that showed up in Redux Dev Tools and led me to the problem.

Lastly.. I'm putting together a sample project in Github that will use React-Admin, GraphQL, RA_DATA_GRAPHQL_SIMPLE, Sequelize, and a Postgres Database and i will comment it alot to take some of the confusion out of it for anyone like myself... Cheers!!