From ece6a00c2d2d0b896497e3a1374bce0fac051075 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 20 Oct 2022 12:39:22 -0500
Subject: [PATCH] Ads: don't fetch the impression URL more than once

---
 app/soapbox/features/ads/components/ad.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

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<IAd> = ({ card, impression, expires }) => {
   const infobox = useRef<HTMLDivElement>(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<IAd> = ({ 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) {