Catching GraphQLErrors

src/js/graphql/api.ts

@@ -215,6 +215,6 @@ export const getClimbById = async (id: string): Promise<ClimbType> => {
       id
     },
     fetchPolicy: 'no-cache'
-  })
+  }).catch(e => { throw new Error(e) })
   return res.data.climb
 }

src/pages/climbs/[id].tsx

@@ -32,6 +32,7 @@ import { removeTypenameFromDisciplines } from '../../js/utils'
 import { TotalLengthInput } from '../../components/edit/form/TotalLengthInput'
 import { LegacyFAInput } from '../../components/edit/form/LegacyFAInput'
 import { getClimbById } from '../../js/graphql/api'
+import { GraphQLError } from 'graphql/error/GraphQLError'
 
 export const CLIMB_DESCRIPTION_FORM_VALIDATION_RULES: RulesType = {
   maxLength: {
@@ -360,6 +361,17 @@ export const getStaticProps: GetStaticProps<ClimbPageProps, { id: string }> = as
   }
 
   const climb = await getClimbById(params.id)
+    .catch((err: GraphQLError) => {
+      if (err.message === 'Invalid UUID.') {
+        return null
+      }
+    })
+
+  if (climb == null) {
+    return {
+      notFound: true
+    }
+  }
 
   const sortedClimbsInArea = await fetchSortedClimbsInArea(climb.ancestors[climb.ancestors.length - 1])
   let leftClimb: ClimbType | null = null

src/pages/crag/[id].tsx

@@ -11,6 +11,7 @@ import PhotoMontage from '../../components/media/PhotoMontage'
 import { UploadCTACragBanner } from '../../components/media/UploadCTA'
 import CragSummary, { Skeleton as AreaContentSkeleton } from '../../components/crag/cragSummary'
 import { QUERY_AREA_BY_ID } from '../../js/graphql/gql/areaById'
+import { GraphQLError } from 'graphql/error/GraphQLError'
 
 interface CragProps {
   area: AreaType
@@ -93,6 +94,10 @@ export const getStaticProps: GetStaticProps<CragProps, { id: string }> = async (
       uuid: params.id
     },
     fetchPolicy: 'no-cache'
+  }).catch((e: GraphQLError) => {
+    if (e.message === 'Invaild UUID') {
+      return null
+    }
   })
 
   if (rs?.data == null || rs?.data?.area == null) {