track errors in useRefetch

display error in SiteSelectorContainer
coralproject · Sep 12, 2023 · 1d99054 · 1d99054
1 parent e195372
commit 1d99054
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/client/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelectorContainer.tsx b/client/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelectorContainer.tsx
@@ -8,10 +8,12 @@ import {
   useRefetch,
   withPaginationContainer,
 } from "coral-framework/lib/relay";
+import { QueryError } from "coral-ui/components/v3";
 
 import { SiteSelectorContainer_query } from "coral-admin/__generated__/SiteSelectorContainer_query.graphql";
 import { SiteSelectorContainer_viewer } from "coral-admin/__generated__/SiteSelectorContainer_viewer.graphql";
 import { SiteSelectorContainerPaginationQueryVariables } from "coral-admin/__generated__/SiteSelectorContainerPaginationQuery.graphql";
+
 import SiteSelector from "./SiteSelector";
 
 interface Props {
@@ -31,7 +33,7 @@ const SiteSelectorContainer: React.FunctionComponent<Props> = (props) => {
   const [searchFilter, setSearchFilter] = useState<string | null>(null);
   const [searchTimeout, setSearchTimeout] = useState<number | undefined>();
 
-  const [, isRefetching] = useRefetch(props.relay, 10, {
+  const [, isRefetching, refetchError] = useRefetch(props.relay, 10, {
     searchFilter: searchFilter || null,
   });
 
@@ -77,6 +79,10 @@ const SiteSelectorContainer: React.FunctionComponent<Props> = (props) => {
     return { scoped: false, sites: [] };
   }, [props.query, props.viewer]);
 
+  if (refetchError) {
+    return <QueryError error={refetchError} />;
+  }
+
   return (
     <SiteSelector
       loading={!props.query || isRefetching}

diff --git a/client/src/core/client/framework/lib/relay/useRefetch.ts b/client/src/core/client/framework/lib/relay/useRefetch.ts
@@ -16,16 +16,18 @@ export default function useRefetch<V = Variables>(
   relay: RelayPaginationProp,
   totalCount: number,
   variables: Omit<V, "count" | "cursor">
-): [RefetchFunction, IsRefetching] {
+): [RefetchFunction, IsRefetching, Error | undefined] {
   const [manualRefetchCount, setManualRefetchCount] = useState(0);
   const [refetching, setRefetching] = useState(false);
+  const [err, setErr] = useState<Error | undefined>();
   useEffectWhenChanged(() => {
     setRefetching(true);
     const disposable = relay.refetchConnection(
       totalCount,
       (error) => {
         setRefetching(false);
         if (error) {
+          setErr(error);
           // eslint-disable-next-line no-console
           console.error(error);
         }
@@ -45,5 +47,5 @@ export default function useRefetch<V = Variables>(
       return a;
     }, []),
   ]);
-  return [() => setManualRefetchCount(manualRefetchCount + 1), refetching];
+  return [() => setManualRefetchCount(manualRefetchCount + 1), refetching, err];
 }