v3.1 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