React Admin dataProvider not sending id during create

Question

I have a custom dataProvider component referencing from ra-data-django-rest-framework which looks something like this for create in src/dataProvider.js

import { fetchUtils } from "ra-core";

export default (apiUrl) => {
    const httpClient = (url) => {
        const options = {
            headers: new Headers({ Accept: 'application/json' }),
        };
        return fetchUtils.fetchJson(url, options);
    }

    return {
        .....

        create: async (resource, params) => {
            const json = await httpClient(`${apiUrl}/${resource}`, {
                method: 'POST',
                body: JSON.stringify(params.data),
            });
            return {
                data: { ...json },
            };
        },

        .....

When I submit, it logs a dataProvider error on the console The response to 'create' must be like { data: { id: 123, ... } }, but the received data does not have an 'id' key. The dataProvider is probably wrong for 'create' Error: ra.notification.data_provider_error at validateResponseFormat (validateResponseFormat.js:28) at performPessimisticQuery.js:42 The response to 'create' must be like { data: { id: 123, ... } }, but the received data does not have an 'id' key. The dataProvider is probably wrong for 'create' Error: ra.notification.data_provider_error at validateResponseFormat (validateResponseFormat.js:28) at performPessimisticQuery.js:42

I am able to successfully create resources using Postman at URL http://localhost:8000/api/products with a POST request with request body as below in the backend database

{
    "id": 3,
    "name": "Product Name",        
    "category": 4,
    "restaurant": 2
}

I have tried manipulating in the src/products/ProductCreate.js component as

import { Create, SimpleForm, TextInput, NumberInput, ReferenceInput, SelectInput, DateInput } from react-admin";

export const ProductCreate = (props) => {
   const transform = (data) => ({
     ...data,
     id: 4
   })

  return (
    <Create title="Create new product" {...props} transform={transform}>
      <SimpleForm>
        <NumberInput label="Enter Product ID" source="id" />
        <TextInput label="Enter Product Name" source="name" />
        <ReferenceInput label="Product Category" source="category" reference="categories" >
          <SelectInput optionText="name" />
        </ReferenceInput>
        <ReferenceInput label="Product Seller" source="restaurant" reference="restaurants" >
          <SelectInput optionText="name" />
        </ReferenceInput>
        <DateInput source="created_at" options={{ label: "Product creation date" }} />
        <DateInput source="updated_at" options={{ label: "Product updated on" }} />
      </SimpleForm>
    </Create>
  )
}

My src/App.js

import React from "react";
import { Admin, Resource, Loading } from "react-admin";
import { ProductList, ProductCreate, ProductEdit, ProductShow } from "./components/products";
import dataProvider from "./dataProvider";

const apiUrl = "http://localhost:8000/api";
const dataProvider = dataProvider(apiUrl);

const App = () => {
  if(!dataProvider) {
    return <Loading />
  }

  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="products" list={ProductList} create={ProductCreate} edit={ProductEdit} show={ProductShow} />
    </Admin>
  )
}

export default App;

list and show work fine. I am at least able to optimistically render for edit and DELETE request. The only problem I have right now is for POST request in create defined in dataProvider.js . Can anybody please help me solve this?

Edit: I tried console.log(params.data) . It seems to send correct data format of create request. Do I need to change my httpClient so that it accepts additional parameter? Example const httpClient = (url, payload) => {...} . If so, can you guide me how?

Answer 1

Nevermind, I was able to optimistic render create functionality by changing it as

...
create: async (resource, params) => {
    console.log(params.data);
    const { json } = await httpClient(`${apiUrl}/${resource}`, {
       method: 'POST',
       body: JSON.stringify(params.data),
    });
    return {
       data: { ...params.data, id: json.id },
    };
},
...