How realtime works?

[zhouhao27]

I'm wondering how realtime works. For example, I have a data collection call news. How to monitor it and get notified if there is a new update.

[benwinding]

There was some issues getting the RealTimeSaga working, I don't have time to look in to it now, but you can have a look and see if you can get it working if you want 👍

[zhouhao27]

@benwinding Thanks for your reply. I just know the ra-realtime is removed in 3.0. Maybe there is something one in Firebase side.

[LaszloDev]

@zhouhao27 as you mentioned React Admin v3 removed the ra-realtime. As soon as this library is compatible, we can check if there are other possibilities to implement that. Can this issue be closed in the mean time?

[benwinding]

ra-realtime is only available in the premium version of react-admin, closing, will open again if needed
https://marmelab.com/ra-enterprise/modules/ra-realtime

[kiptoomm]

hi @benwinding, is there no way to use the ra-realtime module with this library at all? we really need this feature but are currently using the latest versions (v3.x of both ra and raf)

[benwinding]

@kiptoomm are you an react-admin enterprise customer then?

Apparently they redesigned the entire ra-realtime module, and I'm not sure it's even open-source anymore, this is why it hasn't realtime support hasn't been implemented in this library.

[kiptoomm]

@kiptoomm are you an react-admin enterprise customer then?

Apparently they redesigned the entire ra-realtime module, and I'm not sure it's even open-source anymore, this is why it hasn't realtime support hasn't been implemented in this library.

@benwinding no we're not on the premium version (looks good but not yet attainable for our fledgling business 😅). I have followed the thread in marmelab/react-admin#5547 and now see why you're not sure if ra-realtime is no longer an open source module.

Well, do you have any suggestions on how we can still use RAF and achieve some kind of real-time effects? To be more precise, here is our need:

1. a user creates or updates a record from the RA-frontend and they immediately get the "Record was created successfully" snackbar notification
2. our Firestore backend (function triggers) run to respond to the new/updated records by making API calls to external systems. One such use case is making a payments request to Stripe
3. the external API call sends a response and we set our payments record to 'success' or 'failure'. However, because the frontend isn't aware of this change, the record still reads the initial/default value

What we want is for the change in the backend to propagate automatically to the frontend. I saw that Firebase supports listening for realtime updates, but they seem to require us to attach the onSnapshot() listeners to queries. Since we use the RAF data provider, we don't use the explicit queries indicated on the Firebase realtime docs. Do you have any suggestions on how we can implement our use case with RAF?

[benwinding]

Hi @kiptoomm,
Thanks for the detailed response. One way you can implement that type of realtime update is by refreshing the view, when something in the database changes, here's an example of the workflow:

1. Subscribe to a specific collection change in firestore
2. When the collection changes, refresh the view

Try something like this (this hasn't been tested):

// On a <List /> view 
import { useRefresh } from "react-admin";
import firebase from 'firebase/app';

import * as firebase from "firebase/app";

const refresh = useRefresh();
// Watch collection
firebase.firestore().collection('my-collection').onSnapshot(a => {
  console.log('my-collection changed!');
  // This refreshes the list view
  refresh();
})

Let me know how it goes,
Ben

[kiptoomm]

Hi @kiptoomm,
Thanks for the detailed response. One way you can implement that type of realtime update is by refreshing the view, when something in the database changes, here's an example of the workflow:

1. Subscribe to a specific collection change in firestore
2. When the collection changes, refresh the view

Try something like this (this hasn't been tested):

// On a <List /> view 
import { useRefresh } from "react-admin";
import firebase from 'firebase/app';

import * as firebase from "firebase/app";

const refresh = useRefresh();
// Watch collection
firebase.firestore().collection('my-collection').onSnapshot(a => {
  console.log('my-collection changed!');
  // This refreshes the list view
  refresh();
})

Let me know how it goes,
Ben

Hi @benwinding, pardon my delay - I have just gotten back to this task and applied your solution. It worked like a charm 😁 🙇‍♂️