Subscription
I have a case where I want to subscribe to Notifications - meaning when a new notification data is added to the table, I want to show an alert.
On my header I have this:
const { selectProps: alertSelectProps, queryResult: alertQueryResult } = useAlerts();
return (
<Layout.Header style={headerStyles}>
<Space align="center" size="middle">
<Notifications data={actualData}/>
<CurrentUser />
</Space>
</Layout.Header>
);
And the notification handles the data.
Now inside the useAlers I have the query:
import { useSelect } from "@refinedev/antd";
import { GetFieldsFromList } from "@refinedev/nestjs-query";
import gql from "graphql-tag";
import { AlertsQuery } from "@/graphql/types";
const ALERTS_QUERY = gql
query Alerts(
$paging: OffsetPaging!
$filter: AlertFilter!
$sorting: [AlertSort!]
) {
alerts(paging: $paging, filter: $filter, sorting: $sorting) {
nodes {
id
gateway{
id
serialNumber
}
vehicle{
id
vin
make
model
}
driver{
id
name
}
createdAt
active
eventType
description
}
totalCount
}
}
;
export const useAlerts = () => {
return useSelect<AlertsQuery>({
resource: "alerts",
pagination: {
pageSize: 5,
},
sorters: [{ field: "created_at", order: "desc" }],
meta: {
gqlQuery: ALERTS_QUERY,
},
liveMode: "auto",
});
};
However I noticed that it seems that the subscription is not working well.
Is there another place where I should use hookd like this to keep getting updated data onto my refine project?11 Replies
Hi @Valugar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In Refine, to subscribe to live updates, you need to use a
LiveProvider
. When a hook like useSelect
is mounted, it will call the subscribe
method from the liveProvider
with some parameters such as channel
, resource
etc. This is useful when you want to subscribe to live updates.
In your case, you have set liveMode: "auto"
in your useSelect
hook which should automatically subscribe to updates for the alerts
resource. However, you need to ensure that you have a LiveProvider
integrated in your application.
Here is an example of how to integrate a LiveProvider
:
Once a LiveProvider
is integrated, Refine takes care of the invalidation, refetching logic for your resources. For example, if a new record is created for alerts
resource, a page where you use useSelect
hook will automatically refetch the latest alerts
data.
If you want to subscribe to certain resource updates, you can use the useSubscription
hook. It calls LiveProvider
's subscribe
method with the given parameters.
Please refer to the Realtime (https://refine.dev/docs/guides-concepts/realtime) and Hooks (https://refine.dev/docs/guides-concepts/realtime#hooks) sections in the Refine documentation for more information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
evident-indigoOP•8mo ago
@kapa.ai I see, thanks but I get this error
Object literal may only specify known properties, and 'resource' does not exist in type 'UseSubscriptionProps'.ts(2353)
Let me check the knowledge base for you. One moment! :books:
----------------------
It seems like there's a misunderstanding about the usage of the
useSubscription
hook. The useSubscription
hook does not accept a resource
property. Instead, it accepts a channel
property.
Here's how you should use it:
In this example, channel
is the name of the resource you want to subscribe to. The types
array specifies the types of events you want to listen to (e.g., "created", "updated"). The onLiveEvent
function is called whenever an event of the specified type occurs on the specified channel.
Please refer to the Realtime (https://refine.dev/docs/guides-concepts/realtime#hooks) section in the Refine documentation for more information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
evident-indigoOP•8mo ago
@kapa.ai Still not working and I got this error:
meta
, subscriptionType
and resource
are required in params
for graphql subscriptionsLet me check the knowledge base for you. One moment! :books:
----------------------
The error message indicates that the
meta
, subscriptionType
, and resource
properties are required in the params
object for GraphQL subscriptions.
Here's how you should use the useSubscription
hook with these properties:
In this example, params
is an object that includes the resource
and subscriptionType
properties. resource
is the name of the resource you want to subscribe to, and subscriptionType
is the type of subscription you want to create (e.g., "useList", "useOne", "useMany").
meta
is an object that includes the fields
property, which is an array of the fields you want to subscribe to.
Please refer to the Realtime (https://refine.dev/docs/guides-concepts/realtime#implementing-subscribe-method-1) section in the Refine documentation for more information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below
evident-indigoOP•8mo ago
@kapa.ai Seems like the console.log dont do anything.
I have this:
useSubscription({
channel: "alerts",
params: {
resource: "alerts",
subscriptionType: "useList",
},
meta: {
fields: [
"id",
"eventType",
"description",
"active"
],
},
onLiveEvent: (event) => {
console.log(event.channel); // alerts, orders, etc.
console.log(event.type); // created, updated, deleted, etc.
console.log(event.payload); // { id: 1, name: "Alert 1" }, { id: 2, name: "Alert 2" }, etc.
}, }); alongside the useAlerts: export const useAlerts = () => { return useSelect<AlertsQuery>({ resource: "alerts", pagination: { pageSize: 5, }, sorters: [{ field: "created_at", order: "desc" }], meta: { gqlQuery: ALERTS_QUERY, }, liveMode: "auto", }); }; and seems like only the useAlerts queries.
console.log(event.type); // created, updated, deleted, etc.
console.log(event.payload); // { id: 1, name: "Alert 1" }, { id: 2, name: "Alert 2" }, etc.
}, }); alongside the useAlerts: export const useAlerts = () => { return useSelect<AlertsQuery>({ resource: "alerts", pagination: { pageSize: 5, }, sorters: [{ field: "created_at", order: "desc" }], meta: { gqlQuery: ALERTS_QUERY, }, liveMode: "auto", }); }; and seems like only the useAlerts queries.
Let me check the knowledge base for you. One moment! :books:
----------------------
If you're not seeing any console logs from the
onLiveEvent
callback, it could be due to a few reasons:
1. There are no events occurring on the alerts
channel. Make sure that events are being published to this channel.
2. The useSubscription
hook is not being called. Ensure that the component where you're calling useSubscription
is being rendered.
3. There might be an issue with your LiveProvider
. Ensure that your LiveProvider
is correctly set up and that the subscribe
method is implemented correctly.
Remember that the useSubscription
hook should be used in a component that is within the Refine
component where the LiveProvider
is provided.
Also, note that the useSubscription
hook is used to subscribe to real-time updates. It does not initiate any queries itself. The useSelect
hook is responsible for fetching the initial data.
If you're still having issues, I would recommend checking the Realtime (https://refine.dev/docs/guides-concepts/realtime#hooks) and Hooks (https://refine.dev/docs/guides-concepts/realtime#implementing-subscribe-method-1) sections in the Refine documentation for more information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below