React-admin: <ReferenceInput> doesn't work with custom dataProvider

Viewed 1203

I'm trying to use <ReferenceInput> element with custom dataProvider and getting this error:

Missing translation for key: "dataProvider is undefined"

It happens even if my data provider looks like this:

import jsonServerProvider from "ra-data-json-server";
import { adminPageTokenFetch } from "APIServices/CRUD";

const dataProvider = jsonServerProvider("/api", adminPageTokenFetch);

export const myDataProvider = {
  ...dataProvider
}

Example of component using <ReferenceInput>:

export const SessionEdit = (props: any) => {
  return (
    <Edit {...props}>
      <SimpleForm>
        <ReferenceInput source="film" reference="films">
          <SelectInput optionText="name" />
        </ReferenceInput>
        <DateInput source="dateTime" />
        <NumberInput source="price" />
        <ReferenceInput source="genre" reference="genres">
          <SelectInput optionText="name" />
        </ReferenceInput>
      </SimpleForm>
    </Edit>
  );
};

Here is my index page:

export const AdminPage = (props: { lang: string }) => {
  const messages = {
    ru: russianMessages,
    en: englishMessages
  } as any;

  return (
    <Provider store={createAdminStore({ myDataProvider, history })}>
      <Admin
        dataProvider={myDataProvider}
        history={history}
        title={props.lang === "ru" ? "Админ панель" : "My admin"}
        i18nProvider={polyglotI18nProvider(() => messages[props.lang])}
      >
        <Resource
          name="sessions"
          list={SessionList}
          edit={SessionEdit}
          create={SessionCreate}
        />
        <Resource name="translations" list={TranslationList} />
      </Admin>
    </Provider>
  );
};

And here is createAdminStore function:

export default ({ dataProvider, history }: any) => {
  const reducer = combineReducers({
    admin: adminReducer,
    router: connectRouter(history)
  });

  const saga = function* rootSaga() {
    yield all([adminSaga(dataProvider)].map(fork));
  };
  const sagaMiddleware = createSagaMiddleware();

  const store = createStore(
    reducer,
    compose(applyMiddleware(sagaMiddleware, routerMiddleware(history)))
  );
  sagaMiddleware.run(saga);
  return store;
};

There is how it looks on the UI:

UI Error message

Other components still work fine.

2 Answers

By default, the polyglotI18nProvider logs a warning in the console each time it's called with a message that can’t be found in the current translations.

To avoid this for some messages, e.g. error messages from a data source you don’t control (like a web server), we can add use the allowMissing option to Polyglot at initialization.
Read about react-admin translations here.

// Here, we seem to be missing the complete base url
- const dataProvider = jsonServerProvider("/api", adminPageTokenFetch);

// For dataProvider to be defined, provide the complete base url
+ const dataProvider = jsonServerProvider("http://path.to.my.api", adminPageTokenFetch);

// Add the "allowMissing" option
i18nProvider={polyglotI18nProvider(() => messages[props.lang], {allowMissing: true} )}

Don't know exacly how does it work, but it seems after changes below referenceInput forks fine:

...
<Provider
      store={createAdminStore({
        dataProvider: Object.assign(myDataProvider),
        history
      })} // changed from createAdminStore({ myDataProvider, history })
    >
    <Admin
        dataProvider={Object.assign(myDataProvider)} // changed from dataProvider={myDataProvider}
        history={history}
        title={props.lang === "ru" ? "Админ панель" : "My admin"}
        i18nProvider={polyglotI18nProvider(() => messages[props.lang])}
    >
        ...
    </Admin>
</Provider>

Related