diff --git a/src/common/hooks/campaigns.ts b/src/common/hooks/campaigns.ts index 1ff396d21..4ac118bc3 100644 --- a/src/common/hooks/campaigns.ts +++ b/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 = 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) { diff --git a/src/components/client/campaigns/ViewCampaignPage.tsx b/src/components/client/campaigns/ViewCampaignPage.tsx index 247dad14d..f51e05470 100644 --- a/src/components/client/campaigns/ViewCampaignPage.tsx +++ b/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 + if (isLoading || !data) + return ( + <> + {isLoading && } + {isError && } + + ) const { campaign } = data const ogImageUrl = campaignListPictureUrl(campaign) const ShouldIncludeHotJar = slug === 'petar-v-cambridge' ? HotJar : () => null