[crm-example] Where is the logic of subscription call from UI
Hi all,
I discovered Refine few months ago and really like the way it's draws the best practices to build enterprise grade app.
I am currently exercising myself with crm-example and would love to have answer from someone regarding where the subscription operations are called specifically in the example, could someone tell me?
Regards
8 Replies
Hi @Poutieu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In the CRM example, the subscription operations are handled by the
useSubscription and useResourceSubscription hooks.
The useSubscription hook calls the subscribe method from liveProvider when mounted. This is useful when you want to subscribe to a Realtime channel. Refine uses this hook internally in data hooks to subscribe Realtime data. More details can be found in the useSubscription documentation (https://refine.dev/docs/realtime/hooks/use-subscription/).
The useResourceSubscription hook is used to subscribe to the pixels channel. The subscribe() method is called from inside the useResourceSubscription hook. More details can be found in the liveProvider docs here (https://refine.dev/docs/api-reference/core/providers/live-provider/).
Please note that these hooks are part of the core functionality provided by Refine and are used throughout the application for handling Realtime data.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1190340771946188961> kapa.ai is still learning and improving, please let us know how it did by reacting below
rising-crimsonOP•11mo ago
How does Refine maps suscription exposed by the live provider backend and the graphql types?
@kapa.ai How does Refine maps suscription exposed by the live provider backend and the graphql types?
Let me check the knowledge base for you. One moment! :books:
----------------------
Refine uses the
return {
subscribe: ({ channel, types, params, callback, meta }) => {
console.log(channel); // products, orders, etc.
console.log(types); // created, updated, deleted, "", etc.
console.log(params); // { id: 1 } or { ids: [1, 2, 3] }, etc.
console.log(callback); // a function that will be called when there is an update
console.log(meta); // { fields: [], operation: "", queryContext: {}, variables: {} }
const channelInstance = client.channels.get(channel);
const listener = function (message: MessageType) {
if (types.includes("*") || types.includes(message.data.type)) {
if (
message.data.type !== "created" &&
params?.ids !== undefined &&
message.data?.payload?.ids !== undefined
) {
if (params.ids.filter((value) => message.data.payload.ids!.includes(value)).length > 0) {
callback(message.data as LiveEvent);
}
} else {
callback(message.data);
}
}
};
channelInstance.subscribe(listener);
// returned value will be passed to
// required for unsubscribing from the channel.
return { channelInstance, listener };
},
};
};
subscribe method from the liveProvider to subscribe to Realtime channels. This method is used in various hooks such as useSubscription, useTable, useSelect, useDataGrid, useSimpleList, and useResourceSubscription.
The subscribe method is implemented in the liveProvider and it takes parameters such as channel, types, params, callback, and meta. The channel parameter is used to specify the Realtime channel to subscribe to. The types parameter is used to specify the types of events to listen for (e.g., "created", "updated", "deleted", ""). The params parameter can be used to filter the data (e.g., { id: 1 } or { ids: [1, 2, 3] }). The callback parameter is a function that will be called when there is an update. The meta parameter can be used to provide additional information.
Here is an example of how the subscribe method is implemented in the liveProvider:
```jsx
export const liveProvider = (client: Ably.Realtime): LiveProvider => {return {
subscribe: ({ channel, types, params, callback, meta }) => {
console.log(channel); // products, orders, etc.
console.log(types); // created, updated, deleted, "", etc.
console.log(params); // { id: 1 } or { ids: [1, 2, 3] }, etc.
console.log(callback); // a function that will be called when there is an update
console.log(meta); // { fields: [], operation: "", queryContext: {}, variables: {} }
const channelInstance = client.channels.get(channel);
const listener = function (message: MessageType) {
if (types.includes("*") || types.includes(message.data.type)) {
if (
message.data.type !== "created" &&
params?.ids !== undefined &&
message.data?.payload?.ids !== undefined
) {
if (params.ids.filter((value) => message.data.payload.ids!.includes(value)).length > 0) {
callback(message.data as LiveEvent);
}
} else {
callback(message.data);
}
}
};
channelInstance.subscribe(listener);
// returned value will be passed to
unsubscribe method.// required for unsubscribing from the channel.
return { channelInstance, listener };
},
};
};
``
The GraphQL types are not directly mapped to the subscribe method. However, the subscribe method can be used to listen for changes in the data that is managed by GraphQL. The callback function that is passed to the subscribe` method can be used to handle these changes.
For more information, you can refer to the Refine documentation (https://refine.dev/docs/realtime/live-provider/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1190340771946188961> kapa.ai is still learning and improving, please let us know how it did by reacting below
rising-crimsonOP•11mo ago
@kapa.ai How is it use in CRM example?
Let me check the knowledge base for you. One moment! :books:
----------------------
Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain specific information about how subscription operations are implemented in the CRM example.
However, you can refer to the Refine documentation (https://refine.dev/docs/) for more information on how subscription operations are generally handled in Refine. You may also find it helpful to review the source code for the CRM example (https://github.com/refinedev/refine/tree/master/examples/app-crm) on GitHub.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
multiple-amethyst•11mo ago
Hello @Poutieu crm example is using
@refinedev/nestjs-query package, which has live provider
See the relevant section here: https://refine.dev/docs/data/packages/nestjs-query/#realtime
You can also check our realtime guide here: https://refine.dev/docs/guides-concepts/realtime/
Here is API docs for live provider: https://refine.dev/docs/realtime/live-provider/Realtime | Refine
Realtime data is an important part of modern applications. Seeing the changes in the details page, without refreshing the page not only improves the user experience but also increases the productivity of the users by preventing accidental updates.
Live Provider | Refine
Live Provider is Refine's built-in provider that enables real-time updates and interactions between the server and the client. Refine being agnostic as always allows you to integrate any solution of your choice
Nest.js Query | Refine
Refine provides a data provider for APIs powered with Nest.js Query, a module for Nest.js that provides easier ways to build CRUD graphql APIs.