Adding cancelation when query unmounts

Author: selfcontained

components/dashboard/src/data/git-providers/provider-repositories-query.ts

@@ -7,6 +7,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { getGitpodService } from "../../service/service";
 import { useCurrentUser } from "../../user-context";
+import { CancellationTokenSource } from "vscode-jsonrpc";
 
 type UseProviderRepositoriesQueryArgs = {
     provider: string;
@@ -17,11 +18,22 @@ export const useProviderRepositoriesForUser = ({ provider, installationId }: Use
 
     return useQuery(
         ["provider-repositories", { userId: user?.id }, { provider, installationId }],
-        async () => {
-            return await getGitpodService().server.getProviderRepositoriesForUser({
-                provider,
-                hints: { installationId },
+        async ({ signal }) => {
+            // jsonrpc cancellation token that we subscribe to the abort signal provided by react-query
+            const cancelToken = new CancellationTokenSource();
+
+            signal?.addEventListener("abort", () => {
+                cancelToken.cancel();
             });
+
+            return await getGitpodService().server.getProviderRepositoriesForUser(
+                {
+                    provider,
+                    hints: { installationId },
+                },
+                // @ts-ignore - not sure why types don't support this
+                cancelToken.token,
+            );
         },
         {
             enabled: !!provider,