Files
supabase/apps/temp-docs/docs/reference/dart/subscribe.mdx
2022-04-26 14:17:19 +02:00

237 lines
4.1 KiB
Plaintext

---
id: subscribe
title: "on().subscribe()"
slug: subscribe
custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/dart.yml
---
import Tabs from '@theme/Tabs';
import TabsPanel from '@theme/TabsPanel';
Subscribe to realtime changes in your database.
<Tabs
defaultActiveId="dart"
groupId="reference/dart"
values={[{ label: 'Dart', value: 'dart' }]}>
<TabsPanel id="dart" label="dart">
```dart
final mySubscription = supabase
.from('countries')
.on(SupabaseEventTypes.all, (payload) {
// Handle realtime payload
})
.subscribe();
```
</TabsPanel>
</Tabs>
## 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="dart"
groupId="reference/dart"
values={[{ label: 'Dart', value: 'dart' }]}>
<TabsPanel id="dart" label="dart">
```dart
final mySubscription = supabase
.from('countries')
.on(SupabaseEventTypes.all, (payload) {
// Handle realtime payload
})
.subscribe();
```
</TabsPanel>
</Tabs>
### Listening to a specific table
<Tabs
defaultActiveId="dart"
groupId="reference/dart"
values={[{ label: 'Dart', value: 'dart' }]}>
<TabsPanel id="dart" label="dart">
```dart
final mySubscription = supabase
.from('countries')
.on(SupabaseEventTypes.all, (payload) {
// Handle realtime payload
})
.subscribe();
```
</TabsPanel>
</Tabs>
### Listening to inserts
<Tabs
defaultActiveId="dart"
groupId="reference/dart"
values={[{ label: 'Dart', value: 'dart' }]}>
<TabsPanel id="dart" label="dart">
```dart
final mySubscription = supabase
.from('countries')
.on(SupabaseEventTypes.insert, (payload) {
// Handle realtime 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="dart"
groupId="reference/dart"
values={[{ label: 'Dart', value: 'dart' }]}>
<TabsPanel id="dart" label="dart">
```dart
final mySubscription = supabase
.from('countries')
.on(SupabaseEventTypes.update, (payload) {
// Handle realtime 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="dart"
groupId="reference/dart"
values={[{ label: 'Dart', value: 'dart' }]}>
<TabsPanel id="dart" label="dart">
```dart
final mySubscription = supabase
.from('countries')
.on(SupabaseEventTypes.delete, (payload) {
// Handle realtime 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="dart"
groupId="reference/dart"
values={[{ label: 'Dart', value: 'dart' }]}>
<TabsPanel id="dart" label="dart">
```dart
final mySubscription = supabase
.from('countries')
.on(SupabaseEventTypes.insert, handleInsert)
.on(SupabaseEventTypes.delete, handleDelete)
.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="dart"
groupId="reference/dart"
values={[{ label: 'Dart', value: 'dart' }]}>
<TabsPanel id="dart" label="dart">
```dart
final mySubscription = supabase
.from('countries:id=eq.200')
.on(SupabaseEventTypes.update, handleRecordUpdated)
.subscribe();
```
</TabsPanel>
</Tabs>