refactor: introduce input in gql mutations

packages/backend/src/graphql/schema.graphql

@@ -217,11 +217,25 @@ input DeleteFlowInput {
 }
 
 input CreateStepInput {
-  input: StepInput!
+  id: String
+  previousStepId: String
+  key: String
+  appKey: String
+  connection: StepConnectionInput
+  flow: StepFlowInput
+  parameters: JSONObject
+  previousStep: PreviousStepInput
 }
 
 input UpdateStepInput {
-  input: StepInput!
+  id: String
+  previousStepId: String
+  key: String
+  appKey: String
+  connection: StepConnectionInput
+  flow: StepFlowInput
+  parameters: JSONObject
+  previousStep: PreviousStepInput
 }
 
 input DeleteStepInput {

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,
+        input: {
-        name,
+          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;

packages/web/src/graphql/mutations/create-auth-data.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const CREATE_AUTH_DATA = gql`
-  mutation createAuthData($id: String!) {
+  mutation CreateAuthData($input: CreateAuthDataInput) {
-    createAuthData(id: $id) {
+    createAuthData(input: $input) {
       url
     }
   }

packages/web/src/graphql/mutations/create-connection.ts

@@ -2,10 +2,9 @@ import { gql } from '@apollo/client';
 
 export const CREATE_CONNECTION = gql`
   mutation CreateConnection(
-    $key: AvailableAppsEnumType!
+    $input: CreateConnectionInput
-    $formattedData: JSONObject!
   ) {
-    createConnection(key: $key, formattedData: $formattedData) {
+    createConnection(input: $input) {
       id
       key
       verified

packages/web/src/graphql/mutations/create-flow.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const CREATE_FLOW = gql`
-  mutation createFlow($input: FlowInput) {
+  mutation CreateFlow($input: CreateFlowInput) {
     createFlow(input: $input) {
       id
       name

packages/web/src/graphql/mutations/create-step.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const CREATE_STEP = gql`
-  mutation CreateStep($input: StepInput!) {
+  mutation CreateStep($input: CreateStepInput) {
     createStep(input: $input) {
       id
       type

packages/web/src/graphql/mutations/delete-connection.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const DELETE_CONNECTION = gql`
-  mutation DeleteConnection($id: String!) {
+  mutation DeleteConnection($input: DeleteConnectionInput) {
-    deleteConnection(id: $id)
+    deleteConnection(input: $input)
   }
 `;

packages/web/src/graphql/mutations/delete-step.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const DELETE_STEP = gql`
-  mutation DeleteStep($id: String!) {
+  mutation DeleteStep($input: DeleteStepInput) {
-    deleteStep(id: $id) {
+    deleteStep(input: $input) {
       id
       flow {
         id

packages/web/src/graphql/mutations/execute-flow.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const EXECUTE_FLOW = gql`
-  mutation ExecuteFlow($stepId: String!) {
+  mutation ExecuteFlow($input: ExecuteFlowInput) {
-    executeFlow(stepId: $stepId) {
+    executeFlow(input: $input) {
       step {
         id
         status

packages/web/src/graphql/mutations/reset-connection.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const RESET_CONNECTION = gql`
-  mutation ResetConnection($id: String!) {
+  mutation ResetConnection($input: ResetConnectionInput) {
-    resetConnection(id: $id) {
+    resetConnection(input: $input) {
       id
     }
   }

packages/web/src/graphql/mutations/update-connection.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const UPDATE_CONNECTION = gql`
-  mutation UpdateConnection($id: String!, $formattedData: JSONObject!) {
+  mutation UpdateConnection($input: UpdateConnectionInput) {
-    updateConnection(id: $id, formattedData: $formattedData) {
+    updateConnection(input: $input) {
       id
       key
       verified

packages/web/src/graphql/mutations/update-flow.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const UPDATE_FLOW = gql`
-  mutation UpdateFlow($id: String!, $name: String!) {
+  mutation UpdateFlow($input: UpdateFlowInput) {
-    updateFlow(id: $id, name: $name) {
+    updateFlow(input: $input) {
       id
       name
     }

packages/web/src/graphql/mutations/update-step.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const UPDATE_STEP = gql`
-  mutation UpdateStep($input: StepInput!) {
+  mutation UpdateStep($input: UpdateStepInput) {
     updateStep(input: $input) {
       id
       type

packages/web/src/graphql/mutations/verify-connection.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const VERIFY_CONNECTION = gql`
-  mutation VerifyConnection($id: String!) {
+  mutation VerifyConnection($input: VerifyConnectionInput) {
-    verifyConnection(id: $id) {
+    verifyConnection(input: $input) {
       id
       verified
       formattedData {

packages/web/src/helpers/authenticationSteps.ts

@@ -10,7 +10,7 @@ enum AuthenticationSteps {
 
 const processMutation = async (step: IAuthenticationStep, variables: IJSONObject) => {
   const mutation = MUTATIONS[step.name];
-  const mutationResponse = await apolloClient.mutate({ mutation, variables });
+  const mutationResponse = await apolloClient.mutate({ mutation, variables: { input: variables } });
   const responseData = mutationResponse.data[step.name];
 
   return responseData;