invalidate query after creating version to show updated list of version

PROCEED-Labs · Oct 19, 2023 · 7bad7e6 · 7bad7e6
1 parent 1a17c07
commit 7bad7e6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/src/management-system-v2/app/(dashboard)/processes/[processId]/page.tsx b/src/management-system-v2/app/(dashboard)/processes/[processId]/page.tsx
@@ -7,7 +7,7 @@ import Modeler from '@/components/modeler';
 import cn from 'classnames';
 import Content from '@/components/content';
 import Overlay from './overlay';
-import { useGetAsset } from '@/lib/fetch-data';
+import { useGetAsset, useInvalidateAsset } from '@/lib/fetch-data';
 import {
   Breadcrumb,
   BreadcrumbProps,
@@ -40,24 +40,23 @@ const Processes: FC<ProcessProps> = () => {
   const [closed, setClosed] = useState(false);
   const router = useRouter();
   const modeler = useModelerStateStore((state) => state.modeler);
-  const {
-    isSuccess,
-    data: process,
-    refetch: refetchProcess,
-    isLoading: processIsLoading,
-  } = useGetAsset('/process/{definitionId}', {
+  const { data: process, isLoading: processIsLoading } = useGetAsset('/process/{definitionId}', {
     params: { path: { definitionId: processId as string } },
   });
-  const {
-    data: processes,
-    isLoading: processesIsLoading,
-    isError: processesIsError,
-    isSuccess: processesIsSuccess,
-  } = useGetAsset('/process', {
+  const { data: processes } = useGetAsset('/process', {
     params: {
       query: { noBpmn: true },
     },
   });
+
+  const invalidateVersions = useInvalidateAsset('/process/{definitionId}/versions', {
+    params: { path: { definitionId: processId as string } },
+  });
+
+  const invalidateProcesses = useInvalidateAsset('/process/{definitionId}', {
+    params: { path: { definitionId: processId as string } },
+  });
+
   const {
     token: { fontSizeHeading1 },
   } = theme.useToken();
@@ -88,6 +87,8 @@ const Processes: FC<ProcessProps> = () => {
         values.versionName,
         values.versionDescription,
       );
+      await invalidateVersions();
+      await invalidateProcesses();
     }
   };
 

diff --git a/src/management-system-v2/components/modeler-toolbar.tsx b/src/management-system-v2/components/modeler-toolbar.tsx
@@ -26,6 +26,8 @@ import ProcessExportModal from './process-export';
 
 import { createNewProcessVersion } from '@/lib/helpers/processVersioning';
 import VersionCreationButton from './version-creation-button';
+import { useQueryClient } from '@tanstack/react-query';
+import { useInvalidateAsset } from '@/lib/fetch-data';
 
 type ModelerToolbarProps = {
   onOpenXmlEditor: () => void;
@@ -41,9 +43,18 @@ const ModelerToolbar: React.FC<ModelerToolbarProps> = ({ onOpenXmlEditor }) => {
   const modeler = useModelerStateStore((state) => state.modeler);
   const selectedElementId = useModelerStateStore((state) => state.selectedElementId);
 
-  // const [index, setIndex] = useState(0);
   const { processId } = useParams();
 
+  const invalidateVersions = useInvalidateAsset('/process/{definitionId}/versions', {
+    params: { path: { definitionId: processId as string } },
+  });
+
+  const invalidateProcesses = useInvalidateAsset('/process/{definitionId}', {
+    params: { path: { definitionId: processId as string } },
+  });
+
+  // const [index, setIndex] = useState(0);
+
   let selectedElement;
 
   if (modeler) {
@@ -66,6 +77,8 @@ const ModelerToolbar: React.FC<ModelerToolbarProps> = ({ onOpenXmlEditor }) => {
         values.versionName,
         values.versionDescription,
       );
+      await invalidateVersions();
+      await invalidateProcesses();
     }
   };
   const handlePropertiesPanelToggle = () => {