mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Copple
a788003648
## What kind of change does this PR introduce? Updates the docs with the new developer experience: https://deploy-preview-253--supabase.netlify.app/docs - Documents the new Auth using `gotrue-js` - Fixes #179 - Fixes OAuth links https://github.com/supabase/supabase/issues/241#issuecomment-705632335 - [x] Add docs on Policies ## Additional context Related PR on `supabase-js` https://github.com/supabase/supabase-js/pull/50 * Updates the docs for the new Auth DX. * docs: adds docs for subscribing to rows * Updates all the reads * Updates all the docs with the new format * docs: Replaces all { error, data} with data first, because I subjectively think it looks better * Adds some of the breaking changes to a blog post * Adds headings * removes the blog post since it is now in notion * Adds the Oauth changes * removes recharts because we no longer use it * Adds basic structure for GoTrue ref * Adds styles for the api reference docs * Adds more generated docs * Downloads the files to work locally * Adds a supabase generator * Moves some of the guides into the "tools" folder * Re-shuffles some of the pages around * Generated everythign related to the Supabase Client * Refactors and categorieses the pages * Changes the names to be more readable * Migrates almost all of the filters into the API reference * Moves most of the stored procedure filters * Adds realtime-js to the mix * More desciptive titles * Moves all the generated docs to the docs folder * Moves over some of the data manipulators * Extracts most of the client functionality to the API ref * Adds more detail to the guides * Removes the reference to the emulator * Adds the supabase 1.0 blog post * Adds a redirects for netlify * chore: Updates packages * Updates broken links * Adding docs for the server * Adds comments to gotrue and pgapi * Adds a twitter icon to our navbar * Updates the auth with the new user and session return values * Updates the sponsors * Styles for cards * Adds a default value to all of the Tabs
331 lines
5.0 KiB
Plaintext
331 lines
5.0 KiB
Plaintext
---
|
|
id: subscribe
|
|
title: "on().subscribe()"
|
|
slug: subscribe
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
Subscribe to realtime changes in your databse.
|
|
|
|
<Tabs
|
|
defaultValue="js"
|
|
groupId="libraries"
|
|
values={[{ label: 'JavaScript', value: 'js' },{ label: 'Python', value: 'py' }]}>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
const mySubscription = supabase
|
|
.from('*')
|
|
.on('*', payload => {
|
|
console.log('Change received!', payload)
|
|
})
|
|
.subscribe()
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
<TabItem value="py">
|
|
|
|
```py
|
|
# Not yet implemented
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
|
|
</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">
|
|
INSERT | UPDATE | DELETE | *
|
|
</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">
|
|
object
|
|
</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
|
|
|
|
- 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
|
|
defaultValue="js"
|
|
groupId="libraries"
|
|
values={[{ label: 'JavaScript', value: 'js' },{ label: 'Python', value: 'py' }]}>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
const mySubscription = supabase
|
|
.from('*')
|
|
.on('*', payload => {
|
|
console.log('Change received!', payload)
|
|
})
|
|
.subscribe()
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
<TabItem value="py">
|
|
|
|
```py
|
|
# Not yet implemented
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to a specific table
|
|
|
|
|
|
|
|
<Tabs
|
|
defaultValue="js"
|
|
groupId="libraries"
|
|
values={[{ label: 'JavaScript', value: 'js' },{ label: 'Python', value: 'py' }]}>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
const mySubscription = supabase
|
|
.from('countries')
|
|
.on('*', payload => {
|
|
console.log('Change received!', payload)
|
|
})
|
|
.subscribe()
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
<TabItem value="py">
|
|
|
|
```py
|
|
# Not yet implemented
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to inserts
|
|
|
|
|
|
|
|
<Tabs
|
|
defaultValue="js"
|
|
groupId="libraries"
|
|
values={[{ label: 'JavaScript', value: 'js' },{ label: 'Python', value: 'py' }]}>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
const mySubscription = supabase
|
|
.from('countries')
|
|
.on('INSERT', payload => {
|
|
console.log('Change received!', payload)
|
|
})
|
|
.subscribe()
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
<TabItem value="py">
|
|
|
|
```py
|
|
# Not yet implemented
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to updates
|
|
|
|
|
|
|
|
<Tabs
|
|
defaultValue="js"
|
|
groupId="libraries"
|
|
values={[{ label: 'JavaScript', value: 'js' },{ label: 'Python', value: 'py' }]}>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
const mySubscription = supabase
|
|
.from('countries')
|
|
.on('UPDATE', payload => {
|
|
console.log('Change received!', payload)
|
|
})
|
|
.subscribe()
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
<TabItem value="py">
|
|
|
|
```py
|
|
# Not yet implemented
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to deletes
|
|
|
|
|
|
|
|
<Tabs
|
|
defaultValue="js"
|
|
groupId="libraries"
|
|
values={[{ label: 'JavaScript', value: 'js' },{ label: 'Python', value: 'py' }]}>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
const mySubscription = supabase
|
|
.from('countries')
|
|
.on('DELETE', payload => {
|
|
console.log('Change received!', payload)
|
|
})
|
|
.subscribe()
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
<TabItem value="py">
|
|
|
|
```py
|
|
# Not yet implemented
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
|
|
</Tabs>
|
|
|
|
### Listening to multiple events
|
|
|
|
You can chain listeners if you want to listen to multiple events for each table.
|
|
|
|
<Tabs
|
|
defaultValue="js"
|
|
groupId="libraries"
|
|
values={[{ label: 'JavaScript', value: 'js' },{ label: 'Python', value: 'py' }]}>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
const mySubscription = supabase
|
|
.from('countries')
|
|
.on('INSERT', handleRecordInserted)
|
|
.on('DELETE', handleRecordDeleted)
|
|
.subscribe()
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
<TabItem value="py">
|
|
|
|
```py
|
|
# Not yet implemented
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
|
|
</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
|
|
defaultValue="js"
|
|
groupId="libraries"
|
|
values={[{ label: 'JavaScript', value: 'js' },{ label: 'Python', value: 'py' }]}>
|
|
|
|
<TabItem value="js">
|
|
|
|
```js
|
|
const mySubscription = supabase
|
|
.from('countries:id.eq.200')
|
|
.on('UPDATE', handleRecordUpdated)
|
|
.subscribe()
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
<TabItem value="py">
|
|
|
|
```py
|
|
# Not yet implemented
|
|
```
|
|
|
|
|
|
</TabItem>
|
|
|
|
</Tabs> |