<HydraAdmin/> page remain empty despite successful XHR requests

[malutanpetronel]

API Platform version(s) affected: 3.3.3

Description

Why does my page remain empty despite successful XHR requests?
Hello everyone again,
I'm working with a page that successfully fetches data according to XHR logs.

Here's the relevant part of my @context:

{
    "@context": {
        "@vocab": "http://www.semese.local/api/docs.jsonld#",
        "hydra": "http://www.w3.org/ns/hydra/core#",
        "error": { "@id": "Entrypoint/error", "@type": "@id" },
        "constraintViolationList": { "@id": "Entrypoint/constraintViolationList", "@type": "@id" },
        "book": { "@id": "Entrypoint/book", "@type": "@id" },
        "review": { "@id": "Entrypoint/review", "@type": "@id" }
    }
}

Despite this, the page remains blank. Adding and under redirects me to /book, but still displays nothing.

For reference, I'm trying to achieve a similar functionality as seen in the API Platform demo: API Platform Admin Demo

Why are the resources not displayed, and how can I troubleshoot or fix this issue to see the data tables like in the demo?

How to reproduce

 - started with a clean new symfony 6.4 project
 - created 2 entities in the entity folder of the symfony project
 - adjusted nelmio-cors to have no issues
 - created a react frontend with 
      "@api-platform/admin": "^3.4.7",
      "react": "^18.2.0",
      "react-admin": "^4.16.17",
      ... and, the following react page:

import React from 'react';
import {AdminGuesser, HydraAdmin, ResourceGuesser} from "@api-platform/admin";  // Importă authProvider-ul tău
import {dataProvider} from "../dataProviders/dataProviderHydra"
import {CustomRoutes} from "react-admin";

const entrypoint = 'http://sf4.local/api/index.jsonld';
const HydraAdminPage = () => {
    return (
        <HydraAdmin
            entrypoint={entrypoint}
            dataProvider={dataProvider}
        >
            <ResourceGuesser name="book" />
            <ResourceGuesser name="review" />
        </HydraAdmin>
    );
};
export default HydraAdminPage;

Possible Solution

Additional Context

same issue is happening for me with api platform 2.7.18...

[malutanpetronel]

App.js version Hydra

import React from 'react';
import { Admin, ListGuesser, Resource, fetchUtils } from 'react-admin';
import { hydraDataProvider, fetchHydra } from '@api-platform/admin';
import { parseHydraDocumentation } from '@api-platform/api-doc-parser';
import authProvider from './auth/authProvider';

const entrypoint = 'http://sf4.local/api/v1';

// Configure the httpClient for use with fetchHydra
const httpClient = (url, options = {}) => {
if (!options.headers) {
options.headers = new Headers({ Accept: 'application/ld+json' });
}
const token = localStorage.getItem("authToken");
if (token) {
options.headers.set('Authorization', Bearer ${token});
}
return fetchUtils.fetchJson(url, options).catch((error) => {
console.error("Network error:", error);
return Promise.reject(error);
});
};

// Use the fetchHydra function provided by @api-platform/admin to adapt the httpClient for Hydra
const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint).then(
({ api }) => ({ api })
).catch((error) => {
console.error("API documentation parsing error:", error);
return Promise.reject(error);
});

console.log(typeof httpClient); // Should output 'function'
const enhancedHttpClient = fetchHydra(httpClient, { entrypoint });

const dataProvider = hydraDataProvider({
entrypoint,
httpClient: enhancedHttpClient, // configure httpClient with Hydra specifics
apiDocumentationParser
});

export default () =>




;

this app.js react app HydraAdmin version is presenting a strange error over the login or resources screen

[malutanpetronel]

Same app.js but with react admin does not!

import React from 'react';
import authProvider from "./auth/authProvider";
import {Admin, ListGuesser, Resource, fetchUtils} from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const entrypoint = 'http://sf4.local/api/v1';

const httpClient = (url, options = {}) => {
if (!options.headers) {
options.headers = new Headers({ Accept: 'application/json' });
}
// Preia token-ul din localStorage
const token = localStorage.getItem("authToken");
if (token) {
options.headers.set('Authorization', Bearer ${token});
}
console.warn(url);
console.warn(options);
return fetchUtils.fetchJson(url, options).catch((error) => {
console.error("Network error:", error);
return Promise.reject(error);
});
};

const dataProvider = jsonServerProvider(entrypoint, httpClient)

export default () =>




;