Declarative real-time updates

[Nick-Mazuk]

If I understand the docs correctly, the current realtime SDK simply returns the changed documents to the database. I think it would be far more useful to have an SDK "rerun" the query every time there's an update.

For a simple example, let's say you have a dashboard page with a bunch of posts. So you write this simplified React query…

const { data, error } - await supabase.from('posts').select('*')

return <>
  {data.forEach((post) => <PostPreview data={post} />))}
</>

…but you want to keep the dashboard page updated in real time. So if someone (maybe even you in another tab) creates, updates, or deletes a post, the page should update to reflect the changes. However, you don't care if the change is a create, update, or delete event. You just care that the data is updated.

With the current setup, this is complicated. Now, you'd have to figure out what exactly is changed, then update the data to reflect that. Basically, you're doing imperative work which kindof defeats the purpose of using a declarative framework.

Firebase solves this really well. It merges that change with your query automatically for you. When you subscribe to a query in Firebase, it will always return an array with all the results regardless of what's changed. Then, you can pretty much use the same code for a realtime query as a one-time fetch—dramatically simplifying the developer experience.

https://youtu.be/3aoxOtMM2rc?t=146

I think this would be a killer feature. Thoughts?

[tmm]

Hey @Nick-Mazuk! What you are describing is supported by react-supabase's useRealtime hook.

import { useRealtime } from 'react-supabase'

function Page() {
  const [{ data, error, fetching }, reexecute] = useRealtime('posts')

  return data.forEach((post) => <PostPreview key={post.id} data={post} />))
}

There are some other hooks that might be helpful too, like useSelect, useAuthStateChange, etc. (Disclaimer: I wrote react-supabase.)