fix: add subscription manager to prevent GraphQL subscription leaks

composables/useSubscriptionManager.ts

@@ -0,0 +1,28 @@
+const subscriptions = new Map<string, { unsubscribe: () => void }>();
+
+export function useSubscriptionManager() {
+  function subscribe(key: string, sub: { unsubscribe: () => void }) {
+    const existing = subscriptions.get(key);
+    if (existing) {
+      existing.unsubscribe();
+    }
+    subscriptions.set(key, sub);
+  }
+
+  function unsubscribe(key: string) {
+    const existing = subscriptions.get(key);
+    if (existing) {
+      existing.unsubscribe();
+      subscriptions.delete(key);
+    }
+  }
+
+  function unsubscribeAll() {
+    for (const [, sub] of subscriptions) {
+      sub.unsubscribe();
+    }
+    subscriptions.clear();
+  }
+
+  return { subscribe, unsubscribe, unsubscribeAll };
+}

stores/ApplicationSettings.ts

@@ -6,6 +6,7 @@ import { generateSubscription } from "~/graphql/graphqlGen";
 import { useMatchmakingStore } from "./MatchmakingStore";
 import { useAuthStore } from "./AuthStore";
 import { order_by } from "@/generated/zeus";
+import { useSubscriptionManager } from "~/composables/useSubscriptionManager";
 
 interface Region {
   value: string;
@@ -36,6 +37,7 @@ export const useApplicationSettingsStore = defineStore(
       ref<Array<{ name: string; value: string }>>(loadCachedSettings());
 
     const subscribeToSettings = async () => {
+      const { subscribe } = useSubscriptionManager();
       const subscription = getGraphqlClient().subscribe({
         query: generateSubscription({
           settings: [
@@ -48,24 +50,28 @@ export const useApplicationSettingsStore = defineStore(
         }),
       });
 
-      subscription.subscribe({
-        next: ({ data }) => {
-          settings.value = data.settings;
-          try {
-            localStorage.setItem(
-              SETTINGS_CACHE_KEY,
-              JSON.stringify(data.settings),
-            );
-          } catch {}
-        },
-      });
+      subscribe(
+        "settings:settings",
+        subscription.subscribe({
+          next: ({ data }) => {
+            settings.value = data.settings;
+            try {
+              localStorage.setItem(
+                SETTINGS_CACHE_KEY,
+                JSON.stringify(data.settings),
+              );
+            } catch {}
+          },
+        }),
+      );
     };
 
     subscribeToSettings();
 
     const currentPluginVersion = ref<string | null>(null);
 
     const subscribeToPluginVersion = async () => {
+      const { subscribe } = useSubscriptionManager();
       const authStore = useAuthStore();
       if (
         !authStore.me ||
@@ -92,11 +98,14 @@ export const useApplicationSettingsStore = defineStore(
         }),
       });
 
-      subscription.subscribe({
-        next: ({ data }) => {
-          currentPluginVersion.value = data.plugin_versions.at(0).version;
-        },
-      });
+      subscribe(
+        "settings:plugin_version",
+        subscription.subscribe({
+          next: ({ data }) => {
+            currentPluginVersion.value = data.plugin_versions.at(0).version;
+          },
+        }),
+      );
     };
 
     // Watch for user authentication before subscribing
@@ -208,7 +217,10 @@ export const useApplicationSettingsStore = defineStore(
 
     const availableRegions = ref<Region[]>([]);
 
+    let latencyCheckInterval: ReturnType<typeof setInterval> | null = null;
+
     const subscribeToAvailableRegions = async () => {
+      const { subscribe } = useSubscriptionManager();
       const subscription = getGraphqlClient().subscribe({
         query: generateSubscription({
           server_regions: [
@@ -230,19 +242,24 @@ export const useApplicationSettingsStore = defineStore(
         }),
       });
 
-      subscription.subscribe({
-        next: ({ data }) => {
-          availableRegions.value = data.server_regions;
-          useMatchmakingStore().checkLatenies();
-
-          setInterval(
-            () => {
-              useMatchmakingStore().checkLatenies();
-            },
-            50 * 60 * 1000,
-          );
-        },
-      });
+      subscribe(
+        "settings:available_regions",
+        subscription.subscribe({
+          next: ({ data }) => {
+            availableRegions.value = data.server_regions;
+            useMatchmakingStore().checkLatenies();
+
+            if (!latencyCheckInterval) {
+              latencyCheckInterval = setInterval(
+                () => {
+                  useMatchmakingStore().checkLatenies();
+                },
+                50 * 60 * 1000,
+              );
+            }
+          },
+        }),
+      );
     };
 
     subscribeToAvailableRegions();

stores/MatchLobbyStore.ts

@@ -1,5 +1,6 @@
 import { ref, computed } from "vue";
 import { defineStore, acceptHMRUpdate } from "pinia";
+import { useSubscriptionManager } from "~/composables/useSubscriptionManager";
 import { simpleMatchFields } from "~/graphql/simpleMatchFields";
 import {
   $,
@@ -51,14 +52,18 @@ export const useMatchLobbyStore = defineStore("matchLobby", () => {
       }),
     });
 
-    subscription.subscribe({
-      next: ({ data }) => {
-        liveMatchesCount.value = data?.matches_aggregate?.aggregate?.count || 0;
-      },
-      error: (error) => {
-        console.error("Error in live matches subscription:", error);
-      },
-    });
+    const { subscribe } = useSubscriptionManager();
+    subscribe(
+      "matchLobby:liveMatches",
+      subscription.subscribe({
+        next: ({ data }) => {
+          liveMatchesCount.value = data?.matches_aggregate?.aggregate?.count || 0;
+        },
+        error: (error) => {
+          console.error("Error in live matches subscription:", error);
+        },
+      }),
+    );
   };
 
   const subscribeToLiveTournaments = async () => {
@@ -81,15 +86,19 @@ export const useMatchLobbyStore = defineStore("matchLobby", () => {
       }),
     });
 
-    subscription.subscribe({
-      next: ({ data }) => {
-        liveTournamentsCount.value =
-          data?.tournaments_aggregate?.aggregate?.count || 0;
-      },
-      error: (error) => {
-        console.error("Error in live tournaments subscription:", error);
-      },
-    });
+    const { subscribe } = useSubscriptionManager();
+    subscribe(
+      "matchLobby:liveTournaments",
+      subscription.subscribe({
+        next: ({ data }) => {
+          liveTournamentsCount.value =
+            data?.tournaments_aggregate?.aggregate?.count || 0;
+        },
+        error: (error) => {
+          console.error("Error in live tournaments subscription:", error);
+        },
+      }),
+    );
   };
 
   const subscribeToOpenRegistrationTournaments = async () => {
@@ -112,18 +121,22 @@ export const useMatchLobbyStore = defineStore("matchLobby", () => {
       }),
     });
 
