INSERT change not always triggered

[Navil]

Hello, I have a flow where I subscribe to the INSERT and UPDATE event of a table (player) on app start. Later, when the user joins a game (and the Backend creates a player row), the INSERT event is not always triggered. I do not know the reason why it does sometimes not trigger - maybe I am too fast.

The logs clearly show, that the subscription happens first, then the user adds himself to the matchmaking table (I prevent the user from doing so when subscribed === false, so it can't even happen earlier). After he is added to matchmaking, my server creates Player objects (and updates them later for game relevant data). Here are the logs:

This is my subscription logic:

const subscription = supabase
			.channel(`player-${userId}`)
			.on(
				"postgres_changes",
				{
					event: "UPDATE",
					schema: "public",
					table: "players",
					filter: `user_id=eq.${userId}`,
				},
				(payload: RealtimePostgresUpdatePayload<Player>) => {
					const newPlayer = payload.new;
					setPlayer(newPlayer);
					console.log("Player updated:", newPlayer);
				},
			)
			.on(
				"postgres_changes",
				{
					event: "INSERT",
					schema: "public",
					table: "players",
					filter: `user_id=eq.${userId}`,
				},
				(payload: RealtimePostgresInsertPayload<Player>) => {
					setInQueue(false);
					const newPlayer = payload.new;
					console.log(`User ${userId} added to a game: ${newPlayer.game_id}`);

					// Update the player state
					setPlayer(newPlayer);

					// Navigate to the game screen
					router.push(`/game/${newPlayer.game_id}`);
				},
			)
			.subscribe((status) => {
				if (status === "SUBSCRIBED") {
					setIsSubscribed(true);
					console.log("Subscription established for user:", userId);
				} else {
					setIsSubscribed(false);
					console.log("Subscription status changed to:", status);
				}
			});

Does anybody know, why the insert event is not always triggered? I am using Pupetteer to test my application, so I am assuming that I am not yet really subscribed, even tho the supabase library tells me that I am. As mentioned, this does not always happen, but the logs above are from a case where it happened.

[GaryAustin1]

Probably because there is a several second delay before events get monitored. See this for the event indicating the real connection supabase/realtime#282 (comment)

[Navil]

Thank you very much. This seemed to have solved my issue, even tho it looks a little bit like a workaround. Would be good to have a proper event for that.

[GaryAustin1]

You can provide feedback to them there. It is not well documented.

[Navil]

Actually, I had another failing run again. I hope I understood correctly, that

if (previouslyDisconnected) {

is the place, where I am supposed to have a working connection?

let initialMessageSkipped = false;
		let previouslyDisconnected = true;

		// Subscribe to changes in the "players" table for the current user
		const subscription = supabase
			.channel(`player-${userId}`)
			.on("system" as any, {}, (payload: any) => {
				console.log(payload);
				if (
					payload.extension !== "postgres_changes" ||
					payload.status !== "ok"
				) {
					return;
				}

				if (!initialMessageSkipped) {
					initialMessageSkipped = true;
					return;
				}

				if (previouslyDisconnected) {
					// Invalidate all data because we could not track changes while we weren't connected
					previouslyDisconnected = false;
					console.log("Is Subscribed");
					setIsSubscribed(true);
				}
			})
			.on(
				"postgres_changes",
				{
					event: "UPDATE",
					schema: "public",
					table: "players",
					filter: `user_id=eq.${userId}`,
				},
				(payload: RealtimePostgresUpdatePayload<Player>) => {
					const newPlayer = payload.new;
					setPlayer(newPlayer);
					console.log("Player updated:", newPlayer);
				},
			)
			.on(
				"postgres_changes",
				{
					event: "INSERT",
					schema: "public",
					table: "players",
					filter: `user_id=eq.${userId}`,
				},
				(payload: RealtimePostgresInsertPayload<Player>) => {
					setInQueue(false);
					const newPlayer = payload.new;
					console.log(`User ${userId} added to a game: ${newPlayer.game_id}`);

					// Update the player state
					setPlayer(newPlayer);

					// Navigate to the game screen
					router.push(`/game/${newPlayer.game_id}`);
				},
			)
			.subscribe((status) => {
				if (status === "SUBSCRIBED") {
					previouslyDisconnected = true;
				}
			});

[GaryAustin1]

I have not looked at it in a while. App.js here https://github.com/GaryAustin1/Realtime2 shows some debug code I used to track when to reload data and start receiving changes. There is also a link to another users repository. You do have to handle connection errors if you need all changed data to a table from a starting point.