From 9f6d16c28c9dd920634effa4b20cd0a4f8e0984e Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Tue, 5 Jan 2021 22:49:09 -0700
Subject: [PATCH] cancel running queries on component unmount

---
 hyperglass/ui/hooks/useLGQuery.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/hyperglass/ui/hooks/useLGQuery.ts b/hyperglass/ui/hooks/useLGQuery.ts
index 40aae06..dfd73a1 100644
--- a/hyperglass/ui/hooks/useLGQuery.ts
+++ b/hyperglass/ui/hooks/useLGQuery.ts
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useQuery } from 'react-query';
 import { useConfig } from '~/context';
 import { fetchWithTimeout } from '~/util';
@@ -34,6 +35,15 @@ export function useLGQuery(query: TFormQuery): QueryObserverResult<TQueryRespons
     );
     return await res.json();
   }
+
+  // Cancel any still-running queries on unmount.
+  useEffect(
+    () => () => {
+      controller.abort();
+    },
+    [],
+  );
+
   return useQuery<TQueryResponse, Response | TQueryResponse | Error>(
     ['/api/query/', query],
     runQuery,