-    subscription.subscribe({
-      next: ({ data }) => {
-        openRegistrationTournamentsCount.value =
-          data?.tournaments_aggregate?.aggregate?.count || 0;
-      },
-      error: (error) => {
-        console.error(
-          "Error in open registration tournaments subscription:",
-          error,
-        );
-      },
-    });
+    const { subscribe } = useSubscriptionManager();
+    subscribe(
+      "matchLobby:openRegistrationTournaments",
+      subscription.subscribe({
+        next: ({ data }) => {
+          openRegistrationTournamentsCount.value =
+            data?.tournaments_aggregate?.aggregate?.count || 0;
+        },
+        error: (error) => {
+          console.error(
+            "Error in open registration tournaments subscription:",
+            error,
+          );
+        },
+      }),
+    );
   };
 
   const subscribeToOpenMatches = async () => {
@@ -151,14 +164,18 @@ export const useMatchLobbyStore = defineStore("matchLobby", () => {
       }),
     });
 
-    subscription.subscribe({
-      next: ({ data }) => {
-        openMatchesCount.value = data?.matches_aggregate?.aggregate?.count || 0;
-      },
-      error: (error) => {
-        console.error("Error in open matches subscription:", error);
-      },
-    });
+    const { subscribe } = useSubscriptionManager();
+    subscribe(
+      "matchLobby:openMatches",
+      subscription.subscribe({
+        next: ({ data }) => {
+          openMatchesCount.value = data?.matches_aggregate?.aggregate?.count || 0;
+        },
+        error: (error) => {
+          console.error("Error in open matches subscription:", error);
+        },
+      }),
+    );
   };
 
   const subscribeToChatTournaments = async () => {
@@ -198,14 +215,18 @@ export const useMatchLobbyStore = defineStore("matchLobby", () => {
       }),
     });
 
