ReferenceField not using custom data provider

[JoppeDC]

Description
I've extended the Hydra data provider to add authenticatino headers.
My dataprovider adds auth headers to ALL api calls. I need to use supabase auth headers for the API authentication.
This works fine for all show/edit pages etc.

I'm expecting all components to use this data provider.

But when using ReferenceField in either show or create/edit pages, these custom headers are not passed to the calls.
After doing some debuggin with console.logs, it appears that this component does not even call the custom dataprovider, but the built in data provider. Therefore, all these components cause request errors because the API returns 401. The data does appear, so it seems to be doing multiple API calls. One with the custom data provider, and one without.

After checking with the ReactAdmin team, it turns out this is probably related to the default Hydra Data Provider.
Can this be checked?

Reference: marmelab/react-admin#8883

[vaszabii]

I have the same problem. The ReferenceField is not using my custom data provider like any othe component and hook.

[marerchmielowskiss]

@JoppeDC @vaszabii Have any of you managed to resolve or go around this issue? I have exactly the same problem.

With some debugging i came to a conclusion that the custom data provider is being used, but it does not use custom httpClient where custom headers are passed. Thanks

[marerchmielowskiss]

This has been an issue since 2020. Is anybody using this whole api-platform admin stuff? How do people make anything usable with this library when basic features are buggy?
##275

[marerchmielowskiss]

For anyone who endup here from google search.
The core issue is that it's parseHydraDocumentation where headers are missing.
You can pass your own documentation parser to dataProvider with headers included.
This is my code:

export default function parseHydraDocumentation(
    entrypointUrl: string,
    options: RequestInitExtended = {}
): Promise<{
    api: Api;
    response: Response;
    status: number;
}> {
    const customHeaders = authHeadersProvider();

    options.headers = {
        ...options.headers,
        ...customHeaders
    };

    return baseParseHydraDocumentation(entrypointUrl, options);
}

dataProvider:

const baseDataProvider = hydraDataProvider({
    entrypoint: endpoint,
    httpClient: fetchHydra,
    useEmbedded: true,
    disableCache: true,
    apiDocumentationParser: parseHydraDocumentation
});