@api-platform/mercure
is an EventSource wrapper that discovers a Mercure Hub according to the Link headers and handles subscriptions for you.
import mercure, { close } from "@api-platform/mercure";
const res = await mercure('https://localhost/authors/1', {
onUpdate: (author) => console.log(author)
})
const author = res.then(res => res.json())
// Close if you need to
history.onpushstate = function(e) {
close('https://localhost/authors/1')
}
Assuming /authors/1
returned:
Link: <https://localhost/authors/1>; rel="self"
Link: <https://localhost/.well-known/mercure>; rel="mercure"
A new EventSource
is created by subscribing to the topic https://localhost/authors/1
on the Hub https://localhost/.well-known/mercure
.
npm install @api-platform/mercure
Use mercure
like fetch
:
import mercure, { close } from "@api-platform/mercure";
const res = await mercure('https://localhost/authors/1', {
onUpdate: (author) => console.log(author)
})
const author = res.then(res => res.json())
Available options:
-
onError
on EventSource error callback -
EventSource
to provide your ownEventSource
constructor -
fetchFn
to provide your own fetch function, it needs to return a response so that we can read headers
This can be used in conjunction with @api-platform/ld as the fetchFn
.
See our Tanstack query example or the source code of our home page.