ViewCampaignPage: Show page not found, on wrong slug

src/common/hooks/campaigns.ts

@@ -14,6 +14,7 @@ import { DonationStatus } from 'gql/donations.enums'
 import { apiClient } from 'service/apiClient'
 import { useCurrentPerson } from 'common/util/useCurrentPerson'
 import { isAdmin } from 'common/util/roles'
+import { AxiosError, AxiosResponse } from 'axios'
 
 // NOTE: shuffling the campaigns so that each gets its fair chance to be on top row
 export const campaignsOrderQueryFunction: QueryFunction<CampaignResponse[]> = async ({
@@ -77,7 +78,15 @@ export function useCampaignTypesList() {
 }
 
 export function useViewCampaign(slug: string) {
-  return useQuery<{ campaign: CampaignResponse }>([endpoints.campaign.viewCampaign(slug).url])
+  return useQuery<{ campaign: CampaignResponse }, AxiosError>(
+    [endpoints.campaign.viewCampaign(slug).url],
+    {
+      retry(failureCount, error) {
+        if (error.isAxiosError && error.response?.status === 404) return false
+        return true
+      },
+    },
+  )
 }
 
 export function useViewCampaignById(id: string) {

src/components/client/campaigns/ViewCampaignPage.tsx

@@ -12,14 +12,21 @@ import CenteredSpinner from 'components/common/CenteredSpinner'
 import InlineDonation from './InlineDonation'
 import CampaignDetails from './CampaignDetails'
 import dynamic from 'next/dynamic'
+import NotFoundPage from 'pages/404'
 
 type Props = { slug: string }
 const HotJar = dynamic(() => import('common/hotjar/HotJar'), { ssr: false })
 
 export default function ViewCampaignPage({ slug }: Props) {
-  const { data, isLoading } = useViewCampaign(slug)
+  const { data, isLoading, isError } = useViewCampaign(slug)
   const { mobile, small } = useMobile()
-  if (isLoading || !data) return <CenteredSpinner size="2rem" />
+  if (isLoading || !data)
+    return (
+      <>
+        {isLoading && <CenteredSpinner size={'2rem'} />}
+        {isError && <NotFoundPage />}
+      </>
+    )
   const { campaign } = data
   const ogImageUrl = campaignListPictureUrl(campaign)
   const ShouldIncludeHotJar = slug === 'petar-v-cambridge' ? HotJar : () => null