chore: invalidate subscription cache on old updates

studio/components/interfaces/Billing/EnterpriseUpdate.tsx

@@ -27,6 +27,8 @@ import {
 import { PaymentMethod, SubscriptionPreview } from './Billing.types'
 import { formSubscriptionUpdatePayload, getCurrentAddons } from './Billing.utils'
 import SupportPlan from './AddOns/SupportPlan'
+import { subscriptionKeys } from 'data/subscriptions/keys'
+import { useQueryClient } from '@tanstack/react-query'
 
 interface Props {
   products: { tiers: any[]; addons: SubscriptionAddon[] }
@@ -45,6 +47,7 @@ const EnterpriseUpdate: FC<Props> = ({
 }) => {
   const { app, ui } = useStore()
   const router = useRouter()
+  const queryClient = useQueryClient()
 
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const captchaRef = useRef<HCaptcha>(null)
@@ -195,6 +198,12 @@ const EnterpriseUpdate: FC<Props> = ({
       } else {
         setIsSuccessful(true)
       }
+
+      await Promise.all([
+        queryClient.invalidateQueries(subscriptionKeys.subscriptionV2(projectRef)),
+        queryClient.invalidateQueries(subscriptionKeys.subscription(projectRef)),
+        queryClient.invalidateQueries(subscriptionKeys.addons(projectRef)),
+      ])
     }
     setIsSubmitting(false)
   }

studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx

@@ -13,6 +13,8 @@ import { SubscriptionPreview } from '../Billing.types'
 import { StripeSubscription } from 'components/interfaces/Billing'
 import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { CANCELLATION_REASONS } from 'components/interfaces/BillingV2/Billing.constants'
+import { subscriptionKeys } from 'data/subscriptions/keys'
+import { useQueryClient } from '@tanstack/react-query'
 
 interface ExitSurveyProps {
   freeTier: any
@@ -23,6 +25,8 @@ interface ExitSurveyProps {
 const ExitSurvey = ({ freeTier, subscription, onSelectBack }: ExitSurveyProps) => {
   const router = useRouter()
   const { app, ui } = useStore()
+  const queryClient = useQueryClient()
+
   const projectId = ui.selectedProject?.id ?? -1
   const projectRef = ui.selectedProject?.ref
 
@@ -165,6 +169,12 @@ const ExitSurvey = ({ freeTier, subscription, onSelectBack }: ExitSurveyProps) =
         } else {
           setIsSuccessful(true)
         }
+
+        await Promise.all([
+          queryClient.invalidateQueries(subscriptionKeys.subscriptionV2(projectRef)),
+          queryClient.invalidateQueries(subscriptionKeys.subscription(projectRef)),
+          queryClient.invalidateQueries(subscriptionKeys.addons(projectRef)),
+        ])
       }
       const feedbackRes = await post(`${API_URL}/feedback/downgrade`, {
         projectRef,

studio/components/interfaces/Billing/ProUpgrade.tsx

@@ -30,6 +30,8 @@ import BackButton from 'components/ui/BackButton'
 import SupportPlan from './AddOns/SupportPlan'
 import HCaptcha from '@hcaptcha/react-hcaptcha'
 import SpendCapModal from './SpendCapModal'
+import { useQueryClient } from '@tanstack/react-query'
+import { subscriptionKeys } from 'data/subscriptions/keys'
 
 // Do not allow compute size changes for af-south-1
 
@@ -52,6 +54,7 @@ const ProUpgrade: FC<Props> = ({
 }) => {
   const { app, ui } = useStore()
   const router = useRouter()
+  const queryClient = useQueryClient()
 
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const captchaRef = useRef<HCaptcha>(null)
@@ -212,6 +215,12 @@ const ProUpgrade: FC<Props> = ({
       } else {
         setIsSuccessful(true)
       }
+
+      await Promise.all([
+        queryClient.invalidateQueries(subscriptionKeys.subscriptionV2(projectRef)),
+        queryClient.invalidateQueries(subscriptionKeys.subscription(projectRef)),
+        queryClient.invalidateQueries(subscriptionKeys.addons(projectRef)),
+      ])
     }
     setIsSubmitting(false)
   }

studio/components/interfaces/Billing/TeamUpgrade.tsx

@@ -27,6 +27,8 @@ import {
 } from './AddOns/AddOns.utils'
 import SupportPlan from './AddOns/SupportPlan'
 import HCaptcha from '@hcaptcha/react-hcaptcha'
+import { subscriptionKeys } from 'data/subscriptions/keys'
+import { useQueryClient } from '@tanstack/react-query'
 
 // Do not allow compute size changes for af-south-1
 
@@ -49,10 +51,12 @@ const TeamUpgrade = ({
   const router = useRouter()
 
   // Team tier is enabled when the user is already on the team tier (manually assigned by us)
-  const teamTierEnabled = currentSubscription?.tier?.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.TEAM
+  const teamTierEnabled =
+    currentSubscription?.tier?.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.TEAM
 
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const captchaRef = useRef<HCaptcha>(null)
+  const queryClient = useQueryClient()
 
   const { addons } = products
   const computeSizes = formatComputeSizes(addons)
@@ -202,6 +206,12 @@ const TeamUpgrade = ({
       } else {
         setIsSuccessful(true)
       }
+
+      await Promise.all([
+        queryClient.invalidateQueries(subscriptionKeys.subscriptionV2(projectRef)),
+        queryClient.invalidateQueries(subscriptionKeys.subscription(projectRef)),
+        queryClient.invalidateQueries(subscriptionKeys.addons(projectRef)),
+      ])
     }
     setIsSubmitting(false)
   }