<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 () => <Admin dataProvider={dataProvider} authProvider={authProvider}

;

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 () => <Admin entrypoint={entrypoint} dataProvider={dataProvider} authProvider={authProvider}

;