How to use subscriptions in Supabase?

 

Step 1: Setup Supabase Project

 

To get started, you'll need to have a Supabase project. If you haven't already set one up, follow these instructions:

Go to the Supabase website and sign up or log in.

Once logged in, create a new project by clicking the "New Project" button.

Fill in the project details like database password, project name, and desired region. Then, proceed to create the project.

 

Step 2: Setup Database Table

 

Before using subscriptions, you need a table to subscribe to. You can create this directly from the Supabase dashboard.

Navigate to the "Table Editor" in the Supabase dashboard.

Click "New Table" to create a new table. For example, a "messages" table with columns like "id", "content", and "created_at".

Ensure you have a primary key set (usually an "id" column) and that all necessary columns are configured.

Click "Save" to create the table.

 

Step 3: Install Supabase Client Library

 

For interacting with Supabase in your application, you'll need to install the Supabase client library.

If using npm:

npm install @supabase/supabase-js

If using yarn:

yarn add @supabase/supabase-js

 

Step 4: Initialize Supabase Client in Your Application

 

Before subscribing to database changes, initialize the Supabase client in your application with the API keys from the Supabase project settings.

Grab your Supabase URL and the public API key from your Supabase dashboard under "Settings" -> "API".

In your application code, initialize the client:

import { createClient } from '@supabase/supabase-js';

const SUPABASE\_URL = 'https://your-project.supabase.co';
const SUPABASE_ANON_KEY = 'your-anon-public-api-key';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON\_KEY);

 

Step 5: Subscribe to Database Changes

 

Now, set up a subscription to a table to listen for changes. For instance, you might want to watch for new rows added to the "messages" table.

Use the Supabase client to set up a subscription:

const subscription = supabase
  .from('messages')
  .on('INSERT', (payload) => {
    console.log('New message:', payload.new);
  })
  .subscribe();

This example listens for INSERT operations on the "messages" table and logs the new items.

 

Step 6: Manage and Cleanup Subscriptions

 

When your app component unmounts or when you need to unsubscribe, ensure you remove the subscription to avoid memory leaks:

supabase.removeSubscription(subscription);

You might incorporate this in a cleanup function in components that use hooks or lifecycle methods.

 

Step 7: Testing the Subscription

 

To ensure everything is set up correctly, perform an insert operation to the "messages" table to see if the subscription logs the changes.

Add a new message using the Supabase dashboard or directly via the client:

const { data, error } = await supabase
  .from('messages')
  .insert([{ content: 'Hello, world!', created\_at: new Date() }]);

Check your application logs to verify that the new message is being captured by the subscription.

 

Step 8: Handle Subscription Events

 

Depending on your application's needs, you might handle different types of events like 'UPDATE', 'DELETE', etc. Adjust the event type as required in your subscription:

const updateSubscription = supabase
  .from('messages')
  .on('UPDATE', (payload) => {
    console.log('Updated message:', payload.new);
  })
  .subscribe();

This example listens for update events instead of insertions.

 

By integrating these steps, you'll effectively implement and manage real-time subscriptions with Supabase in your application.