fix: do not update step on initial render

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

@@ -50,10 +50,9 @@ export default function Editor(props: EditorProps): React.ReactElement {
   const { flow } = props;
 
   const onStepChange = React.useCallback((step: any) => {
-    const mutationInput = {
+    const mutationInput: Record<string, unknown> = {
       id: step.id,
       key: step.key,
-      appKey: step.appKey,
       previousStepId: step.previousStepId,
       connection: {
         id: step.connection?.id
@@ -63,6 +62,10 @@ export default function Editor(props: EditorProps): React.ReactElement {
       },
     };
 
+    if (step.appKey) {
+      mutationInput.appKey = step.appKey;
+    }
+
     updateStep({ variables: { input: mutationInput } });
   }, [updateStep, flow.id]);
 

packages/web/src/components/FlowStep/index.tsx

@@ -37,6 +37,7 @@ const getOption = (options: Record<string, unknown>[], appKey: string) => option
 export default function FlowStep(props: FlowStepProps): React.ReactElement | null {
   const { collapsed, index, onChange } = props;
   const [step, setStep] = React.useState<Step>(props.step);
+  const initialRender = React.useRef<boolean>(true);
   const formatMessage = useFormatMessage();
   const [currentSubstep, setCurrentSubstep] = React.useState<number | null>(0);
   const { data } = useQuery(GET_APPS)
@@ -44,11 +45,24 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
 
   // emit the step change to the parent component
   React.useEffect(() => {
-    onChange?.(step);
+    if (!initialRender.current) {
+      onChange?.(step);
+    } else {
+      initialRender.current = false;
+    }
   }, [step, onChange]);
 
   const appAndEventOptions = React.useMemo(() => apps?.map(optionGenerator), [apps]);
 
+  const onAppAndEventChange = React.useCallback((event: React.SyntheticEvent, selectedOption: unknown) => {
+    if (typeof selectedOption === 'object') {
+      const typedSelectedOption = selectedOption as { value: string; };
+      const option: { value: string } = typedSelectedOption;
+      const appKey = option.value as string;
+      setStep((step) => ({ ...step, appKey }));
+    }
+  }, []);
+
   if  (!apps) return null;
 
   const app = apps.find((currentApp: App) => currentApp.key === step.appKey);
@@ -58,16 +72,6 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
 
   const toggleSubstep = (substepIndex: number) => setCurrentSubstep((value) => value !== substepIndex ? substepIndex : null);
 
-  const onAppAndEventChange = (event: React.SyntheticEvent, selectedOption: unknown) => {
-    if (typeof selectedOption === 'object') {
-      const typedSelectedOption = selectedOption as { value: string; };
-      const option: { value: string } = typedSelectedOption;
-      const appKey = option.value as string;
-      const updatedStep = { ...step, appKey };
-      setStep(updatedStep);
-    }
-  }
-
   return (
     <Wrapper elevation={collapsed ? 1 : 4} onClick={onOpen}>
       <Header collapsed={collapsed}>

packages/web/src/graphql/queries/get-apps.ts

@@ -3,25 +3,71 @@ import { gql } from '@apollo/client';
 export const GET_APPS = gql`
   query GetApps($name: String) {
     getApps(name: $name) {
-      key
       name
+      key
       iconUrl
       docUrl
       primaryColor
+      connectionCount
       fields {
         key
         label
         type
         required
         readOnly
+        value
         placeholder
         description
         docUrl
         clickToCopy
       }
+      authenticationSteps {
+        step
+        type
+        name
+        arguments {
+          name
+          value
+          type
+          properties {
+            name
+            value
+          }
+        }
+      }
+      reconnectionSteps {
+        step
+        type
+        name
+        arguments {
+          name
+          value
+          type
+          properties {
+            name
+            value
+          }
+        }
+      }
       connections {
         id
       }
+      triggers {
+        name
+        key
+        description
+        subSteps {
+          name
+        }
+      }
+      actions {
+        name
+        key
+        description
+        subSteps {
+          name
+        }
+      }
     }
   }
 `;