-    subscription.subscribe({
-      next: ({ data }) => {
-        chatTournaments.value = data?.tournaments || [];
-      },
-      error: (error) => {
-        console.error("Error in chat tournaments subscription:", error);
-      },
-    });
+    const { subscribe } = useSubscriptionManager();
+    subscribe(
+      "matchLobby:chatTournaments",
+      subscription.subscribe({
+        next: ({ data }) => {
+          chatTournaments.value = data?.tournaments || [];
+        },
+        error: (error) => {
+          console.error("Error in chat tournaments subscription:", error);
+        },
+      }),
+    );
   };
 
   const subscribeToManagingMatches = async () => {
@@ -240,18 +261,22 @@ export const useMatchLobbyStore = defineStore("matchLobby", () => {
       }),
     });
 
-    subscription.subscribe({
-      next: ({ data }) => {
-        if (data?.matches_aggregate?.aggregate?.count !== undefined) {
-          managingMatchesCount.value = data.matches_aggregate.aggregate.count;
-        } else {
-          managingMatchesCount.value = 0;
-        }
-      },
-      error: (error) => {
-        console.error("Error in managing matches subscription:", error);
-      },
-    });
+    const { subscribe } = useSubscriptionManager();
+    subscribe(
+      "matchLobby:managingMatches",
+      subscription.subscribe({
+        next: ({ data }) => {
+          if (data?.matches_aggregate?.aggregate?.count !== undefined) {
+            managingMatchesCount.value = data.matches_aggregate.aggregate.count;
+          } else {
+            managingMatchesCount.value = 0;
+          }
+        },
+        error: (error) => {
+          console.error("Error in managing matches subscription:", error);
+        },
+      }),
+    );
   };
 
   const subscribeToManagingTournaments = async () => {
@@ -284,19 +309,23 @@ export const useMatchLobbyStore = defineStore("matchLobby", () => {
       }),
     });
 
-    subscription.subscribe({
-      next: ({ data }) => {
-        if (data?.tournaments_aggregate?.aggregate?.count !== undefined) {
-          managingTournamentsCount.value =
-            data.tournaments_aggregate.aggregate.count;
-        } else {
-          managingTournamentsCount.value = 0;
-        }
-      },
-      error: (error) => {
-        console.error("Error in managing tournaments subscription:", error);
-      },
-    });
+    const { subscribe } = useSubscriptionManager();
+    subscribe(
+      "matchLobby:managingTournaments",
+      subscription.subscribe({
+        next: ({ data }) => {
+          if (data?.tournaments_aggregate?.aggregate?.count !== undefined) {
+            managingTournamentsCount.value =
+              data.tournaments_aggregate.aggregate.count;
+          } else {
+            managingTournamentsCount.value = 0;
+          }
+        },
+        error: (error) => {
+          console.error("Error in managing tournaments subscription:", error);
+        },
+      }),
+    );
   };
 
   const subscribeToMyMatches = async () => {
@@ -373,11 +402,15 @@ export const useMatchLobbyStore = defineStore("matchLobby", () => {
       },
     });
 
-    subscription.subscribe({
-      next: ({ data }) => {
-        myMatches.value = data?.matches;
-      },
-    });
+    const { subscribe } = useSubscriptionManager();
+    subscribe(
+      "matchLobby:myMatches",
+      subscription.subscribe({
+        next: ({ data }) => {
+          myMatches.value = data?.matches;
+        },
+      }),
+    );
   };
 
   const add = (