supabase/apps/temp-docs/docs/reference/javascript/subscribe.mdx

---
id: subscribe
title: "on().subscribe()"
slug: subscribe
custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supabase.yml
---

import Tabs from '@theme/Tabs';
import TabsPanel from '@theme/TabsPanel';

Subscribe to realtime changes in your databse.

<Tabs
  defaultActiveId="js"
  groupId="reference/supabase-js"
  values={[{ label: 'JavaScript', value: 'js' }]}>

<TabsPanel id="js" label="js">

```js
const mySubscription = supabase
  .from('*')
  .on('*', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()
```


</TabsPanel>

</Tabs>

## Parameters


<ul className="method-list-group">
  
<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      event
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>SupabaseEventTypes</code>
    </span>
  </h4>
  <div class="method-list-item-description">

The database event which you would like to receive updates for, or you can use the special wildcard `*` to listen to all changes.

  </div>
  
</li>


<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      callback
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

A callback that will handle the payload that is sent whenever your database changes.

  </div>
  
</li>

</ul>


## Notes

- Realtime is disabled by default for new Projects for better database performance and security. You can turn it on by [managing replication](/docs/guides/api#managing-realtime).
- If you want to receive the "previous" data for updates and deletes, you will need to set `REPLICA IDENTITY` to `FULL`, like this: `ALTER TABLE your_table REPLICA IDENTITY FULL;`










## Examples

### Listen to all database changes



<Tabs
  defaultActiveId="js"
  groupId="reference/supabase-js"
  values={[{ label: 'JavaScript', value: 'js' }]}>

<TabsPanel id="js" label="js">

```js
const mySubscription = supabase
  .from('*')
  .on('*', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()
```


</TabsPanel>

</Tabs>

### Listening to a specific table



<Tabs
  defaultActiveId="js"
  groupId="reference/supabase-js"
  values={[{ label: 'JavaScript', value: 'js' }]}>

<TabsPanel id="js" label="js">

```js
const mySubscription = supabase
  .from('countries')
  .on('*', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()
```


</TabsPanel>

</Tabs>

### Listening to inserts



<Tabs
  defaultActiveId="js"
  groupId="reference/supabase-js"
  values={[{ label: 'JavaScript', value: 'js' }]}>

<TabsPanel id="js" label="js">

```js
const mySubscription = supabase
  .from('countries')
  .on('INSERT', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()
```


</TabsPanel>

</Tabs>

### Listening to updates

By default, Supabase will send only the updated record. If you want to receive the previous values as well you can 
enable full replication for the table you are listening too: 

```sql
alter table "your_table" replica identity full;
```


<Tabs
  defaultActiveId="js"
  groupId="reference/supabase-js"
  values={[{ label: 'JavaScript', value: 'js' }]}>

<TabsPanel id="js" label="js">

```js
const mySubscription = supabase
  .from('countries')
  .on('UPDATE', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()
```


</TabsPanel>

</Tabs>

### Listening to deletes

By default, Supabase does not send deleted records. If you want to receive the deleted record you can 
enable full replication for the table you are listening too: 

```sql
alter table "your_table" replica identity full;
```


<Tabs
  defaultActiveId="js"
  groupId="reference/supabase-js"
  values={[{ label: 'JavaScript', value: 'js' }]}>

<TabsPanel id="js" label="js">

```js
const mySubscription = supabase
  .from('countries')
  .on('DELETE', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()
```


</TabsPanel>

</Tabs>

### Listening to multiple events

You can chain listeners if you want to listen to multiple events for each table.

<Tabs
  defaultActiveId="js"
  groupId="reference/supabase-js"
  values={[{ label: 'JavaScript', value: 'js' }]}>

<TabsPanel id="js" label="js">

```js
const mySubscription = supabase
  .from('countries')
  .on('INSERT', handleRecordInserted)
  .on('DELETE', handleRecordDeleted)
  .subscribe()
```


</TabsPanel>

</Tabs>

### Listening to row level changes

You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match.

<Tabs
  defaultActiveId="js"
  groupId="reference/supabase-js"
  values={[{ label: 'JavaScript', value: 'js' }]}>

<TabsPanel id="js" label="js">

```js
const mySubscription = supabase
  .from('countries:id=eq.200')
  .on('UPDATE', handleRecordUpdated)
  .subscribe()
```


</TabsPanel>

</Tabs>