Skip to main content
Version: 4.xx.xx
Source Code

useSubscription

useSubscription calls the subscribe method from liveProvider when mounted. It is useful when you want to subscribe to a Realtime channel.

Refine uses this hook internally in data hooks to subscribe Realtime data. You can refer liveProvider's Integrated Hooks section for more information.

Usage​

import { useSubscription } from "@refinedev/core";

useSubscription({
channel: "channel-name",
types: ["event-name", "another-event-name"]
onLiveEvent: (event) => {},
dataProviderName: "default",
});

Properties​

useSubscription will be passed to the subscribe method from the liveProvider as a parameter. You can use the following properties of this method while subscribing to a channel.

channel
required
​

Channel name to subscribe to.

onLiveEvent
required
​

Callback that is run when new events from the subscription arrive.

types​

Type of events to subscribe. "\*" means all events. By default, it subscribes to all events.

enabled​

You can disable the subscription by setting this prop to false and vice versa. By default, it is enabled.

params​

You can pass any additional parameters to the liveProvider's subscribe method.

Hooks that use useSubscription internally send the query's parameters' (pagination, meta, sort, filters, etc.) information along with this prop.

For more information on which hooks use useSubscription internally, refer to the LiveProvider's "Integrated Hooks" section→

dataProviderName​

You can pass the name of the data provider to use for the subscription. By default, it uses the "default" data provider.

API Reference​

Properties​

PropertyTypeDescriptionDefault
channel
οΉ‘

string

Channel name to subscribe.

onLiveEvent
οΉ‘

(event: LiveEvent) => void

Callback that is run when new events from subscription arrive.

types

Array<"deleted" | "updated" | "created" | "*" | string>

Type of events to subscribe. "*" means all events.

["*"]

enabled

Array<"deleted" | "updated" | "created" | "*" | string>

Determines subscription should subscribe or not.

true

params

{ [key: string]: any; ids?: BaseKey[]; id?: BaseKey; meta?: MetaQuery

undefined; metaData?: MetaQuery

undefined; ... 6 more ...; resource?: string

undefined; }

undefined

dataProviderName

use meta.dataProviderName instead.

string

default

meta

({ [k: string]: any; queryContext?: Omit<QueryFunctionContext<QueryKey, any>, "meta">; } & QueryBuilderOptions & GraphQLQueryOptions & { ...; })