It seems like I might have missed something, as I am unable to find the reason why all my results are loaded for the station field but no autocomplete suggestions are being displayed under the field.
I also attempted using a SelectInput component, but the list of options is empty.
The custom query in Redux was successful:
My code for the create and edit sections is quite similar:
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 the Edit and Create sections are not functioning properly for this ReferenceInput.
In my App.tsx file, I included this component within 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>
);
As per the documentation at , it seems that I am following the correct process and everything should work. However, I am puzzled as to why no suggestions are being displayed.