Merge pull request #2950 from omnivore-app/fix/web-left-menu-network-failures

Better handling of network failures for labels/subscriptions/searches in the left menu

packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx

@@ -48,32 +48,39 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
     isSessionStorage: false,
     initialValue: [],
   })
-  const { labels: networkLabels, isLoading: labelsLoading } =
-    useGetLabelsQuery()
-  const { savedSearches: networkSearches, isLoading: searchesLoading } =
-    useGetSavedSearchQuery()
-  const {
-    subscriptions: networkSubscriptions,
-    isLoading: subscriptionsLoading,
-  } = useGetSubscriptionsQuery()
+  const labelsResponse = useGetLabelsQuery()
+  const searchesResponse = useGetSavedSearchQuery()
+  const subscriptionsResponse = useGetSubscriptionsQuery()
 
   useEffect(() => {
-    if (!labelsLoading) {
-      setLabels(networkLabels)
+    if (
+      !labelsResponse.error &&
+      !labelsResponse.isLoading &&
+      labelsResponse.labels
+    ) {
+      setLabels(labelsResponse.labels)
     }
-  }, [setLabels, networkLabels, labelsLoading])
+  }, [setLabels, labelsResponse])
 
   useEffect(() => {
-    if (!subscriptionsLoading) {
-      setSubscriptions(networkSubscriptions)
+    if (
+      !subscriptionsResponse.error &&
+      !subscriptionsResponse.isLoading &&
+      subscriptionsResponse.subscriptions
+    ) {
+      setSubscriptions(subscriptionsResponse.subscriptions)
     }
-  }, [setSubscriptions, networkSubscriptions, subscriptionsLoading])
+  }, [setSubscriptions, subscriptionsResponse])
 
   useEffect(() => {
-    if (!searchesLoading) {
-      setSavedSearches(networkSearches ?? [])
+    if (
+      !searchesResponse.error &&
+      !searchesResponse.isLoading &&
+      searchesResponse.savedSearches
+    ) {
+      setSavedSearches(searchesResponse.savedSearches)
     }
-  }, [setSavedSearches, networkSearches, searchesLoading])
+  }, [setSavedSearches, searchesResponse])
 
   return (
     <>

packages/web/lib/networking/queries/useGetLabelsQuery.tsx

@@ -4,6 +4,7 @@ import { Label, labelFragment } from '../fragments/labelFragment'
 import { publicGqlFetcher } from '../networkHelpers'
 
 type LabelsQueryResponse = {
+  error: any
   isLoading: boolean
   isValidating: boolean
   labels: Label[]
@@ -38,10 +39,11 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
   const { data, error, mutate, isValidating } = useSWR(query, publicGqlFetcher)
 
   try {
-    if (data) {
+    if (data && !error) {
       const result = data as LabelsResponseData
       const labels = result.labels?.labels as Label[]
       return {
+        error,
         isLoading: !error && !data,
         isValidating,
         labels,
@@ -54,6 +56,7 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
     console.log('error', error)
   }
   return {
+    error,
     isLoading: !error && !data,
     isValidating: false,
     labels: [],

packages/web/lib/networking/queries/useGetSavedSearchQuery.tsx

@@ -7,6 +7,7 @@ import {
 } from '../fragments/savedSearchFragment'
 
 type SavedSearchResponse = {
+  error: any
   savedSearches?: SavedSearch[]
   savedSearchErrors?: unknown
   isLoading: boolean
@@ -39,6 +40,7 @@ export function useGetSavedSearchQuery(): SavedSearchResponse {
     const { filters } = data as SavedSearchResponseData
 
     return {
+      error,
       savedSearches: filters?.filters ?? [],
       savedSearchErrors: error ?? {},
       isLoading: false,
@@ -46,6 +48,7 @@ export function useGetSavedSearchQuery(): SavedSearchResponse {
   }
 
   return {
+    error,
     savedSearches: [],
     savedSearchErrors: null,
     isLoading: !error && !data,

packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx

@@ -25,6 +25,7 @@ export type Subscription = {
 }
 
 type SubscriptionsQueryResponse = {
+  error: any
   isLoading: boolean
   isValidating: boolean
   subscriptions: Subscription[]
@@ -85,6 +86,7 @@ export function useGetSubscriptionsQuery(
       const result = data as SubscriptionsResponseData
       const subscriptions = result.subscriptions.subscriptions as Subscription[]
       return {
+        error,
         isLoading: !error && !data,
         isValidating,
         subscriptions,
@@ -97,6 +99,7 @@ export function useGetSubscriptionsQuery(
     console.log('error', error)
   }
   return {
+    error,
     isLoading: !error && !data,
     isValidating: true,
     subscriptions: [],