feat: unify react-query query keys

packages/web/src/components/ChooseConnectionSubstep/index.jsx

@@ -186,7 +186,7 @@ function ChooseConnectionSubstep(props) {
           });
 
           await queryClient.invalidateQueries({
-            queryKey: ['stepConnection', step.id],
+            queryKey: ['steps', step.id, 'connection'],
           });
         }
       }

packages/web/src/components/DeleteRoleButton/index.ee.jsx

@@ -25,7 +25,7 @@ function DeleteRoleButton(props) {
   const handleConfirm = React.useCallback(async () => {
     try {
       await deleteRole();
-      queryClient.invalidateQueries({ queryKey: ['roles'] });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'roles'] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteRoleButton.successfullyDeleted'), {
         variant: 'success',

packages/web/src/components/DeleteUserButton/index.ee.jsx

@@ -25,7 +25,6 @@ function DeleteUserButton(props) {
     try {
       await deleteUser();
       queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
-      queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), {
         variant: 'success',

packages/web/src/components/Editor/index.jsx

@@ -39,9 +39,9 @@ function Editor(props) {
 
       await updateStep({ variables: { input: mutationInput } });
       await queryClient.invalidateQueries({
-        queryKey: ['stepConnection', step.id],
+        queryKey: ['steps', step.id, 'connection'],
       });
-      await queryClient.invalidateQueries({ queryKey: ['flow', flow.id] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
     },
     [updateStep, flow.id, queryClient],
   );
@@ -63,7 +63,7 @@ function Editor(props) {
 
       const createdStepId = createdStep.data.createStep.id;
       setCurrentStepId(createdStepId);
-      await queryClient.invalidateQueries({ queryKey: ['flow', flow.id] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
     },
     [createStep, flow.id, queryClient],
   );

packages/web/src/components/EditorLayout/index.jsx

@@ -48,7 +48,7 @@ export default function EditorLayout() {
         },
       });
 
-      await queryClient.invalidateQueries({ queryKey: ['flow', flowId] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
     [flowId, queryClient],
   );
@@ -71,7 +71,7 @@ export default function EditorLayout() {
         },
       });
 
-      await queryClient.invalidateQueries({ queryKey: ['flow', flowId] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
     [flowId, queryClient],
   );

packages/web/src/components/FlowContextMenu/index.jsx

@@ -28,7 +28,9 @@ function ContextMenu(props) {
       variables: { input: { id: flowId } },
     });
 
-    await queryClient.invalidateQueries({ queryKey: ['appFlows', appKey] });
+    await queryClient.invalidateQueries({
+      queryKey: ['apps', appKey, 'flows'],
+    });
     enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
       variant: 'success',
       SnackbarProps: {
@@ -54,7 +56,9 @@ function ContextMenu(props) {
       },
     });
 
-    await queryClient.invalidateQueries({ queryKey: ['appFlows', appKey] });
+    await queryClient.invalidateQueries({
+      queryKey: ['apps', appKey, 'flows'],
+    });
     enqueueSnackbar(formatMessage('flow.successfullyDeleted'), {
       variant: 'success',
     });

packages/web/src/components/FlowStepContextMenu/index.jsx

@@ -19,7 +19,7 @@ function FlowStepContextMenu(props) {
     async (event) => {
       event.stopPropagation();
       await deleteStep({ variables: { input: { id: stepId } } });
-      await queryClient.invalidateQueries({ queryKey: ['flow', flowId] });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
     [stepId, queryClient],
   );

packages/web/src/components/TestSubstep/index.jsx

@@ -82,7 +82,7 @@ function TestSubstep(props) {
     });
 
     await queryClient.invalidateQueries({
-      queryKey: ['flow', flowId],
+      queryKey: ['flows', flowId],
     });
   }, [onSubmit, onContinue, isCompleted, queryClient, flowId]);
 

packages/web/src/components/UsageDataInformation/index.ee.jsx

@@ -94,7 +94,7 @@ export default function UsageDataInformation() {
 
   React.useEffect(() => {
     queryClient.invalidateQueries({
-      queryKey: ['planAndUsage', currentUserId],
+      queryKey: ['users', currentUserId, 'planAndUsage'],
     });
   }, [subscription, queryClient, currentUserId]);