wise-white•7mo ago

How the subscription works when enabling Live provider for graphql?

Hi all, I would like to understand how Refine triggers subscriptions for instance in the CRM example. Below are my concerns: 1. I don't see how, based on API schemas, Refine prepare and run subscriptions for the different events. 2. Also, how Refine "plugs" a subscription response and a resource related in order to feed the appropriate screen with received data I thank in advance anyone keen to help me, as I am a real newbie in Refine. Regards

37 Replies

kapa.ai•7mo ago

Hi @Poutieu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello, Refine uses the concept of a Live Provider to handle real-time updates in your application. The Live Provider is an object that contains subscribe, unsubscribe, and publish methods. These methods are used by Refine to subscribe to updates for a certain resource, unsubscribe from these updates, and publish updates respectively. You can see an example of a basic Live Provider in the Refine documentation (https://refine.dev/docs/guides-concepts/realtime#live-provider). When you call the useList, useOne, or useMany hooks in your application, they will call the subscribe method of the Live Provider. This allows you to create subscription queries using the parameters of these hooks. After creating the subscription query, Refine will listen to it using the graphql-ws client and return the unsubscribe method to use in the unsubscribe method of the Live Provider. You can see an example of this in the Refine documentation (https://refine.dev/docs/guides-concepts/realtime#implementing-subscribe-method-1). In the case of GraphQL, the only difference between queries and subscriptions is the subscription keyword. This means that you can use the same logic for both queries and subscriptions. Refine already has a data provider for creating GraphQL queries, so it uses the same logic for GraphQL subscriptions. You can see an example of this in the Refine documentation (https://refine.dev/docs/guides-concepts/realtime#creating-a-live-provider-with-graphql-subscriptions). Once you have created your Live Provider, you can use it in your application like this:

import { Refine } from "@refinedev/core";  
import { createClient } from "graphql-ws";  
  
import { liveProvider } from "./liveProvider";  
  
const gqlWebSocketClient = createClient({  
 url: "YOUR_WS_URL",  
});  
  
const App: React.FC = () => {  
 return <Refine liveProvider={liveProvider(gqlWebSocketClient)}>{/* ... */} </Refine>;  
};

import { Refine } from "@refinedev/core";  
import { createClient } from "graphql-ws";  
  
import { liveProvider } from "./liveProvider";  
  
const gqlWebSocketClient = createClient({  
 url: "YOUR_WS_URL",  
});  
  
const App: React.FC = () => {  
 return <Refine liveProvider={liveProvider(gqlWebSocketClient)}>{/* ... */} </Refine>;  
};

You can see an example of this in the Refine documentation (https://refine.dev/docs/guides-concepts/realtime#usage-1). As for your second question, Refine hooks will create a subscription query using the parameters of the useSubscription hook and listen to it. When a live event is received, it will call the onLiveEvent method of the useSubscription hook. You can see an example of this in the Refine documentation (https://refine.dev/docs/guides-concepts/realtime#implementing-subscribe-method-1). I hope this helps! Let me know if you have any other questions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

wise-white•7mo ago

@kapa.ai does it mean I have to write in my backend a subscription operation for each query operation?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, in order to use GraphQL subscriptions, you would need to define a subscription operation for each query operation in your backend that you want to receive real-time updates for. GraphQL subscriptions are a way to push data from the server to the clients that choose to listen to real-time updates from the server. Subscriptions are similar to queries in that they specify a set of fields to be delivered to the client, but instead of immediately returning a single answer, a result is sent every time a particular event happens on the server. So, if you have a query operation that fetches data from a certain resource and you want to get real-time updates for that resource, you would need to define a subscription operation for it in your backend. You can find more information about GraphQL subscriptions in the GraphQL documentation (https://graphql.org/blog/subscriptions-in-graphql-and-relay/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

wise-white•7mo ago

Thanks @kapa.ai Do Refine needs to be told programmatically to connect and listen to events?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, Refine needs to be configured to connect and listen to events for real-time updates. This is done by setting up a Live Provider and passing it to the Refine component. A Live Provider is an object that contains subscribe, unsubscribe, and publish methods. These methods are used by Refine to subscribe to updates for a certain resource, unsubscribe from these updates, and publish updates respectively. Here's an example of how you can set up a Live Provider and pass it to the Refine component:

import { Refine } from "@pankod/refine";
import { createClient } from "graphql-ws";

import { liveProvider } from "./liveProvider";

const gqlWebSocketClient = createClient({
    url: "YOUR_WS_URL",
});

const App: React.FC = () => {
    return (
        <Refine liveProvider={liveProvider(gqlWebSocketClient)}>
            {/* ... */}
        </Refine>
    );
};

import { Refine } from "@pankod/refine";
import { createClient } from "graphql-ws";

import { liveProvider } from "./liveProvider";

const gqlWebSocketClient = createClient({
    url: "YOUR_WS_URL",
});

const App: React.FC = () => {
    return (
        <Refine liveProvider={liveProvider(gqlWebSocketClient)}>
            {/* ... */}
        </Refine>
    );
};

In this example, liveProvider is a function that returns a Live Provider object. gqlWebSocketClient is a GraphQL WebSocket client that is used to connect to the server and listen to events. You can find more information about how to set up a Live Provider in the Refine documentation (https://refine.dev/docs/realtime/live-provider/#Refine). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

wise-white•7mo ago

@kapa.ai I rephrase my previous question: let's say I have a certain number of subscription operations in backend, does Refine open a connection to all of them at once or does it depends on the screen I am currently seeing?

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Refine opens a connection based on the screen you are currently viewing. More specifically, it opens a connection when you call the useList, useOne, or useMany hooks in your application. These hooks will call the subscribe method of the Live Provider, which creates a subscription query using the parameters of these hooks and listens to it. For example, if you're on a screen that uses the useList hook to display a list of resources, Refine will open a connection to subscribe to updates for that specific resource. If you navigate to a different screen that uses the useOne hook to display a single resource, Refine will open a connection to subscribe to updates for that specific resource. This means that Refine doesn't open a connection to all subscription operations at once. Instead, it opens a connection based on the resource you're currently interacting with in your application. You can find more information about this in the Refine documentation (https://refine.dev/docs/guides-concepts/realtime#implementing-subscribe-method-1). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

wise-white•7mo ago

@kapa.ai Perfect!

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad you found the information helpful! If you have any more questions about Refine or need further clarification, feel free to ask. Happy coding! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

wise-white•7mo ago

@kapa.ai I would like to know which graphql dependencies I should use to connect to a java graphql API