Update UI dependencies

hyperglass/ui/hooks/types.ts

@@ -1,5 +1,4 @@
 import type { State } from '@hookstate/core';
-import type { QueryFunctionContext } from 'react-query';
 import type * as ReactGA from 'react-ga';
 import type {
   TDevice,
@@ -10,6 +9,9 @@ import type {
   TSelectOption,
 } from '~/types';
 
+export type LGQueryKey = [string, TFormQuery];
+export type DNSQueryKey = [string, { target: string | null; family: 4 | 6 }];
+
 export interface TOpposingOptions {
   light?: string;
   dark?: string;
@@ -23,26 +25,6 @@ export type TUseGreetingReturn = {
   greetingReady(): boolean;
 };
 
-export interface TUseLGQueryFn {
-  pageParam?: QueryFunctionContext['pageParam'];
-  queryKey: [string, TFormQuery];
-}
-
-export interface TUseASNDetailFn {
-  pageParam?: QueryFunctionContext['pageParam'];
-  queryKey: string;
-}
-
-interface TUseDNSQueryParams {
-  target: string;
-  family: 4 | 6;
-}
-
-export interface TUseDNSQueryFn {
-  pageParam?: QueryFunctionContext['pageParam'];
-  queryKey: [string | null, TUseDNSQueryParams];
-}
-
 export type TUseDevice = (
   /**
    * Device's ID, e.g. the device.name field.

hyperglass/ui/hooks/useASNDetail.ts

@@ -1,11 +1,10 @@
 import { useQuery } from 'react-query';
 
-import type { QueryObserverResult } from 'react-query';
+import type { QueryFunctionContext, QueryObserverResult, QueryFunction } from 'react-query';
 import type { TASNQuery } from '~/types';
-import type { TUseASNDetailFn } from './types';
 
-async function query(ctx: TUseASNDetailFn): Promise<TASNQuery> {
-  const [asn] = ctx.queryKey;
+const query: QueryFunction<TASNQuery, string> = async (ctx: QueryFunctionContext) => {
+  const asn = ctx.queryKey;
   const res = await fetch('https://api.asrank.caida.org/v2/graphql', {
     mode: 'cors',
     method: 'POST',
@@ -14,14 +13,16 @@ async function query(ctx: TUseASNDetailFn): Promise<TASNQuery> {
     body: JSON.stringify({ query: `{ asn(asn:\"${asn}\"){ organization { orgName } } }` }),
   });
   return await res.json();
-}
+};
 
 /**
  * Query the Caida AS Rank API to get an ASN's organization name for the AS Path component.
  * @see https://api.asrank.caida.org/v2/docs
  */
 export function useASNDetail(asn: string): QueryObserverResult<TASNQuery> {
-  return useQuery(asn, query, {
+  return useQuery<TASNQuery, unknown, TASNQuery, string>({
+    queryKey: asn,
+    queryFn: query,
     refetchOnWindowFocus: false,
     refetchInterval: false,
     refetchOnMount: false,

hyperglass/ui/hooks/useDNSQuery.ts

@@ -3,14 +3,16 @@ import { useConfig } from '~/context';
 import { fetchWithTimeout } from '~/util';
 import { useGoogleAnalytics } from './useGoogleAnalytics';
 
-import type { QueryObserverResult } from 'react-query';
+import type { QueryFunction, QueryFunctionContext, QueryObserverResult } from 'react-query';
 import type { DnsOverHttps } from '~/types';
-import type { TUseDNSQueryFn } from './types';
+import type { DNSQueryKey } from './types';
 
 /**
  * Perform a DNS over HTTPS query using the application/dns-json MIME type.
  */
-async function dnsQuery(ctx: TUseDNSQueryFn): Promise<DnsOverHttps.Response | undefined> {
+const query: QueryFunction<DnsOverHttps.Response, DNSQueryKey> = async (
+  ctx: QueryFunctionContext<DNSQueryKey>,
+) => {
   const [url, { target, family }] = ctx.queryKey;
 
   const controller = new AbortController();
@@ -33,7 +35,7 @@ async function dnsQuery(ctx: TUseDNSQueryFn): Promise<DnsOverHttps.Response | un
   }
 
   return json;
-}
+};
 
 /**
  * Query the configured DNS over HTTPS provider for the provided target. If `family` is `4`, only
@@ -56,7 +58,9 @@ export function useDNSQuery(
     trackEvent({ category: 'DNS', action: 'Query', label: target, dimension1: `IPv${family}` });
   }
 
-  return useQuery([web.dns_provider.url, { target, family }], dnsQuery, {
+  return useQuery<DnsOverHttps.Response, unknown, DnsOverHttps.Response, DNSQueryKey>({
+    queryKey: [web.dns_provider.url, { target, family }],
+    queryFn: query,
     cacheTime: cache.timeout * 1000,
   });
 }

hyperglass/ui/hooks/useLGQuery.ts

@@ -4,9 +4,9 @@ import { useConfig } from '~/context';
 import { useGoogleAnalytics } from './useGoogleAnalytics';
 import { fetchWithTimeout } from '~/util';
 
-import type { QueryObserverResult } from 'react-query';
+import type { QueryFunction, QueryFunctionContext, QueryObserverResult } from 'react-query';
 import type { TFormQuery } from '~/types';
-import type { TUseLGQueryFn } from './types';
+import type { LGQueryKey } from './types';
 
 /**
  * Custom hook handle submission of a query to the hyperglass backend.
@@ -26,7 +26,9 @@ export function useLGQuery(query: TFormQuery): QueryObserverResult<TQueryRespons
     dimension4: query.queryVrf,
   });
 
-  async function runQuery(ctx: TUseLGQueryFn): Promise<TQueryResponse> {
+  const runQuery: QueryFunction<TQueryResponse, LGQueryKey> = async (
+    ctx: QueryFunctionContext<LGQueryKey>,
+  ): Promise<TQueryResponse> => {
     const [url, data] = ctx.queryKey;
     const { queryLocation, queryTarget, queryType, queryVrf } = data;
     const res = await fetchWithTimeout(
@@ -50,7 +52,7 @@ export function useLGQuery(query: TFormQuery): QueryObserverResult<TQueryRespons
     } catch (err) {
       throw new Error(res.statusText);
     }
-  }
+  };
 
   // Cancel any still-running queries on unmount.
   useEffect(
@@ -60,18 +62,16 @@ export function useLGQuery(query: TFormQuery): QueryObserverResult<TQueryRespons
     [],
   );
 
-  return useQuery<TQueryResponse, Response | TQueryResponse | Error>(
-    ['/api/query/', query],
-    runQuery,
-    {
-      // Invalidate react-query's cache just shy of the configured cache timeout.
-      cacheTime: cache.timeout * 1000 * 0.95,
-      // Don't refetch when window refocuses.
-      refetchOnWindowFocus: false,
-      // Don't automatically refetch query data (queries should be on-off).
-      refetchInterval: false,
-      // Don't refetch on component remount.
-      refetchOnMount: false,
-    },
-  );
+  return useQuery<TQueryResponse, Response | TQueryResponse | Error, TQueryResponse, LGQueryKey>({
+    queryKey: ['/api/query/', query],
+    queryFn: runQuery,
+    // Invalidate react-query's cache just shy of the configured cache timeout.
+    cacheTime: cache.timeout * 1000 * 0.95,
+    // Don't refetch when window refocuses.
+    refetchOnWindowFocus: false,
+    // Don't automatically refetch query data (queries should be on-off).
+    refetchInterval: false,
+    // Don't refetch on component remount.
+    refetchOnMount: false,
+  });
 }