How to listen changes realtime messages from Supabase Editor?

2 Replies

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To listen to realtime changes from Supabase in a Refine application, you need to set up Supabase Realtime and configure the liveProvider in your Refine app. Here's how to do it: 1. Enable Realtime in Supabase First, you need to enable Realtime for the tables you want to track in the Supabase dashboard: 1. Go to your Supabase dashboard 2. Navigate to the table editor for the table you want to track 3. Select "Enable Realtime" for that table As mentioned in the documentation:

We can do this from the Supabase dashboard for the database we created. If you haven't already, please go ahead and select Enable Realtime for the table from its editor.

Adding Realtime Collaboration 2. Configure liveProvider in your Refine app Refine has built-in support for Supabase Realtime. You need to: 1. Register the Supabase liveProvider in your Refine component 2. Set liveMode to "auto" to enable automatic real-time updates

import { Refine } from "@refinedev/core";
import { liveProvider } from "@refinedev/supabase";
import { supabaseClient } from "utility";

function App() {
  return (
    <Refine
      liveProvider={liveProvider(supabaseClient)}
      options={{ liveMode: "auto" }}
      /* ... other props */
    >
      {/* ... */}
    </Refine>
  );
}

import { Refine } from "@refinedev/core";
import { liveProvider } from "@refinedev/supabase";
import { supabaseClient } from "utility";

function App() {
  return (
    <Refine
      liveProvider={liveProvider(supabaseClient)}
      options={{ liveMode: "auto" }}
      /* ... other props */
    >
      {/* ... */}
    </Refine>
  );
}

Supabase Realtime Support 3. Use Refine data hooks with real-time capabilities Once you've set up the liveProvider, Refine's data hooks will automatically handle real-time updates. For example, when using useList(), any changes to the data will be reflected in real-time:

const { data } = useList({
  resource: "yourResourceName",
  // other options
});

const { data } = useList({
  resource: "yourResourceName",
  // other options
});

For more specific subscriptions, you can use the useSubscription hook:

useSubscription({
  channel: "resources/posts",
  type: ["deleted", "updated"],
  params: {
    ids: ["1", "2"],
  },
  onLiveEvent: () => setSubscriptionCount((prev) => prev + 1),
});

useSubscription({
  channel: "resources/posts",
  type: ["deleted", "updated"],
  params: {
    ids: ["1", "2"],
  },
  onLiveEvent: () => setSubscriptionCount((prev) => prev + 1),
});

Custom Subscriptions 4. For relational data If you're using relational queries, you'll need to manually subscribe to changes in related tables:

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

export const PostList = () => {
  const table = useTable({
    meta: {
      select: "*, categories(title)",
    },
  });

  useSubscription({
    channel: "categories",
    types: ["*"],
    onLiveEvent: () => {
      table.tableQuery.refetch();
    },
  });

  return <>{/* ... */}</>;
};

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

export const PostList = () => {
  const table = useTable({
    meta: {
      select: "*, categories(title)",
    },
  });

  useSubscription({
    channel: "categories",
    types: ["*"],
    onLiveEvent: () => {
      table.tableQuery.refetch();
    },
  });

  return <>{/* ... */}</>;
};

How can I use Supabase Realtime with relational queries Note that when using Supabase Realtime with Refine, the broadcasting of events is handled automatically by the mutation hooks like useCreate(), and subscription is managed by data hooks like useList() when you have the liveProvider properly configured. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@761921731505946634> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How to listen changes realtime messages from Supabase Editor?

Did you find this page helpful?