React admin ReferenceInput Component does not work as expected with hydra response

Question

I must missed something here but can't find what we can see that all my results are loaded for station field but no Autocomplete suggestion are shown under the field. I tried also with a SelectInput component, the list options is empty

In redux the custom query succeeded :

My code for the create and edit section is pretty much the same as follow :

import React, {FC} from "react";
import {
    CreateGuesser,
    InputGuesser
} from "@api-platform/admin";
import {ReferenceInput, AutocompleteInput, FilterProps} from "react-admin";

const RefuelsCreate : FC<Omit<FilterProps, 'children'>> = props => (
    <CreateGuesser {...props}>
        <InputGuesser source="pricePerLiter" />
        <ReferenceInput
            source="stationId"
            reference="gaz_stations"
            label="Station"
            filterToQuery={searchText => ({ address: searchText })}
        >
            <AutocompleteInput optionText="address" />
        </ReferenceInput>
        <InputGuesser source="totalRefuelPrice" />
        <InputGuesser source="kmTravelled" />
    </CreateGuesser>
);

export default RefuelsCreate;

Both of Edit and create section are not working for this ReferenceInput In my App.tsx I added this component in a ResourceGuesser component.

import React from "react";
import { Redirect, Route } from "react-router-dom";
import { HydraAdmin, ResourceGuesser, hydraDataProvider as baseHydraDataProvider, fetchHydra as baseFetchHydra, useIntrospection } from "@api-platform/admin";
import parseHydraDocumentation from "@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation";
import authProvider from "./Auth/AuthProvider";
import { Layout } from './layout'
import customRoutes from './routes';
import themeReducer from './themeReducer';
import polyglotI18nProvider from 'ra-i18n-polyglot';
import englishMessages from './i18n/en';
import { Dashboard } from './dashboard';
import refuels from './refuels';

const i18nProvider = polyglotI18nProvider(locale => {
    if (locale === 'fr') {
        return import('./i18n/fr').then(messages => messages.default);
    }

    // Always fallback on english
    return englishMessages;
}, 'en');


const entrypoint = `${process.env.REACT_APP_API_URL}`;
const getHeaders = () => localStorage.getItem("token") ? {
    Authorization: `Bearer ${localStorage.getItem("token")}`,
} : {};

const fetchHydra= ((url: any, options = {}) =>
    baseFetchHydra(url, {
        ...options,
        headers: getHeaders,
    })
);

const RedirectToLogin = () => {
    const introspect = useIntrospection();

    if (localStorage.getItem("token")) {
        introspect();
        return <></>;
    }
    return <Redirect to="/login" />;
};

const apiDocumentationParser = async (entrypoint:any) => {
    try {
        const { api } = await parseHydraDocumentation(
                entrypoint,
                {
                    // @ts-ignore
                    headers: getHeaders
                }
            );
        return { api };
    } catch (result) {
        if (result.status === 401) {
            // Prevent infinite loop if the token is expired
            localStorage.removeItem("token");

            return {
                api: result.api,
                customRoutes: [
                    <Route path="/" component={RedirectToLogin} />
                ],
            };
        }

        throw result;
    }
};

const dataProvider = baseHydraDataProvider(entrypoint, fetchHydra, apiDocumentationParser, true);

export default () => (
    <HydraAdmin
        title="ease daily app"
        customReducers={{ theme: themeReducer }}
        dataProvider={ dataProvider }
        authProvider={ authProvider }
        entrypoint={ entrypoint }
        layout={Layout}
        dashboard={ Dashboard }
        customRoutes={customRoutes}
        i18nProvider={i18nProvider}
    >
        <ResourceGuesser name="refuels" list={refuels.list} create={refuels.create} edit={refuels.edit}/>
    </HydraAdmin>
);

According to the documentation here : https://api-platform.com/docs/admin/handling-relations/

I'm doing it correctly and it should work, but why no suggestions are shown then ?

Answer 1

When you want to use a reference to another resource you have to add it as a resource here's what the documentation says :

Taken from here

So in code you juste have to put this line on your App.tsx :

        <ResourceGuesser name="gaz_stations"/>

And your referenced field will be hydrated from the API