refactor: introduce input in gql mutations

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

@@ -33,7 +33,7 @@ export default function AddNewAppConnection(props: AddNewAppConnectionProps): Re
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm'));
   const formatMessage = useFormatMessage();
   const [appName, setAppName] = React.useState<string | null>(null);
-  const { data } = useQuery(GET_APPS, { variables: {name: appName } });
+  const { data } = useQuery(GET_APPS, { variables: { name: appName } });
 
   return (
     <Dialog open={true} onClose={onClose} maxWidth="sm" fullWidth>

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

@@ -55,7 +55,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
   const onContextMenuAction = React.useCallback(async (event, action: { [key: string]: string }) => {
     if (action.type === 'delete') {
       await deleteConnection({
-        variables: { id },
+        variables: { input: { id } },
         update: (cache) => {
           const connectionCacheId = cache.identify({
             __typename: 'Connection',
@@ -71,7 +71,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
       enqueueSnackbar(formatMessage('connection.deletedMessage'), { variant: 'success' });
     } else if (action.type === 'test') {
       setVerificationVisible(true);
-      testConnection({ variables: { id } });
+      testConnection({ variables: { input: { id } } });
     }
   }, [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar]);
 

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

@@ -50,12 +50,21 @@ function ChooseAccountSubstep(props: ChooseAccountSubstepProps): React.ReactElem
       loading: testResultLoading,
       refetch: retestConnection
     }
-  ] = useLazyQuery (TEST_CONNECTION, { variables: { id: connection?.id, }});
+  ] = useLazyQuery(
+    TEST_CONNECTION,
+    {
+      variables: {
+        input: { id: connection?.id, }
+      }
+    }
+  );
 
   React.useEffect(() => {
     if (connection?.id) {
       testConnection({
-        variables: { id: connection?.id },
+        variables: {
+          input: { id: connection.id, }
+        }
       });
     }
     // intentionally no dependencies for initial test
@@ -88,7 +97,9 @@ function ChooseAccountSubstep(props: ChooseAccountSubstepProps): React.ReactElem
   React.useEffect(() => {
     if (step.connection?.id) {
       retestConnection({
-        id: step.connection.id,
+        input: {
+          id: step.connection.id,
+        },
       });
     }
   }, [step.connection?.id, retestConnection])

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

@@ -27,8 +27,10 @@ export default function EditorLayout(): React.ReactElement {
   const onFlowNameUpdate = React.useCallback(async (name: string) => {
     await updateFlow({
       variables: {
-        id: flowId,
-        name,
+        input: {
+          id: flowId,
+          name,
+        },
       },
       optimisticResponse: {
         __typename: 'Mutation',

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

@@ -51,8 +51,6 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
     {
       data: stepWithTestExecutionsData,
       called: stepWithTestExecutionsCalled,
-      loading: stepWithTestExecutionsLoading,
-      error: stepWithTestExecutionsError
     },
   ] = useLazyQuery(GET_STEP_WITH_TEST_EXECUTIONS, {
     fetchPolicy: 'network-only',
@@ -62,7 +60,9 @@ export default function FlowStep(props: FlowStepProps): React.ReactElement | nul
     if (!stepWithTestExecutionsCalled && !collapsed && !isTrigger) {
       getStepWithTestExecutions({
         variables: {
-          stepId: step.id,
+          input: {
+            stepId: step.id,
+          },
         },
       });
     }

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

@@ -21,7 +21,7 @@ function FlowStepContextMenu(props: FlowStepContextMenuProps): React.ReactElemen
 
   const deleteActionHandler = React.useCallback(async (event: React.SyntheticEvent) => {
     event.stopPropagation();
-    await deleteStep({ variables: { id: stepId }});
+    await deleteStep({ variables: { input: { id: stepId } } });
   }, [stepId]);
 
   return (

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

@@ -39,8 +39,10 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
   const handleSubmit = React.useCallback(() => {
     executeFlow({
       variables: {
-        stepId: step.id,
-      }
+        input: {
+          stepId: step.id,
+        },
+      },
     })
   }, [onSubmit, step.id]);
   const onToggle = expanded ? onCollapse : onExpand;