diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx index 5c1ff6a41..43b2dc799 100644 --- a/app/soapbox/features/ads/components/ad.tsx +++ b/app/soapbox/features/ads/components/ad.tsx @@ -1,4 +1,4 @@ -import { useQueryClient } from '@tanstack/react-query'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; import React, { useState, useEffect, useRef } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -27,6 +27,14 @@ const Ad: React.FC = ({ card, impression, expires }) => { const infobox = useRef(null); const [showInfo, setShowInfo] = useState(false); + // Fetch the impression URL (if any) upon displaying the ad. + // Don't fetch it more than once. + useQuery(['ads', 'impression', impression], () => { + if (impression) { + return fetch(impression); + } + }, { cacheTime: Infinity, staleTime: Infinity }); + /** Invalidate query cache for ads. */ const bustCache = (): void => { queryClient.invalidateQueries(['ads']); @@ -53,14 +61,6 @@ const Ad: React.FC = ({ card, impression, expires }) => { }; }, [infobox]); - // Fetch the impression URL (if any) upon displaying the ad. - // It's common for ad providers to provide this. - useEffect(() => { - if (impression) { - fetch(impression); - } - }, [impression]); - // Wait until the ad expires, then invalidate cache. useEffect(() => { if (expires) {