From ca06ebc4431a889cd7a4982e6ca23249e2ee8e50 Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Tue, 3 Mar 2026 12:32:48 +0100 Subject: [PATCH 1/4] fix cache invalidation after adding and removing new gateway --- .../pages/EditGatewayPage/EditGatewayPage.tsx | 2 +- .../steps/SetupConfirmationStep.tsx | 21 +++++++++++++------ .../DeleteGatewayModal/DeleteGatewayModal.tsx | 2 +- .../GatewaysStatusBadge.tsx | 2 +- 4 files changed, 18 insertions(+), 9 deletions(-) diff --git a/web/src/pages/EditGatewayPage/EditGatewayPage.tsx b/web/src/pages/EditGatewayPage/EditGatewayPage.tsx index 584bf542d6..a39e8fb9ab 100644 --- a/web/src/pages/EditGatewayPage/EditGatewayPage.tsx +++ b/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({ diff --git a/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx b/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx index d287d6a8be..7fa3efbe6b 100644 --- a/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx +++ b/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx @@ -1,3 +1,4 @@ +import { useQueryClient } from '@tanstack/react-query'; import { useNavigate } from '@tanstack/react-router'; import { m } from '../../../paraglide/messages'; import { ActionCard } from '../../../shared/components/ActionCard/ActionCard'; @@ -11,6 +12,7 @@ import { useGatewayWizardStore } from '../useGatewayWizardStore'; export const SetupConfirmationStep = () => { const navigate = useNavigate(); + const queryClient = useQueryClient(); const handleBack = () => { const networkId = useGatewayWizardStore.getState().network_id; @@ -18,12 +20,19 @@ 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 () => { + const networkId = useGatewayWizardStore.getState().network_id; + + await Promise.all([ + queryClient.invalidateQueries({ queryKey: ['gateway'] }), + queryClient.invalidateQueries({ queryKey: ['network'] }), + queryClient.invalidateQueries({ queryKey: ['network', networkId, 'gateway'] }), + ]); + + await navigate({ to: '/locations', replace: true }); + setTimeout(() => { + useGatewayWizardStore.getState().reset(); + }, 100); }; return ( diff --git a/web/src/pages/LocationsPage/modals/DeleteGatewayModal/DeleteGatewayModal.tsx b/web/src/pages/LocationsPage/modals/DeleteGatewayModal/DeleteGatewayModal.tsx index fa3fca16bf..2b7474aab2 100644 --- a/web/src/pages/LocationsPage/modals/DeleteGatewayModal/DeleteGatewayModal.tsx +++ b/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']], }, }); diff --git a/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx b/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx index 73f4066d6b..f11ef1ea10 100644 --- a/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx +++ b/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'], ['network', locationId, 'gateway']], }, }); From 340d0de1edf764fa46f1f1b229ed17e261b0f7e0 Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Tue, 3 Mar 2026 12:51:08 +0100 Subject: [PATCH 2/4] remove redundant invalidations --- web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx | 3 --- .../components/GatewaysStatusBadge/GatewaysStatusBadge.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx b/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx index 7fa3efbe6b..54c18df581 100644 --- a/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx +++ b/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx @@ -21,12 +21,9 @@ export const SetupConfirmationStep = () => { }; const handleFinish = async () => { - const networkId = useGatewayWizardStore.getState().network_id; - await Promise.all([ queryClient.invalidateQueries({ queryKey: ['gateway'] }), queryClient.invalidateQueries({ queryKey: ['network'] }), - queryClient.invalidateQueries({ queryKey: ['network', networkId, 'gateway'] }), ]); await navigate({ to: '/locations', replace: true }); diff --git a/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx b/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx index f11ef1ea10..06583439fd 100644 --- a/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx +++ b/web/src/shared/components/GatewaysStatusBadge/GatewaysStatusBadge.tsx @@ -153,7 +153,7 @@ const FloatingMenu = ({ const { mutate: removeGw } = useMutation({ mutationFn: api.gateway.deleteGateway, meta: { - invalidate: [['gateway'], ['network'], ['network', locationId, 'gateway']], + invalidate: [['gateway'], ['network']], }, }); From 19998d6428b5ce5311d03ff1e5b89e025d9ac642 Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Tue, 3 Mar 2026 12:59:35 +0100 Subject: [PATCH 3/4] move query invalidation to the end of adoption process --- .../GatewaySetupPage/steps/SetupConfirmationStep.tsx | 7 ------- .../steps/SetupGatewayAdaptationStep.tsx | 11 ++++++++++- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx b/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx index 54c18df581..c0d2883166 100644 --- a/web/src/pages/GatewaySetupPage/steps/SetupConfirmationStep.tsx +++ b/web/src/pages/GatewaySetupPage/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,7 +11,6 @@ import { useGatewayWizardStore } from '../useGatewayWizardStore'; export const SetupConfirmationStep = () => { const navigate = useNavigate(); - const queryClient = useQueryClient(); const handleBack = () => { const networkId = useGatewayWizardStore.getState().network_id; @@ -21,11 +19,6 @@ export const SetupConfirmationStep = () => { }; const handleFinish = async () => { - await Promise.all([ - queryClient.invalidateQueries({ queryKey: ['gateway'] }), - queryClient.invalidateQueries({ queryKey: ['network'] }), - ]); - await navigate({ to: '/locations', replace: true }); setTimeout(() => { useGatewayWizardStore.getState().reset(); diff --git a/web/src/pages/GatewaySetupPage/steps/SetupGatewayAdaptationStep.tsx b/web/src/pages/GatewaySetupPage/steps/SetupGatewayAdaptationStep.tsx index bf6da47da1..e967b5004f 100644 --- a/web/src/pages/GatewaySetupPage/steps/SetupGatewayAdaptationStep.tsx +++ b/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( From 9e386b59005240c7384b5c891d065bd2e2eb67ba Mon Sep 17 00:00:00 2001 From: Jacek Chmielewski Date: Tue, 3 Mar 2026 13:09:15 +0100 Subject: [PATCH 4/4] move edge query invalidation --- .../pages/EdgeSetupPage/steps/SetupConfirmationStep.tsx | 3 --- .../pages/EdgeSetupPage/steps/SetupEdgeAdoptionStep.tsx | 8 +++++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/web/src/pages/EdgeSetupPage/steps/SetupConfirmationStep.tsx b/web/src/pages/EdgeSetupPage/steps/SetupConfirmationStep.tsx index ffedb5fed3..82120ad3b8 100644 --- a/web/src/pages/EdgeSetupPage/steps/SetupConfirmationStep.tsx +++ b/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(); diff --git a/web/src/pages/EdgeSetupPage/steps/SetupEdgeAdoptionStep.tsx b/web/src/pages/EdgeSetupPage/steps/SetupEdgeAdoptionStep.tsx index 66d998f133..39e5e824d0 100644 --- a/web/src/pages/EdgeSetupPage/steps/SetupEdgeAdoptionStep.tsx +++ b/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(