feat: extract Mercure hub from response headers (#1480)

Author: alanpoulain

admin/components.md

@@ -219,7 +219,6 @@ const App = () => (
     entrypoint={entrypoint}
     dataProvider={dataProvider}
     authProvider={authProvider}
-    mercure={true}
    >
      <ResourceGuesser name="books" />
      { /* ... */ }

admin/customizing.md

@@ -17,7 +17,7 @@ To cherry-pick the resources to make available through the admin, pass a list of
 import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";
 
 export default () => (
-  <HydraAdmin entrypoint="https://demo.api-platform.com" mercure={true}>
+  <HydraAdmin entrypoint="https://demo.api-platform.com">
     <ResourceGuesser name="books" />
     <ResourceGuesser name="reviews" />
 
@@ -52,7 +52,7 @@ const ReviewsList = props => (
 );
 
 export default () => (
-  <HydraAdmin entrypoint="https://demo.api-platform.com" mercure={true}>
+  <HydraAdmin entrypoint="https://demo.api-platform.com">
     <ResourceGuesser name="reviews" list={ReviewsList} />
     {/* ... */}
   </HydraAdmin>
@@ -90,7 +90,7 @@ const ReviewsShow = props => (
 );
 
 export default () => (
-  <HydraAdmin entrypoint="https://demo.api-platform.com" mercure={true}>
+  <HydraAdmin entrypoint="https://demo.api-platform.com">
     <ResourceGuesser name="reviews" show={ReviewsShow} />
     {/* ... */}
   </HydraAdmin>
@@ -126,7 +126,7 @@ const ReviewsCreate = props => (
 );
 
 export default () => (
-  <HydraAdmin entrypoint="https://demo.api-platform.com" mercure={true}>
+  <HydraAdmin entrypoint="https://demo.api-platform.com">
     <ResourceGuesser name="reviews" create={ReviewsCreate} />
     {/* ... */}
   </HydraAdmin>
@@ -164,7 +164,7 @@ const ReviewsEdit = props => (
 );
 
 export default () => (
-  <HydraAdmin entrypoint="https://demo.api-platform.com" mercure={true}>
+  <HydraAdmin entrypoint="https://demo.api-platform.com">
     <ResourceGuesser edit={ReviewsEdit}/>
     {/* ... */}
   </HydraAdmin>

admin/file-upload.md

@@ -25,7 +25,7 @@ const MediaObjectsCreate = props => (
 );
 
 export default () => (
-  <HydraAdmin entrypoint="https://demo.api-platform.com" mercure={true}>
+  <HydraAdmin entrypoint="https://demo.api-platform.com">
     <ResourceGuesser name="media_objects" create={MediaObjectsCreate} />
     {/* ... */}
   </HydraAdmin>

admin/getting-started.md

@@ -35,7 +35,7 @@ import { HydraAdmin } from "@api-platform/admin";
 // Replace with your own API entrypoint
 // For instance if https://example.com/api/books is the path to the collection of book resources, then the entrypoint is https://example.com/api
 export default () => (
-  <HydraAdmin entrypoint="https://demo.api-platform.com" mercure={true} />
+  <HydraAdmin entrypoint="https://demo.api-platform.com" />
 );
 ```
 

admin/handling-relations.md

@@ -98,7 +98,7 @@ const BooksList = (props) => (
 );
 
 export default () => (
-  <HydraAdmin entrypoint={process.env.REACT_APP_API_ENTRYPOINT} mercure={true}>
+  <HydraAdmin entrypoint={process.env.REACT_APP_API_ENTRYPOINT}>
     <ResourceGuesser
       name="books"
       list={BooksList}
@@ -128,7 +128,7 @@ const BooksList = (props) => (
 );
 
 export default () => (
-  <HydraAdmin entrypoint={process.env.REACT_APP_API_ENTRYPOINT} mercure={true}>
+  <HydraAdmin entrypoint={process.env.REACT_APP_API_ENTRYPOINT}>
     <ResourceGuesser
       name="books"
       list={BooksList}
@@ -256,7 +256,7 @@ const ReviewsEdit = props => (
 );
 
 export default () => (
-  <HydraAdmin entrypoint={process.env.REACT_APP_API_ENTRYPOINT} mercure={true}>
+  <HydraAdmin entrypoint={process.env.REACT_APP_API_ENTRYPOINT}>
     <ResourceGuesser
       name="reviews"
       create={ReviewsCreate}
@@ -318,7 +318,7 @@ const ReviewsEdit = props => (
 );
 
 export default () => (
-  <HydraAdmin entrypoint={process.env.REACT_APP_API_ENTRYPOINT} mercure={true}>
+  <HydraAdmin entrypoint={process.env.REACT_APP_API_ENTRYPOINT}>
     <ResourceGuesser
       name="reviews"
       create={ReviewsCreate}

admin/real-time-mercure.md

@@ -6,14 +6,20 @@ Updates are received by using the `useMercureSubscription` hook in the `ListGues
 
 To enable Mercure server-side, see the [related documentation](../core/mercure.md).
 
-To receive API updates from the hub, you need to explicitly enable Mercure in the Hydra data provider.
-To do so, you can either do it with a prop in the `<HydraAdmin>` component:
+Once enabled, API Platform Admin will automatically detect that Mercure is enabled and will discover the Mercure hub URL by itself.
+
+## Advanced Configuration
+
+If you want to customize the default Mercure configuration, you can either do it with a prop in the `<HydraAdmin>` component:
 
 ```javascript
 import { HydraAdmin } from "@api-platform/admin";
 
 export default () => (
-  <HydraAdmin entrypoint="https://demo.api-platform.com" mercure={true} />
+  <HydraAdmin
+    entrypoint="https://demo.api-platform.com"
+    mercure={{ hub: "https://mercure.rocks/hub" }}
+  />
 );
 ```
 
@@ -27,17 +33,11 @@ const dataProvider = baseHydraDataProvider({
   entrypoint,
   httpClient: fetchHydra,
   apiDocumentationParser: parseHydraDocumentation,
-  mercure: true,
+  mercure: { hub: "https://mercure.rocks/hub" },
 });
 ```
 
-If you want to disable Mercure, use `false` for the `mercure` value instead.
-
-## Advanced Configuration
-
-The `mercure` value can also takes an object to customize the default configuration.
-
-The object has the following properties:
-- `hub`: the URL to your Mercure hub (default value: entrypoint/.well-known/mercure)
+The `mercure` object can take the following properties:
+- `hub`: the URL to your Mercure hub (default value: null ; when null it will be discovered by using API responses)
 - `jwt`: a subscriber JWT to access your Mercure hub (default value: null)
 - `topicUrl`: the topic URL of your resources (default value: entrypoint)