fix(webapp): Invalidate cache on deleting integrations and adding con…

…nection from integration page (#3068)

<!-- Describe the problem and your solution --> 
I noticed a couple of places where the connection list cache wasn't
being correctly invalidated:

1. When creating a new connection from the integrations page (like right
after creating a new integration).
2. When deleting an integration.

<!-- Issue ticket number and link (if applicable) -->

<!-- Testing instructions (skip if just adding/editing providers) -->

## How I Tested This

1. Go to Connections so the cache is warmed up
1. Create a new Unauthenticated Integration
2. Create a new connection for the new Unauthenticated integration
3. Return to Connections. The new connection should be in the list.
4. Go back to the new integration, go to the settings tab, and delete
it.
5. Go back to connections. The new connection should now be gone.

packages/webapp/src/hooks/useConnections.tsx

@@ -1,3 +1,4 @@
+import type { useSWRConfig, Cache } from 'swr';
 import useSWR from 'swr';
 import useSWRInfinite from 'swr/infinite';
 import type { SWRError } from '../utils/api';
@@ -38,6 +39,15 @@ export function useConnections(queries: GetConnections['Querystring']) {
     return { loading, error: error?.json, data, hasNext, offset: size, setOffset: setSize, mutate };
 }
 
+export function clearConnectionsCache(cache: Cache, mutate: ReturnType<typeof useSWRConfig>['mutate']) {
+    for (const key of cache.keys()) {
+        if (key.includes('/api/v1/connections?')) {
+            void mutate(key, undefined);
+            cache.delete(key);
+        }
+    }
+}
+
 export function useConnectionsCount(env: string) {
     const { data, error, mutate } = useSWR<GetConnectionsCount['Success'], SWRError<GetConnectionsCount['Errors']>>(
         `/api/v1/connections/count?env=${env}`,

packages/webapp/src/pages/Integrations/providerConfigKey/Settings/components/Delete.tsx

@@ -4,14 +4,16 @@ import { apiDeleteIntegration } from '../../../../../hooks/useIntegration';
 import type { ApiIntegration } from '@nangohq/types';
 import { useToast } from '../../../../../hooks/useToast';
 import { useNavigate } from 'react-router-dom';
-import { mutate } from 'swr';
+import { useSWRConfig } from 'swr';
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '../../../../../components/ui/Dialog';
+import { clearConnectionsCache } from '../../../../../hooks/useConnections';
 
 export const DeleteIntegrationButton: React.FC<{ env: string; integration: ApiIntegration }> = ({ env, integration }) => {
     const { toast } = useToast();
     const navigate = useNavigate();
     const [open, setOpen] = useState(false);
     const [loading, setLoading] = useState(false);
+    const { mutate, cache } = useSWRConfig();
 
     const onDelete = async () => {
         setLoading(true);
@@ -24,6 +26,9 @@ export const DeleteIntegrationButton: React.FC<{ env: string; integration: ApiIn
         } else {
             toast({ title: `Integration "${integration.unique_key}" has been deleted`, variant: 'success' });
             void mutate((key) => typeof key === 'string' && key.startsWith(`/api/v1/integrations`), undefined);
+
+            clearConnectionsCache(cache, mutate);
+
             navigate(`/${env}/integrations`);
         }
     };

packages/webapp/src/pages/Integrations/providerConfigKey/Show.tsx

@@ -23,6 +23,8 @@ import { apiConnectSessions } from '../../../hooks/useConnect';
 import { useToast } from '../../../hooks/useToast';
 import { Helmet } from 'react-helmet';
 import { ErrorPageComponent } from '../../../components/ErrorComponent';
+import { useSWRConfig } from 'swr';
+import { clearConnectionsCache } from '../../../hooks/useConnections';
 
 export const ShowIntegration: React.FC = () => {
     const { providerConfigKey } = useParams();
@@ -40,6 +42,8 @@ export const ShowIntegration: React.FC = () => {
     const connectUI = useRef<ConnectUI>();
     const hasConnected = useRef<string | undefined>();
 
+    const { mutate, cache } = useSWRConfig();
+
     useEffect(() => {
         if (location.pathname.match(/\/settings/)) {
             setTab('settings');
@@ -65,10 +69,12 @@ export const ShowIntegration: React.FC = () => {
                 }
             } else if (event.type === 'connect') {
                 console.log('connected', event);
+
+                clearConnectionsCache(cache, mutate);
                 hasConnected.current = event.payload.connectionId;
             }
         },
-        [toast]
+        [toast, cache, mutate, env, navigate, data?.integration.unique_key]
     );
 
     const onClickConnectUI = () => {