fix cache invalidation after adding and removing new gateway

web/src/pages/EdgeSetupPage/steps/SetupConfirmationStep.tsx

@@ -1,4 +1,3 @@
-import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { m } from '../../../paraglide/messages';
 import { ActionCard } from '../../../shared/components/ActionCard/ActionCard';
@@ -12,14 +11,12 @@ import { useEdgeWizardStore } from '../useEdgeWizardStore';
 
 export const SetupConfirmationStep = () => {
   const navigate = useNavigate();
-  const queryClient = useQueryClient();
 
   const handleBack = () => {
     useEdgeWizardStore.getState().reset();
   };
 
   const handleFinish = () => {
-    queryClient.invalidateQueries({ queryKey: ['edge'] });
     navigate({ to: '/edges', replace: true }).then(() => {
       setTimeout(() => {
         useEdgeWizardStore.getState().reset();

web/src/pages/EdgeSetupPage/steps/SetupEdgeAdoptionStep.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo } from 'react';
 import { m } from '../../../paraglide/messages';
 import { Controls } from '../../../shared/components/Controls/Controls';
@@ -14,6 +15,7 @@ import { useEdgeWizardStore } from '../useEdgeWizardStore';
 import type { SetupEvent, SetupStep, SetupStepId } from './types';
 
 export const SetupEdgeAdoptionStep = () => {
+  const queryClient = useQueryClient();
   const setActiveStep = useEdgeWizardStore((s) => s.setActiveStep);
   const edgeComponentWizardStore = useEdgeWizardStore((s) => s);
   const edgeAdoptionState = useEdgeWizardStore((s) => s.edgeAdoptionState);
@@ -32,8 +34,12 @@ export const SetupEdgeAdoptionStep = () => {
           : null,
         proxyLogs: event.logs && event.logs.length > 0 ? [...event.logs] : [],
       });
+
+      if (event.step === 'Done') {
+        void queryClient.invalidateQueries({ queryKey: ['edge'] });
+      }
     },
-    [setEdgeAdoptionState],
+    [queryClient, setEdgeAdoptionState],
   );
 
   const sse = useSSEController<SetupEvent>(

web/src/pages/EditGatewayPage/EditGatewayPage.tsx

@@ -73,7 +73,7 @@ const EditGatewayForm = ({ gateway }: { gateway: Gateway }) => {
   const { mutate: deleteGateway, isPending: deletePending } = useMutation({
     mutationFn: () => api.gateway.deleteGateway(gateway.id),
     meta: {
-      invalidate: ['gateway'],
+      invalidate: [['gateway'], ['network']],
     },
     onSuccess: () => {
       navigate({

web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx

@@ -18,12 +18,11 @@ export const SetupConfirmationStep = () => {
     useGatewayWizardStore.getState().start({ network_id: networkId });
   };
 
-  const handleFinish = () => {
-    navigate({ to: '/locations', replace: true }).then(() => {
-      setTimeout(() => {
-        useGatewayWizardStore.getState().reset();
-      }, 100);
-    });
+  const handleFinish = async () => {
+    await navigate({ to: '/locations', replace: true });
+    setTimeout(() => {
+      useGatewayWizardStore.getState().reset();
+    }, 100);
   };
 
   return (

web/src/pages/GatewaySetupPage/steps/SetupGatewayAdaptationStep.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo } from 'react';
 import { m } from '../../../paraglide/messages';
 import { Controls } from '../../../shared/components/Controls/Controls';
@@ -14,6 +15,7 @@ import { useGatewayWizardStore } from '../useGatewayWizardStore';
 import type { SetupEvent, SetupStep, SetupStepId } from './types';
 
 export const SetupGatewayAdoptionStep = () => {
+  const queryClient = useQueryClient();
   const setActiveStep = useGatewayWizardStore((s) => s.setActiveStep);
   const gatewayComponentWizardStore = useGatewayWizardStore((s) => s);
   const gatewayAdoptionState = useGatewayWizardStore((s) => s.gatewayAdoptionState);
@@ -34,8 +36,15 @@ export const SetupGatewayAdoptionStep = () => {
           : null,
         gatewayLogs: event.logs && event.logs.length > 0 ? [...event.logs] : [],
       });
+
+      if (event.step === 'Done') {
+        void Promise.all([
+          queryClient.invalidateQueries({ queryKey: ['gateway'] }),
+          queryClient.invalidateQueries({ queryKey: ['network'] }),
+        ]);
+      }
     },
-    [setGatewayAdoptionState],
+    [queryClient, setGatewayAdoptionState],
   );
 
   const sse = useSSEController<SetupEvent>(

web/src/pages/LocationsPage/modals/DeleteGatewayModal/DeleteGatewayModal.tsx

@@ -25,7 +25,7 @@ export const DeleteGatewayModal = () => {
   const { mutateAsync: deleteGateway, isPending } = useMutation({
     mutationFn: api.gateway.deleteGateway,
     meta: {
-      invalidate: ['gateway'],
+      invalidate: [['gateway'], ['network']],
     },
   });
 

web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx

@@ -153,7 +153,7 @@ const FloatingMenu = ({
   const { mutate: removeGw } = useMutation({
     mutationFn: api.gateway.deleteGateway,
     meta: {
-      invalidate: ['network', locationId, 'gateways'],
+      invalidate: [['gateway'], ['network']],
     },
   });