Relationship

[devalexandre]

I try using Relationship, but I don`t get category date

I have a api to get all categories

http://localhost:1337/categories

[devalexandre]

all categories

[
  {
    "id": 1,
    "name": "Pizza",
    "created_at": "2020-03-08T22:33:08.000Z",
    "updated_at": "2020-03-08T22:33:08.000Z",
    "product": null,
    "products": [
      {
        "id": 9,
        "name": "Presunto",
        "price": 55,
        "company": 1,
        "created_at": "2020-03-17T14:19:54.000Z",
        "updated_at": "2020-03-17T14:19:54.000Z",
        "category": 1,
        "description": "ttytytytytytyt",
        "category_id": null,
        "photo": {
          "id": 10,
          "name": "APRESUNTADA.jpg",
          "hash": "ee5efc55f2fe48459e3ae750e1460479",
          "sha256": "ZQuAnwtvOWXS-zTj1scFjVv8qon3_WU6w+zbpPx09HA",
          "ext": ".jpg",
          "mime": "image/jpeg",
          "size": 112.97,
          "url": "/uploads/ee5efc55f2fe48459e3ae750e1460479.jpg",
          "provider": "local",
          "provider_metadata": null,
          "created_at": "2020-03-17T14:19:54.000Z",
          "updated_at": "2020-03-17T14:19:54.000Z"
        }
      },
      {
        "id": 13,
        "name": "Presunto",
        "price": 55,
        "company": 1,
        "created_at": "2020-03-17T15:27:27.000Z",
        "updated_at": "2020-03-17T15:27:27.000Z",
        "category": 1,
        "description": "ttytytytytytyt",
        "category_id": null,
        "photo": null
      }
    ]
  }
]

// porducts.js
iimport React from 'react';
import { useMediaQuery } from '@material-ui/core';
import { List, SimpleList, Datagrid, TextField, EditButton,
    Create, Edit, SimpleForm, TextInput, ImageInput, ReferenceField ,NumberInput,ImageField,SelectInput} from 'react-admin';
import ImagemFieldFile from './Imagem';

export const ProductList = (props) => {
    const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
    return (
        <List {...props}>
            {isSmall ? (
                <SimpleList
                    primaryText={record => record.name}
                    secondaryText={record => record.category.name}
                    tertiaryText={record => record.price}
                />
            ) : (
                <Datagrid>
                    <TextField source="id" />
                    <TextField source="name" />
                    <TextField source="category.name" label="Categoria"/>
                    <TextField source="price" />
                    <ImagemFieldFile source='photo' />
                    <EditButton />
                </Datagrid>
            )}
        </List>
    );
}

export const ProductCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="name" />
            <NumberInput source="price" />
            <ReferenceField label="Category" reference="categories" source="category" loading="carregando">
                     <TextInput source="name" />
            </ReferenceField>
            <TextInput source="description" />
            <ImageInput source="upload" label="Related pictures" accept="image/*">
            <ImageField source="src" title="title" />
        </ImageInput>

        </SimpleForm>
    </Create>
);
export const ProductEdit = (props) => (
    <Edit {...props}>
              <SimpleForm>
            <TextInput source="name" />
            <NumberInput source="price" />
            <ReferenceField label="Category" reference="categories" source="category" >
                     <SelectInput optionText="name" />
            </ReferenceField>
            <TextInput source="description" />
            <ImageInput source="photo" label="Related pictures" accept="image/*">
            <ImageField source="url" title="title" />
        </ImageInput>

        </SimpleForm> 
    </Edit>
);

[nazirov91]

@devalexandre Try the following method

Instead of this

export const ProductEdit = (props) => (
    <Edit {...props}>
              <SimpleForm>
            <TextInput source="name" />
            <NumberInput source="price" />

            <ReferenceField label="Category" reference="categories" source="category" >
                     <SelectInput optionText="name" />
            </ReferenceField>

            <TextInput source="description" />
            <ImageInput source="photo" label="Related pictures" accept="image/*">
            <ImageField source="url" title="title" />
        </ImageInput>

        </SimpleForm> 
    </Edit>
);

Add this

export const ProductEdit = (props) => (
    <Edit {...props}>
              <SimpleForm>
            <TextInput source="name" />
            <NumberInput source="price" />

            <ReferenceInput label="Category" reference="categories" source="category" >
                     <DateInput source="created_at" />
            </ReferenceField>

            <TextInput source="description" />
            <ImageInput source="photo" label="Related pictures" accept="image/*">
            <ImageField source="url" title="title" />
        </ImageInput>

        </SimpleForm> 
    </Edit>
);

[devalexandre]

the problem is that it doesn’t load as categories, and I don’t know how to debug, when I test on the postman you get all the normal categories

[nazirov91]

So your goal is to have a list of products. When you are editing a single product, you want to select a category from a list of categories. Is it correct?

[devalexandre]

yes, and when create display all categories to

[devalexandre]

[nazirov91]

@devalexandre I think I know what the problem is. Let me run some test and I will let you know asap

[devalexandre]

thank you i will create a temporary component

[nazirov91]

@devalexandre Did you add the resource for the categories?

You must add a for the reference resource - react-admin needs it to fetch the reference data. You can omit the list prop in this reference if you want to hide it in the sidebar menu.

// App.js
...
<Resource name="categories" /> 
<Resource
    name="products"
    show={ProductShow}
    list={ProductList}
    edit={ProductEdit}
    create={ProductCreate}
/>

And

// Products.js
...
<ReferenceInput label="Category" source="cagtegory" reference="categories" >
    <SelectInput source="name" />
</ReferenceInput>

[devalexandre]

thanks it`s work :)