Added a toast for graphql error handling (#612)

* Added a toast for graphql error handling * merged else if --------- Co-authored-by: Kate Golovanova <[email protected]>
OWASP · Jan 28, 2025 · f00f251 · f00f251
1 parent d5422ec
commit f00f251
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/frontend/src/pages/ProjectDetails.tsx b/frontend/src/pages/ProjectDetails.tsx
@@ -12,6 +12,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { fetchAlgoliaData } from 'api/fetchAlgoliaData'
 import { GET_PROJECT_DATA } from 'api/queries/projectQueries'
+import { toast } from 'hooks/useToast'
 import { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { formatDate } from 'utils/dateFormatter'
@@ -29,7 +30,11 @@ const ProjectDetailsPage = () => {
   const [recentReleases, setRecentReleases] = useState([])
   const [recentIssues, setRecentIssues] = useState([])
 
-  const { data, loading: isGraphQlDataLoading } = useQuery(GET_PROJECT_DATA, {
+  const {
+    data,
+    loading: isGraphQlDataLoading,
+    error: graphQLRequestError,
+  } = useQuery(GET_PROJECT_DATA, {
     variables: { key: 'www-project-' + projectKey },
   })
 
@@ -51,7 +56,14 @@ const ProjectDetailsPage = () => {
       setRecentReleases(data?.project?.recentReleases)
       setRecentIssues(data?.project?.recentIssues)
     }
-  }, [data])
+    if (graphQLRequestError && !isLoading) {
+      toast({
+        variant: 'destructive',
+        title: 'GraphQL Request Failed',
+        description: 'Unable to complete the requested operation.',
+      })
+    }
+  }, [data, graphQLRequestError, isLoading])
 
   if (isLoading || isGraphQlDataLoading)
     return (