search

nazirov91 / ra-strapi-rest

React Admin data provider for Strapi.js
125 stars 40 forks source link

fix ReferenceArrayInput cannot load the data #3

Closed UMIQLO closed 4 years ago

UMIQLO commented 5 years ago

fix ReferenceArrayInput cannot load the data

nazirov91 commented 5 years ago

@UMIQLO Can you please elaborate on the issue little bit?

UMIQLO commented 5 years ago

Sorry for the late reply. When I use the Strapi "Content Types builder" to create many to many relationship API and use the ReferenceArrayInput in react-admin to show data, the ReferenceArrayInput cannot show correct data in the edit page.

When I open the browser debug console, the network request is strange the request like this http://localhost:1337/salesoffices/[object Object]

the correct request should be the id of the record. but it looks like send the javascript object.

Sorry for my poor English, Thank you

Strapi Version: 3.0.0-alpha.24.1

here is the code of components and json response of strapi

Country.jsx

import React from 'react'
import {
  List,
  Datagrid,
  TextField,
  ArrayField,
  SingleFieldList,
  ChipField
} from 'react-admin'
import {Edit, SimpleForm, TextInput, ReferenceArrayInput, SelectArrayInput} from 'react-admin'

export const CountryList = props => (<List {...props}>
  <Datagrid rowClick="edit">
    <TextField source="id"/>
    <TextField source="country_code"/>
    <TextField source="country_name"/>
    <ArrayField source="salesoffices">
      <SingleFieldList>
        <ChipField source="office_code"/>
      </SingleFieldList>
    </ArrayField>
  </Datagrid>
</List>)

export const CountryEdit = props => (<Edit {...props}>
  <SimpleForm>
    <TextInput source="id"/>
    <TextInput source="country_code"/>
    <TextInput source="country_name"/>
    <ReferenceArrayInput source="salesoffices" reference="salesoffices" label="Sales Office">
      <SelectArrayInput optionText="office_code"/>
    </ReferenceArrayInput>
  </SimpleForm>
</Edit>)

SalesOffice.jsx

import React from 'react'
import {
  List,
  Datagrid,
  TextField,
  ArrayField,
  SingleFieldList,
  ChipField
} from 'react-admin'
import {Edit, SimpleForm, TextInput, ReferenceArrayInput, SelectArrayInput} from 'react-admin'

export const SalesofficeList = props => (<List {...props}>
  <Datagrid rowClick="edit">
    <TextField source="id"/>
    <TextField source="office_code"/>
    <TextField source="office_name"/>
    <ArrayField source="countries">
      <SingleFieldList>
        <ChipField source="country_code"/>
      </SingleFieldList>
    </ArrayField>
  </Datagrid>
</List>)

export const SalesofficeEdit = props => (<Edit {...props}>
  <SimpleForm>
    <TextInput source="id"/>
    <TextInput source="office_code"/>
    <TextInput source="office_name"/>
    <ReferenceArrayInput source="countries" reference="countries" label="Country">
      <SelectArrayInput optionText="country_code"/>
    </ReferenceArrayInput>
  </SimpleForm>
</Edit>)
UMIQLO commented 5 years ago

salesoffices response

[
   {
      "id":1,
      "office_code":"SO1",
      "office_name":"Sales Office 1",
      "created_at":"2019-03-01T01:36:54.000Z",
      "updated_at":"2019-03-01T01:38:27.000Z",
      "countries":[
         {
            "id":1,
            "country_code":"C1",
            "country_name":"Country 1",
            "created_at":"2019-03-01T01:37:47.000Z",
            "updated_at":"2019-03-01T01:37:47.000Z"
         },
         {
            "id":3,
            "country_code":"C3",
            "country_name":"Country 3",
            "created_at":"2019-03-01T01:38:00.000Z",
            "updated_at":"2019-03-01T01:38:00.000Z"
         }
      ]
   },
   {
      "id":2,
      "office_code":"SO2",
      "office_name":"Sales Office 2",
      "created_at":"2019-03-01T01:37:03.000Z",
      "updated_at":"2019-03-01T01:37:03.000Z",
      "countries":[

      ]
   },
   {
      "id":3,
      "office_code":"SO3",
      "office_name":"Sales Office 3",
      "created_at":"2019-03-01T01:37:12.000Z",
      "updated_at":"2019-03-01T01:37:12.000Z",
      "countries":[

      ]
   },
   {
      "id":4,
      "office_code":"SO4",
      "office_name":"Sales Office 4",
      "created_at":"2019-03-01T01:37:22.000Z",
      "updated_at":"2019-03-01T01:37:22.000Z",
      "countries":[

      ]
   },
   {
      "id":5,
      "office_code":"SO5",
      "office_name":"Sales Office 5",
      "created_at":"2019-03-01T01:37:32.000Z",
      "updated_at":"2019-03-01T01:37:32.000Z",
      "countries":[

      ]
   }
]

countries response

[
   {
      "id":1,
      "country_code":"C1",
      "country_name":"Country 1",
      "created_at":"2019-03-01T01:37:47.000Z",
      "updated_at":"2019-03-01T01:37:47.000Z",
      "salesoffices":[
         {
            "id":1,
            "office_code":"SO1",
            "office_name":"Sales Office 1",
            "created_at":"2019-03-01T01:36:54.000Z",
            "updated_at":"2019-03-01T01:38:27.000Z"
         }
      ]
   },
   {
      "id":2,
      "country_code":"C2",
      "country_name":"Country 2",
      "created_at":"2019-03-01T01:37:53.000Z",
      "updated_at":"2019-03-01T01:37:53.000Z",
      "salesoffices":[
         {
            "id":5,
            "office_code":"SO5",
            "office_name":"Sales Office 5",
            "created_at":"2019-03-01T01:37:32.000Z",
            "updated_at":"2019-03-01T02:13:14.000Z"
         }
      ]
   },
   {
      "id":3,
      "country_code":"C3",
      "country_name":"Country 3",
      "created_at":"2019-03-01T01:38:00.000Z",
      "updated_at":"2019-03-01T01:38:00.000Z",
      "salesoffices":[
         {
            "id":1,
            "office_code":"SO1",
            "office_name":"Sales Office 1",
            "created_at":"2019-03-01T01:36:54.000Z",
            "updated_at":"2019-03-01T01:38:27.000Z"
         }
      ]
   }
]
nazirov91 commented 4 years ago

Hi @UMIQLO ,

Finally, I have had a chance to look at your pull request. Apologies for taking this long. And I would like to thank you for pointing out the major flaw! This is indeed a great barrier that causes a bunch of issues with ReferenceInput, ReferenceArrayInput, and corresponding field elements.

In this specific pull request, you have demonstrated the necessity to convert the arrays of reference objects into arrays of reference object IDs.

However, there are some issues with this specific pull request:

  1. We should only be doing the aforementioned process only for CREATE and GET_ONE types
  2. We should consider the conflict of file upload fields
  3. Also sometimes there is an object instead of an array for reference fields

Considering all the factors in this scenario, I need to close this PR because I have implemented a slightly different way to handle all reference related fields. Please take a look at the latest update of the index.js.

I want to give you all the credit for doing a great job. Thanks again!