Query and listen for data insert & delete in React with foreign keys

[cdedreuille]

I'm having some trouble updating a list using Supabase realtime on a Nextjs app. Here is what I'm trying to do:

• Get all list of occasions and save it into a state
• When a new row is added, refresh the list
• When a row is deleted, remove it.

I'm facing a couple of problems:

• The listener doesn't have the updated data from the occasion state so I'm not sure how to add or remove from the list.
• The query is dependant on profiles so if profiles updates, it should refresh the list of occasions
• As I use foreign keys in my query .select('*, profile(*)'). I'm not sure how to update the list on INSERT.

I couldn't find an example of fetching data and then listen for INSERT or DELETE. Any idea what I'm. doing wrong here?

All I want to do is query some data from a table and if something happens, refresh the data. This is quite simple to do with Firebase .onSnapshot() method but. I'm having a hard time here.

const InProgress = ({ profiles }) => {
  const [occasions, setOccasions] = useState(null);
  
  const getOccasions = useCallback(async () => {
      if (!_.isEmpty(profiles)) {
        const { data, error } = await supabase.from('occasions').select('*, profile(*)').or(profiles);
        let newData = data;
        if (!_.isEmpty(data)) {
          newData = data.map((occasion) => transformOccasion(occasion));
        }
        if (!error) setOccasions(newData);
      }
    }, [profiles]);
  
  useEffect(() => getOccasions(), [getOccasions, profiles]);
  
  useEffect(() => {
      const mySubscription = supabase
        .from('occasions')
        .on('INSERT', (payload) => console.log(payload))
        .on('DELETE', (payload) => {
          const newData = [...occasions];
          _.remove(newData, (o) => o.id === payload.old.id);
          setOccasions(newData);
        })
        .subscribe();
  
      return () => mySubscription.unsubscribe();
    }, []);

  return ()
}

[dbredvick]

If you're looking for more data, I think there is some additional configuration you can set for your realtime data:

• https://supabase.io/docs/guides/api#managing-realtime
• https://supabase.io/docs/guides/database#realtime

This section specifically in the second link:

alter table_name your_table 
replica identity full;

If you use the default example and query on * instead, what do you get in your console.log statement?

[cdedreuille]

This seems quite adventurous. I'm not sure I should get into altering anything. Realtime on Supabase is harder than it seems. I wish they'll make it easier at some point.

[silentworks]

@cdedreuille you can turn this on from the UI as the first article states. By default realtime is turned off as not everyone will need it in the application they are creating, also its probably not necessary for most of the tables in your database. The current approach is an opt-in rather than an opt-out.

[cdedreuille]

@silentworks Yes, that's not a problem. The part I'm struggling with is on the app to actually use realtime updates. I'm looking to listen for updates on a query that has foreign keys. Is there for the listener to give you the same .select('*, profile(*)') result?