continuing-cyan•6mo ago

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

kapa.ai•6mo ago

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:

import { Refine, LiveProvider } from "@refinedev/core";  
  
import { liveProvider } from "./my-live-provider";  
  
const App = () => {  
 return (  
 <Refine  
 liveProvider={liveProvider}  
 options={{ liveMode: "auto" }}  
 onLiveEvent={(event) => {  
 console.log(event);  
 }}  
 >  
 {/* ... */}  
 </Refine>  
 );  
};

import { Refine, LiveProvider } from "@refinedev/core";  
  
import { liveProvider } from "./my-live-provider";  
  
const App = () => {  
 return (  
 <Refine  
 liveProvider={liveProvider}  
 options={{ liveMode: "auto" }}  
 onLiveEvent={(event) => {  
 console.log(event);  
 }}  
 >  
 {/* ... */}  
 </Refine>  
 );  
};

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.

import { useSubscription } from "@refinedev/core";  
  
useSubscription({  
 resource: "alerts",  
 types: ["created", "updated"],  
 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.  
 },  
});

import { useSubscription } from "@refinedev/core";  
  
useSubscription({  
 resource: "alerts",  
 types: ["created", "updated"],  
 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.  
 },  
});

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: ----------------------

kapa.ai•6mo ago

<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below

continuing-cyan•6mo 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)

kapa.ai•6mo ago

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:

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

useSubscription({  
 channel: "alerts",  
 types: ["created", "updated"],  
 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.  
 },  
});

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

useSubscription({  
 channel: "alerts",  
 types: ["created", "updated"],  
 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.  
 },  
});

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: ----------------------

kapa.ai•6mo ago

<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below

continuing-cyan•6mo ago

@kapa.ai Still not working and I got this error: meta, subscriptionType and resource are required in params for graphql subscriptions

kapa.ai•6mo ago

Let 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:

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

useSubscription({  
 channel: "alerts",  
 enabled: true,  
 onLiveEvent: (event) => {  
 console.log(event);  
 },  
 params: {  
 resource: "alerts",  
 subscriptionType: "useList",  
 },  
 meta: {  
 fields: [  
 "id",  
 "eventType",  
 "description",
 // other fields you want to subscribe to
 ],  
 },  
});

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

useSubscription({  
 channel: "alerts",  
 enabled: true,  
 onLiveEvent: (event) => {  
 console.log(event);  
 },  
 params: {  
 resource: "alerts",  
 subscriptionType: "useList",  
 },  
 meta: {  
 fields: [  
 "id",  
 "eventType",  
 "description",
 // other fields you want to subscribe to
 ],  
 },  
});

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: ----------------------

kapa.ai•6mo ago

<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below

continuing-cyan•6mo 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.

kapa.ai•6mo ago

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: ----------------------

kapa.ai•6mo ago

<@240371095444652032> kapa.ai is still learning and improving, please let us know how it did by reacting below