Issues with edit form when useEmbedded = true

[zoundfreak]

API Platform version(s) affected: 2.4.3

Description
I tried setting useEmbedded to true in my data provider (followed the example in APIP documentation). I created create and edit forms following the examples. In edit form I have:

<ReferenceInput
  filterToQuery={searchText => ({ name: searchText })}
  format={v => v['@id'] || v}
  reference="certificate_types"
  source="certificateType"
>
  <AutocompleteInput optionText="name" />
</ReferenceInput>

The create view works as expected but edit is causing issues unless I reselect he certificate type field.

If I edit the page without touching the certificate type field the whole embedded data object is sent. If I reselect the certificate type field, only IRI is sent with the request.

Is this a bug or am I missing something?

[zoundfreak]

React Admin is not using the format function unless you change the field value. Format doesn't get called when edit form is rendered and populated. The fields that are not edited don't get formatted. Those unedited fields are sent with full data instead of IRI only.

I'm guessing there's no easy way to modify the hydra data provider to change embedded form data to iris only. How to detect what should be IRI only and what not to change?

I'm now trying to find if there's a simple way to force React Admin to format the form fields on first render or before submit.

[vloq]

@zoundfreak Have you found the solution. I'm starting with api platform admin and I have same issue :|

[zoundfreak]

Unfortunately no. I ended up using another platform (in-house) instead. It was way too early to use this product for my purposes. I got so frustrated after a couple of months of hitting my head on the wall trying to figure out the internal behaviour of this and that. The developers are busy and user base wasn't big enough... Getting help was really hard.

All this being said, I still liked the project and I really hope this project all the success. I hope the user base grows big and all issues get solved. I might even try it again in the near future.

[mocrates]

Hi, i don't know if is right or if it can help, but i have the same problem. When i edit a resource with a relation, if i don't changed the value of relation, it put me an error.

I change my backend api to add same group of denormalisation as normalisation. And it work.

#[ApiResource( denormalizationContext: ['groups' => ['get']], normalizationContext: ['groups' => ['get']] )]

[BPavol]

I have the same issue and find the solution.

You must set source like this:

<ReferenceInput
  source='project.@id'
  reference='projects'
  label='Projects'
  filterToQuery={searchText => ({ code: searchText })}
>
  <AutocompleteInput optionText='code' />
</ReferenceInput>

Now React component works. But after sending the data to server, exception is thrown:

Nested documents for attribute \"project\" are not allowed. Use IRIs instead.

We need to sent IRI instead of object. We achieve it with custom data transformer on edit component:

const transform = data => {
  data['project'] = data['project']['@id'];

  return data;
};

return (
<Edit {...props} transform={transform}>
 <SimpleForm>
  <TextInput source='code' />
    <ReferenceInput
      source='project.@id'
      reference='projects'
      label='Projects'
      filterToQuery={searchText => ({ code: searchText })}
    >
      <AutocompleteInput optionText='code' />
    </ReferenceInput>        
  </SimpleForm>
</Edit>
);

Part of the solution came from this PR: https://github.com/api-platform/docs/pull/1144/files

But @alanpoulain comment is not right. Format is never called if defined on ReferenceInput. Even documentation is not right: https://api-platform.com/docs/admin/handling-relations/#using-an-autocomplete-input-for-relations

Used versions:

@api-platform/admin: 3.2.0
react-admin: 4.1.0

[alanpoulain]

@BPavol I don't understand your use case, why using a reference input for something embedded? Could you explain why you need this?

[BPavol]

@alanpoulain This is example of Environment entity:

{
    id: 1,
    title: "Example environment",
    project: {
        id: 1,
        title: "Example project",
        code: "foo"
    }
}

Relation between Project and Environment is 1:n. One Project can have n Environments. I need to create edit form where I can assign Project to Environment.

[gregorybesson]

TY @BPavol your solution has been super helpful and seems to me the right one.