fix: Gracefully handle runtime error for getArea query (#1111)

src/app/(default)/area/[[...slug]]/page.tsx

@@ -37,7 +37,7 @@ export interface PageWithCatchAllUuidProps {
 export default async function Page ({ params }: PageWithCatchAllUuidProps): Promise<any> {
   const areaUuid = parseUuidAsFirstParam({ params })
   const pageData = await getArea(areaUuid)
-  if (pageData == null) {
+  if (pageData == null || pageData.area == null) {
     notFound()
   }
 
@@ -188,8 +188,13 @@ export function generateStaticParams (): PageSlugType[] {
 // Page metadata
 export async function generateMetadata ({ params }: PageWithCatchAllUuidProps): Promise<Metadata> {
   const areaUuid = parseUuidAsFirstParam({ params })
+  const area = await getArea(areaUuid, 'cache-first')
 
-  const { area: { uuid, areaName, pathTokens, media } } = await getArea(areaUuid, 'cache-first')
+  if (area == null || area.area == null) {
+    return {}
+  }
+
+  const { area: { uuid, areaName, pathTokens, media } } = area
 
   let wall = ''
   if (pathTokens.length >= 2) {

src/app/(default)/editArea/[slug]/general/page.tsx

@@ -19,7 +19,12 @@ export const fetchCache = 'force-no-store' // opt out of Nextjs version of 'fetc
 
 // Page metadata
 export async function generateMetadata ({ params }: DashboardPageProps): Promise<Metadata> {
-  const { area: { areaName } } = await getPageDataForEdit(params.slug, 'cache-first')
+  const pageDataForEdit = await getPageDataForEdit(params.slug, 'cache-first')
+  if (pageDataForEdit == null || pageDataForEdit.area == null) {
+    return {}
+  }
+
+  const { area: { areaName } } = pageDataForEdit
   return {
     title: `Editing area ${areaName}`
   }
@@ -32,7 +37,12 @@ export interface DashboardPageProps {
 }
 
 export default async function AreaEditPage ({ params }: DashboardPageProps): Promise<any> {
-  const { area } = await getPageDataForEdit(params.slug)
+  const pageDataForEdit = await getPageDataForEdit(params.slug)
+  if (pageDataForEdit == null || pageDataForEdit.area == null) {
+    notFound()
+  }
+
+  const { area } = pageDataForEdit
   const {
     areaName, uuid, ancestors, pathTokens, children,
     content: { description },
@@ -100,7 +110,7 @@ export const getPageDataForEdit = async (pageSlug: string, fetchPolicy?: FetchPo
   }
 
   const pageData = await getArea(pageSlug, fetchPolicy)
-  if (pageData == null) {
+  if (pageData == null || pageData.area == null) {
     notFound()
   }
   return pageData

src/app/(default)/editArea/[slug]/layout.tsx

@@ -16,7 +16,11 @@ export default async function EditAreaDashboardLayout ({
   children: React.ReactNode
   params: { slug: string }
 }): Promise<any> {
-  const { area: { uuid, pathTokens, ancestors, areaName, children: subAreas, climbs, metadata: { leaf, isBoulder } } } = await getPageDataForEdit(params.slug)
+  const pageDataForEdit = await getPageDataForEdit(params.slug)
+  if (pageDataForEdit == null || pageDataForEdit.area == null) {
+    return <div />
+  }
+  const { area: { uuid, pathTokens, ancestors, areaName, children: subAreas, climbs, metadata: { leaf, isBoulder } } } = pageDataForEdit
   return (
     <div className='relative w-full h-full'>
       <div className='px-12 pt-8 pb-4'>

src/app/(default)/editArea/[slug]/manageAreas/page.tsx

@@ -9,14 +9,24 @@ export const fetchCache = 'force-no-store' // opt out of Nextjs version of 'fetc
 
 // Page metadata
 export async function generateMetadata ({ params }: DashboardPageProps): Promise<Metadata> {
-  const { area: { areaName } } = await getPageDataForEdit(params.slug, 'cache-first')
+  const pageDataForEdit = await getPageDataForEdit(params.slug, 'cache-first')
+  if (pageDataForEdit == null || pageDataForEdit.area == null) {
+    return {}
+  }
+
+  const { area: { areaName } } = pageDataForEdit
   return {
     title: `Manage child areas in ${areaName}`
   }
 }
 
 export default async function AddClimbsPage ({ params: { slug } }: DashboardPageProps): Promise<any> {
-  const { area } = await getPageDataForEdit(slug)
+  const pageDataForEdit = await getPageDataForEdit(slug)
+  if (pageDataForEdit == null || pageDataForEdit.area == null) {
+    return {}
+  }
+
+  const { area } = pageDataForEdit
   const { uuid, children } = area
   const canEditLeaves = !area.metadata.leaf
   return (

src/app/(default)/editArea/[slug]/manageClimbs/page.tsx

@@ -11,14 +11,24 @@ export const fetchCache = 'force-no-store' // opt out of Nextjs version of 'fetc
 
 // Page metadata
 export async function generateMetadata ({ params }: DashboardPageProps): Promise<Metadata> {
-  const { area: { areaName } } = await getPageDataForEdit(params.slug, 'cache-first')
+  const pageDataForEdit = await getPageDataForEdit(params.slug, 'cache-first')
+  if (pageDataForEdit == null || pageDataForEdit.area == null) {
+    return {}
+  }
+
+  const { area: { areaName } } = pageDataForEdit
   return {
     title: `Manage climbs in area ${areaName}`
   }
 }
 
 export default async function AddClimbsPage ({ params: { slug } }: DashboardPageProps): Promise<any> {
-  const { area } = await getPageDataForEdit(slug)
+  const pageDataForEdit = await getPageDataForEdit(slug)
+  if (pageDataForEdit == null || pageDataForEdit.area == null) {
+    return {}
+  }
+
+  const { area } = pageDataForEdit
   const { areaName, uuid, gradeContext, metadata } = area
   const { leaf, isBoulder } = metadata
   return (

src/app/(default)/editArea/[slug]/manageTopos/page.tsx

@@ -2,21 +2,32 @@ import { Metadata } from 'next'
 import { DashboardPageProps, getPageDataForEdit } from '../general/page'
 import { TopoEditor } from './components/TopoEditor'
 import { PageContainer } from '../components/EditAreaContainers'
+import { notFound } from 'next/navigation'
 
 // Opt out of caching for all data requests in the route segment
 export const dynamic = 'force-dynamic'
 export const fetchCache = 'force-no-store' // opt out of Nextjs version of 'fetch'
 
 // Page metadata
 export async function generateMetadata ({ params }: DashboardPageProps): Promise<Metadata> {
-  const { area: { areaName } } = await getPageDataForEdit(params.slug, 'cache-first')
+  const pageDataForEdit = await getPageDataForEdit(params.slug, 'cache-first')
+  if (pageDataForEdit == null || pageDataForEdit.area == null) {
+    return {}
+  }
+
+  const { area: { areaName } } = pageDataForEdit
   return {
     title: `Manage topos in area ${areaName}`
   }
 }
 
 export default async function EditToposPage ({ params: { slug } }: DashboardPageProps): Promise<any> {
-  const { area } = await getPageDataForEdit(slug)
+  const pageDataForEdit = await getPageDataForEdit(slug)
+  if (pageDataForEdit == null || pageDataForEdit.area == null) {
+    notFound()
+  }
+
+  const { area } = pageDataForEdit
 
   return (
     <PageContainer>

src/js/graphql/getArea.ts

@@ -6,7 +6,7 @@ import { graphqlClient } from './Client'
 import { AreaType, ChangesetType } from '../types'
 
 export interface AreaPageDataProps {
-  area: AreaType
+  area: AreaType | null
   getAreaHistory: ChangesetType[]
 }
 
@@ -15,14 +15,19 @@ export interface AreaPageDataProps {
  * @param uuid area uuid
  */
 export const getArea = async (uuid: string, fetchPolicy: FetchPolicy = 'no-cache'): Promise<AreaPageDataProps> => {
-  const rs = await graphqlClient.query<AreaPageDataProps>({
-    query: QUERY_AREA_BY_ID,
-    variables: {
-      uuid
-    },
-    fetchPolicy
-  })
-  return rs.data
+  try {
+    const rs = await graphqlClient.query<AreaPageDataProps>({
+      query: QUERY_AREA_BY_ID,
+      variables: {
+        uuid
+      },
+      fetchPolicy
+    })
+    return rs.data
+  } catch (error) {
+    console.error(error)
+    return { area: null, getAreaHistory: [] }
+  }
 }
 
 /**

src/pages/climbs/[id].tsx

@@ -389,6 +389,13 @@ export const getStaticProps: GetStaticProps<ClimbPageProps, { id: string }> = as
   }
 
   const parentAreaData = await getArea(climb.ancestors[climb.ancestors.length - 1], 'cache-first')
+
+  if (parentAreaData == null || parentAreaData.area == null) {
+    return {
+      notFound: true
+    }
+  }
+
   let leftClimb: ClimbType | null = null
   let rightClimb: ClimbType | null = null