Question regarding live provider
I am using the ablyClient as the data provider and I added this config in my Refine component like this:
<Refine
dataProvider={{
default: dataProvider("http://127.0.0.1:8000/v1"),
}}
notificationProvider={notificationProvider}
routerProvider={routerBindings}
authProvider={authProvider}
liveProvider={liveProvider(ablyClient)}
resources={[
{
name: "jobs",
list: "/jobs",
show: "/jobs/show/:id",
create: "/jobs/create",
edit: "/jobs/edit/:id",
meta: {
label: "Jobs",
canDelete: true,
},
},
]}
options={{
liveMode: "auto",
syncWithLocation: true,
warnWhenUnsavedChanges: true,
projectId: "kKDbmc-9fHpIR-0YZxtm",
}}
According to the documentation, all the hooks in my app should be realtime updated, right? But why the frontend didn't change when there is a change in the backend? Note that I only requested data from the frontend to the backend through the hook. Should I send the data from the backend or request the data from the frontend if I am using hook to transfer the data
2 Replies
Hi @zion_48046. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, according to the documentation, refine provides a realtime feature that allows you to subscribe to the changes in the data and update the UI accordingly. This feature can be used through the
liveProvider prop of the <Refine> component. It provides a simple interface to integrate with and also provides built-in support for many providers. The realtime updates can work with the data hooks of refine without any additional configuration [^1^].
However, if your frontend is not updating when there is a change in the backend, it could be due to a few reasons:
1. The socket connection might not be established correctly. You can check this by logging the socket status in your liveProvider[^2^].
2. The channel name might be incorrect. Ensure that the channel name you are subscribing to in your component matches the one you are publishing to in your backend[^2^].
3. The refetch method might not be working as expected. You can check this by manually triggering a refetch to see if the table data updates[^2^].
In terms of data transfer, when using hooks like useCreate, useList, useOne, useMany, useCreateMany, useInfiniteList, and useDeleteMany, refine will automatically call the publish or subscribe methods from the liveProvider when the hook is mounted or a mutation runs successfully[^3^]. This allows you to easily integrate real-time updates into your application.
Therefore, you should not need to manually send data from the backend or request data from the frontend if you are using hooks to transfer the data. The liveProvider should handle this for you.
^1^]: [React-admin vs refine - Which React Framework is Best for B2B Apps? (https://refine.dev/blog/react-admin-vs-refine/#realtime)
^2^]: [Discord support thread: socket > Answers (https://discord.com/channels/837692625737613362/1138748349214904430)
^3^]: [Discord support thread: live update socket > Answers (https://discord.com/channels/837692625737613362/1145482474416259103)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1156621086176321576> kapa.ai is still learning and improving, please let us know how it did by reacting below