Supabase realtime postgres changes, no payload. Doubting chat gpt fix.
This is the first time I am implementing postgres changes in my app. I checked the documentation and some videos and all they said I had to do was add this code after handling the RLS:
const channelA = supabase
.channel('schema-db-changes')
.on(
'postgres_changes',
{
event: '',
schema: 'public',
},
(payload) => console.log(payload)
)
.subscribe()
But I tried that and nothing was showing up. So as the advanced software engineer I am, I asked chat gpt for answers and he said that it was probably because the auth token was not already set. Since I only allow for authenticated to check the updates on the table I added the realtime, chat said that I needed to subscribe after I had the token.
I don't see anything in the documentation for this solution, of course it makes a lot of sense but since I haven't found anything similar to this I don't know if it's correct. Here is the solution chat said I'd do:
useEffect(() => {
const supabase = createClient();
let channel: ReturnType<typeof supabase.channel> | null = null;
(async () => {
// 1) Wait for a real session (JWT)
const { data, error } = await supabase.auth.getSession();
const session = data?.session;
if (error || !session?.access_token) return;
// 2) Bind the JWT to Realtime (prevents “SUBSCRIBED but silent”)
supabase.realtime.setAuth(session.access_token);
// 3) Subscribe
channel = supabase
.channel("reservation-changes")
.on(
"postgres_changes",
{ event: "", schema: "eatsy", table: "reservations" },
(payload) => console.log("change:", payload)
)
.subscribe((status) => console.log("subscription:", status));
})();
return () => {
if (channel) supabase.removeChannel(channel);
};
}, []);
supabase.realtime.setAuth(session.access_token); This is for example something the supabase documentation never mentions.
const channelA = supabase
.channel('schema-db-changes')
.on(
'postgres_changes',
{
event: '',
schema: 'public',
},
(payload) => console.log(payload)
)
.subscribe()
But I tried that and nothing was showing up. So as the advanced software engineer I am, I asked chat gpt for answers and he said that it was probably because the auth token was not already set. Since I only allow for authenticated to check the updates on the table I added the realtime, chat said that I needed to subscribe after I had the token.
I don't see anything in the documentation for this solution, of course it makes a lot of sense but since I haven't found anything similar to this I don't know if it's correct. Here is the solution chat said I'd do:
useEffect(() => {
const supabase = createClient();
let channel: ReturnType<typeof supabase.channel> | null = null;
(async () => {
// 1) Wait for a real session (JWT)
const { data, error } = await supabase.auth.getSession();
const session = data?.session;
if (error || !session?.access_token) return;
// 2) Bind the JWT to Realtime (prevents “SUBSCRIBED but silent”)
supabase.realtime.setAuth(session.access_token);
// 3) Subscribe
channel = supabase
.channel("reservation-changes")
.on(
"postgres_changes",
{ event: "", schema: "eatsy", table: "reservations" },
(payload) => console.log("change:", payload)
)
.subscribe((status) => console.log("subscription:", status));
})();
return () => {
if (channel) supabase.removeChannel(channel);
};
}, []);
supabase.realtime.setAuth(session.access_token); This is for example something the supabase documentation never mentions.
