hello, I'm trying to subscribe to my database changes in realtime. however, it doesn't seem to work. I'm using a useRef hook in my Next app to subscribe to database changes, however, I'm not able to subscribe to the table for some reason. Here's my useEffect hook

javascript
useEffect(() => {
    let gameListener = supabase
      .from("games")
      .on("*", (payload) => {
        console.log("PAYLOAD", payload.new);
      })
      .subscribe();

    const subscriptions = supabase.getSubscriptions();
    console.log("SUBS", subscriptions);

    return () => {
      supabase.removeSubscription(gameListener);
    };
  }, []);

here are some potentially useful screenshots to help

Do you see a websocket with messages in the browser dev network tab (if you have access)? Is there an entry in the realtime/subscriptions table (use dashboard table ui with realtime schema)? Here was a next.js thread from a few days ago, where we went thru some issues (start 1/2 thru as went thru a few false starts) https://discord.com/channels/839993398554656828/997205421217558529

1. I've attached a screenshot of my websockets in the network tab 2. Yes. So initially, I subscribed using the code

js
let gameListener = supabase
      .from("*")
      .on("*", (payload) => {
        console.log("PAYLOAD", payload);
      })
      .subscribe();

when I change the table from "\*" to "games" OR vice versa (changing the table from "games" to "*"), it subscribes properly. 3. I read the thread, but changing strictmode in nextjs doesn't change anything

wait... are you saying if you alternate between * and games back and forth it works for a bit? Your network tab shows no network request with a websocket... You can add .subscribe((status)=>{console.log(status)}) to get info on the subscription status.

yeeahh when alternating between * and games (considering nextjs autochanges what it renders based on code changes), the subscription works for the remainder of the session. it stops when I refresh the page. the network tab didn't show anything earlier. now there's contents though. here they are. I've also attached a screenshot of my console when trying to log the status of my subscription. what should be the expected output for this?

I can't remember if that was in the thread I linked, but there is a case with the useEffect closing out the subscription and then the new subscription hitting before the old one comes back from the server closed that closes them both, if I recall correctly. There is an issue in realtime-js on that.

okay, actually turning off strict mode in react/nextjs actually fixed the issue. Apparently, ``StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).``. Because strictmode makes components render twice, the subscription fails in the second time

hello guys I am also having difficulty receiving the real time subscription:(

remove the dependency inside your array in useEffect. In this case, it's posts. Make sure that the array is empty when calling the subscription.

yea i tried, still doesn't work..

try disabling strictmode in your project

does this work even if im not using nextJs? Came from the other thread where someone said this is only applicable for nextJS

i'm not sure, but it might be worth a try 🙂

it actually worked!

a specific useEffect hook is called whenever a value inside the dependency array is modified in some way. so, by having

posts

inside your array in the useEffect hook, the hook gets called every time the

posts

variables changes. if there is nothing inside the array, the useEffect hook is only called when the component is mounted in the vdom. apparently, the subscription to the realtime db should only be done once. so, by removing the dependency inside the array, we make sure that the useEffect hook is only called once. for strict mode, ``StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).``

hmm how does rendering component twice cause the listener to not work?

that, I don't know, sorry.

I believe it is a timing issue. I'm guessing based on this https://maxrozen.com/demystifying-useeffect-cleanup-function if the cleanup code is run, it takes time for the close to get to the server and back, meanwhile the new useEffect runs setup, but sees the previous close coming back and closes. SB treats all connections to the same table/filter as one connection. This comment from a SB employee might be relevant... https://github.com/supabase/realtime/issues/254#issuecomment-1116767436

thanks all!