v3.0 Real-time Updates With Mercure

Real-time Updates With Mercure

API Platform Admin support real-time updates by using the Mercure protocol.

Updates are received by using the useMercureSubscription hook in the ListGuesser, ShowGuesser and EditGuesser components.

To enable Mercure server-side, see the related documentation.

Once enabled, API Platform Admin for Hydra 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> or <OpenApiAdmin> component:

import { OpenApiAdmin } from "@api-platform/admin";

export default () => (
  <OpenApiAdmin
    entrypoint="https://demo.api-platform.com"
    docEntrypoint="https://demo.api-platform.com/docs.json"
    mercure={{ hub: "https://mercure.rocks/hub" }}
  />
);

Or in the data provider factory:

import { hydraDataProvider, fetchHydra } from "@api-platform/admin";
import { parseHydraDocumentation } from "@api-platform/api-doc-parser";

const dataProvider = baseHydraDataProvider({
  entrypoint,
  httpClient: fetchHydra,
  apiDocumentationParser: parseHydraDocumentation,
  mercure: { hub: "https://mercure.rocks/hub" },
});

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)

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop