Better handling of 404 errors

Next will route these to /[username]/[slug] if there is a 404
with a subfolder.

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

@@ -19,8 +19,8 @@ type ArticleQueryInput = {
 
 type ArticleQueryOutput = {
   articleData?: ArticleData
-  articleFetchError: unknown
   isLoading: boolean
+  articleFetchError: string[] | null
 }
 
 type ArticleData = {
@@ -113,8 +113,8 @@ export function useGetArticleQuery({
 
   return {
     articleData: resultData,
-    articleFetchError: resultError as unknown,
     isLoading: !error && !data,
+    articleFetchError: resultError ? resultError as string[] : null,
   }
 }
 

packages/web/pages/[username]/[slug]/index.tsx

@@ -42,17 +42,15 @@ export default function Home(): JSX.Element {
   const scrollRef = useRef<HTMLDivElement | null>(null)
   const { slug } = router.query
   const [showHighlightsModal, setShowHighlightsModal] = useState(false)
-
   const { viewerData } = useGetViewerQuery()
   const readerSettings = useReaderSettings()
 
-  const { articleData } = useGetArticleQuery({
+  const { articleData,  articleFetchError } = useGetArticleQuery({
     username: router.query.username as string,
     slug: router.query.slug as string,
     includeFriendsHighlights: false,
   })
   const article = articleData?.article.article
-
   const [labels, setLabels] = useState<Label[]>([])
   useEffect(() => {
     if (article?.labels) {
@@ -118,6 +116,11 @@ export default function Home(): JSX.Element {
     }
   }, [article, viewerData])
 
+  if (articleFetchError && articleFetchError.indexOf('NOT_FOUND') > -1) {
+    router.push('/404')
+    return <LoadingView />
+  }
+
   return (
     <PrimaryLayout
       pageTestId="home-page-tag"