Cached subscriptions to prevent unnecessary calls (#205)

* Cached subscriptions api results

* adjust show banner logic

app/(dashboard)/billing/page.tsx

@@ -6,7 +6,7 @@ import {LoaderCircle} from 'lucide-react';
 import Stripe from '@stripe/stripe';
 import {SubscriptionPortalWidget} from '@/app/components//SubscriptionPortalWidget';
 import {SubscriptionNextBillWidget} from '@/app/components/SubscriptionNextBillWidget';
-import {useQueries} from 'react-query';
+import {useQueries, useQueryClient} from 'react-query';
 import {usePathname, useSearchParams} from 'next/navigation';
 import EmbeddedComponentContainer from '@/app/components/EmbeddedComponentContainer';
 
@@ -70,12 +70,18 @@ export default function Billing() {
   const withinBilling = pathname.startsWith('/billing');
   const searchParams = useSearchParams();
   const successfulSubscription = searchParams.get('success') === 'true';
-
+  const subscriptionsQueryInvalidated = React.useRef(false);
+  const queryClient = useQueryClient();
   React.useEffect(() => {
-    if (successfulSubscription && withinBilling) {
-      subscriptionsApi.refetch();
+    if (
+      successfulSubscription &&
+      withinBilling &&
+      !subscriptionsQueryInvalidated.current
+    ) {
+      queryClient.invalidateQueries('subscriptions');
+      subscriptionsQueryInvalidated.current = true;
     }
-  }, [successfulSubscription, withinBilling, subscriptionsApi]);
+  }, [successfulSubscription, withinBilling, subscriptionsApi, queryClient]);
 
   let body = null;
   const subscriptions = subscriptionsApi.data;

app/components/SubscriptionsBanner.tsx

@@ -5,28 +5,23 @@ import {CreditCard as CreditCardIcon, X as CancelIcon} from 'lucide-react';
 import {useSession} from 'next-auth/react';
 import {useRouter, usePathname} from 'next/navigation';
 import React from 'react';
-
-const fetchSubscription = async () => {
-  const response = await fetch('/api/subscriptions');
-  const json = await response.json();
-  if (!response.ok) {
-    console.warn('An error occurred: ', json.error);
-    return {subscriptions: []};
-  }
-  return {subscriptions: json.subscriptions as Stripe.Subscription[]};
-};
+import {useQuery} from 'react-query';
 
 export const SubscriptionsBanner = () => {
   const router = useRouter();
   const pathname = usePathname();
   const withinBilling = pathname.startsWith('/billing');
-
-  const [showBanner, setShowBanner] = React.useState(false);
-  React.useEffect(() => {
-    fetchSubscription().then(({subscriptions}) => {
-      setShowBanner(subscriptions.length === 0);
-    });
+  const {data} = useQuery({
+    queryKey: 'subscriptions',
+    queryFn: async () => {
+      const response = await fetch('/api/subscriptions');
+      const json = await response.json();
+      return json.subscriptions as Stripe.Subscription[];
+    },
+    staleTime: 30000,
+    refetchOnMount: false,
   });
+  const showBanner = Boolean(data && data.length === 0);
 
   return (
     <Banner open={showBanner && !withinBilling} variant="cool_gradient">