update query hooks to support react-query 3 [skip ci]

hyperglass/ui/components/path/chart.tsx

@@ -20,7 +20,7 @@ export const Chart = (props: TChart) => {
   const flowProps = useBreakpointValue<Omit<ReactFlowProps, 'elements'>>({
     base: { defaultPosition: [0, 300], defaultZoom: 0 },
     lg: { defaultPosition: [100, 300], defaultZoom: 0.7 },
-  });
+  }) ?? { defaultPosition: [100, 300], defaultZoom: 0.7 };
 
   const elements = useMemo(() => [...buildElements({ asn: primary_asn, name: org_name }, data)], [
     data,
@@ -45,7 +45,7 @@ const ASNode = (props: TNode<TNodeData>) => {
   const color = useColorValue('black', 'white');
   const bg = useColorValue('white', 'whiteAlpha.100');
 
-  const { data: asnData, isError, isLoading } = useASNDetail(asn);
+  const { data: asnData, isError, isLoading } = useASNDetail(String(asn));
 
   return (
     <>

hyperglass/ui/components/results/individual.tsx

@@ -4,6 +4,7 @@ import {
   Flex,
   Alert,
   Tooltip,
+  Icon,
   HStack,
   AccordionItem,
   AccordionPanel,
@@ -60,13 +61,19 @@ export const Result = forwardRef<HTMLDivElement, TResult>((props, ref) => {
 
   const { responses } = useLGState();
 
-  const { data, error, isError, isLoading, refetch } = useLGQuery({
+  const { data, error, isError, isLoading, refetch, isFetching, isFetchedAfterMount } = useLGQuery({
     queryLocation,
     queryTarget,
     queryType,
     queryVrf,
   });
 
+  const isCached = useMemo(() => data?.cached || !isFetchedAfterMount, [
+    data,
+    isLoading,
+    isFetching,
+  ]);
+
   if (typeof data !== 'undefined') {
     responses.merge({ [device.name]: data });
   }
@@ -234,29 +241,26 @@ export const Result = forwardRef<HTMLDivElement, TResult>((props, ref) => {
         </Box>
 
         <Flex direction="row" flexWrap="wrap">
-          <Flex
+          <HStack
             px={3}
             mt={2}
-            justifyContent={['flex-start', 'flex-start', 'flex-end', 'flex-end']}
-            flex="1 0 auto">
-            <If c={cache.show_text && typeof data !== 'undefined' && !error}>
+            spacing={1}
+            flex="1 0 auto"
+            justifyContent={{ base: 'flex-start', lg: 'flex-end' }}>
+            <If c={cache.show_text && !isError && isCached}>
               <If c={!isMobile}>
                 <Countdown timeout={cache.timeout} text={web.text.cache_prefix} />
               </If>
-              <Tooltip
-                display={!data?.cached ? 'none' : undefined}
-                hasArrow
-                label={cacheLabel}
-                placement="top">
-                <Box ml={1} display={data?.cached ? 'block' : 'none'}>
-                  <BsLightningFill color={color} />
+              <Tooltip hasArrow label={cacheLabel} placement="top">
+                <Box>
+                  <Icon as={BsLightningFill} color={color} />
                 </Box>
               </Tooltip>
               <If c={isMobile}>
                 <Countdown timeout={cache.timeout} text={web.text.cache_prefix} />
               </If>
             </If>
-          </Flex>
+          </HStack>
         </Flex>
       </AccordionPanel>
     </AnimatedAccordionItem>

hyperglass/ui/context/HyperglassProvider.tsx

@@ -6,6 +6,7 @@ import {
   useBreakpointValue,
   useTheme as useChakraTheme,
 } from '@chakra-ui/react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { makeTheme, defaultTheme } from '~/util';
 
 import type { IConfig, ITheme } from '~/types';
@@ -13,6 +14,8 @@ import type { THyperglassProvider } from './types';
 
 const HyperglassContext = createContext<IConfig>(Object());
 
+const queryClient = new QueryClient();
+
 export const HyperglassProvider = (props: THyperglassProvider) => {
   const { config, children } = props;
   const value = useMemo(() => config, []);
@@ -20,7 +23,9 @@ export const HyperglassProvider = (props: THyperglassProvider) => {
   const theme = value ? userTheme : defaultTheme;
   return (
     <ChakraProvider theme={theme}>
-      <HyperglassContext.Provider value={value}>{children}</HyperglassContext.Provider>
+      <HyperglassContext.Provider value={value}>
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      </HyperglassContext.Provider>
     </ChakraProvider>
   );
 };

hyperglass/ui/hooks/index.ts

@@ -7,5 +7,4 @@ export * from './useLGState';
 export * from './useOpposingColor';
 export * from './useStrf';
 export * from './useTableToString';
-export * from './useScaledText';
 export * from './useScaledTitle';

hyperglass/ui/hooks/types.ts

@@ -1,6 +1,19 @@
+import type { QueryFunctionContext } from 'react-query';
+import type { TFormQuery } from '~/types';
+
 export interface TOpposingOptions {
   light?: string;
   dark?: string;
 }
 
 export type TUseGreetingReturn = [boolean, (v?: boolean) => void];
+
+export interface TUseLGQueryFn {
+  pageParam?: QueryFunctionContext['pageParam'];
+  queryKey: [string, TFormQuery];
+}
+
+export interface TUseASNDetailFn {
+  pageParam?: QueryFunctionContext['pageParam'];
+  queryKey: string;
+}

hyperglass/ui/hooks/useASNDetail.ts

@@ -1,11 +1,19 @@
 import { useQuery } from 'react-query';
-import type { TASNDetails } from '~/types';
 
-async function query(asn: string): Promise<TASNDetails> {
+import type { TASNDetails } from '~/types';
+import type { TUseASNDetailFn } from './types';
+
+async function query(ctx: TUseASNDetailFn): Promise<TASNDetails> {
+  const [asn] = ctx.queryKey;
   const res = await fetch(`https://api.bgpview.io/asn/${asn}`, { mode: 'cors' });
   return await res.json();
 }
 
 export function useASNDetail(asn: string) {
-  return useQuery(asn, query);
+  return useQuery(asn, query, {
+    refetchOnWindowFocus: false,
+    refetchInterval: false,
+    refetchOnMount: false,
+    cacheTime: Infinity,
+  });
 }

hyperglass/ui/hooks/useLGQuery.ts

@@ -2,6 +2,7 @@ import { useQuery } from 'react-query';
 import { useConfig } from '~/context';
 
 import type { TFormQuery } from '~/types';
+import type { TUseLGQueryFn } from './types';
 
 /**
  * Fetch Wrapper that incorporates a timeout via a passed AbortController instance.
@@ -31,11 +32,12 @@ export async function fetchWithTimeout(
 }
 
 export function useLGQuery(query: TFormQuery) {
-  const { request_timeout } = useConfig();
+  const { request_timeout, cache } = useConfig();
   const controller = new AbortController();
 
-  async function runQuery(url: string, requestData: TFormQuery): Promise<TQueryResponse> {
-    const { queryLocation, queryTarget, queryType, queryVrf } = requestData;
+  async function runQuery(ctx: TUseLGQueryFn): Promise<TQueryResponse> {
+    const [url, data] = ctx.queryKey;
+    const { queryLocation, queryTarget, queryType, queryVrf } = data;
     const res = await fetchWithTimeout(
       url,
       {
@@ -57,6 +59,11 @@ export function useLGQuery(query: TFormQuery) {
   return useQuery<TQueryResponse, Response | TQueryResponse | Error>(
     ['/api/query/', query],
     runQuery,
-    { refetchInterval: false },
+    {
+      cacheTime: cache.timeout * 1000 * 0.95,
+      refetchOnWindowFocus: false,
+      refetchInterval: false,
+      refetchOnMount: false,
+    },
   );
 }

hyperglass/ui/hooks/useScaledText.ts

@@ -1,33 +0,0 @@
-import { useMemo } from 'react';
-import { useMeasure } from 'react-use';
-
-import type { UseMeasureRef as UM } from 'react-use/esm/useMeasure';
-
-/**
- * These type aliases are for the readability of the function below.
- */
-type DC = HTMLElement;
-type DT = HTMLHeadingElement;
-type A = any;
-type B = boolean;
-
-/**
- * Wrapper for useMeasure() which determines if a text element should be scaled down due to its
- * size relative to its parent's size.
- */
-export function useScaledText<C extends DC = DC, T extends DT = DT>(deps: A[]): [UM<C>, UM<T>, B] {
-  // Get a ref & state object for the containing element.
-  const [containerRef, container] = useMeasure<C>();
-
-  // Get a ref & state object for the text element.
-  const [textRef, text] = useMeasure<T>();
-
-  // Memoize the values.
-  const textWidth = useMemo(() => text.width, [...deps, text.width !== 0]);
-  const containerWidth = useMemo(() => container.width, [...deps, container.width]);
-
-  // If the text element is the same size or larger than the container, it should be resized.
-  const shouldResize = textWidth !== 0 && textWidth >= containerWidth;
-
-  return [containerRef, textRef, shouldResize];
-}