refactor: introduce input in gql mutations

2022-03-08 12:20:34 +01:00
parent f5f7a998ca
commit 030d886cf7
21 changed files with 67 additions and 39 deletions
--- a/packages/backend/src/graphql/schema.graphql
+++ b/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 {
--- a/packages/web/src/components/AddNewAppConnection/index.tsx
+++ b/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>
--- a/packages/web/src/components/AppConnectionRow/index.tsx
+++ b/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]);

--- a/packages/web/src/components/ChooseAccountSubstep/index.tsx
+++ b/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])
--- a/packages/web/src/components/EditorLayout/index.tsx
+++ b/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',
--- a/packages/web/src/components/FlowStep/index.tsx
+++ b/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,
+          },
        },
      });
    }
--- a/packages/web/src/components/FlowStepContextMenu/index.tsx
+++ b/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 (
--- a/packages/web/src/components/TestSubstep/index.tsx
+++ b/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;
--- a/packages/web/src/graphql/mutations/create-auth-data.ts
+++ b/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!) {
-    createAuthData(id: $id) {
+  mutation CreateAuthData($input: CreateAuthDataInput) {
+    createAuthData(input: $input) {
      url
    }
  }
--- a/packages/web/src/graphql/mutations/create-connection.ts
+++ b/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!
-    $formattedData: JSONObject!
+    $input: CreateConnectionInput
  ) {
-    createConnection(key: $key, formattedData: $formattedData) {
+    createConnection(input: $input) {
      id
      key
      verified
--- a/packages/web/src/graphql/mutations/create-flow.ts
+++ b/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
--- a/packages/web/src/graphql/mutations/create-step.ts
+++ b/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
--- a/packages/web/src/graphql/mutations/delete-connection.ts
+++ b/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!) {
-    deleteConnection(id: $id)
+  mutation DeleteConnection($input: DeleteConnectionInput) {
+    deleteConnection(input: $input)
  }
 `;
--- a/packages/web/src/graphql/mutations/delete-step.ts
+++ b/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!) {
-    deleteStep(id: $id) {
+  mutation DeleteStep($input: DeleteStepInput) {
+    deleteStep(input: $input) {
      id
      flow {
        id
--- a/packages/web/src/graphql/mutations/execute-flow.ts
+++ b/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!) {
-    executeFlow(stepId: $stepId) {
+  mutation ExecuteFlow($input: ExecuteFlowInput) {
+    executeFlow(input: $input) {
      step {
        id
        status
--- a/packages/web/src/graphql/mutations/reset-connection.ts
+++ b/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!) {
-    resetConnection(id: $id) {
+  mutation ResetConnection($input: ResetConnectionInput) {
+    resetConnection(input: $input) {
      id
    }
  }
--- a/packages/web/src/graphql/mutations/update-connection.ts
+++ b/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!) {
-    updateConnection(id: $id, formattedData: $formattedData) {
+  mutation UpdateConnection($input: UpdateConnectionInput) {
+    updateConnection(input: $input) {
      id
      key
      verified
--- a/packages/web/src/graphql/mutations/update-flow.ts
+++ b/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!) {
-    updateFlow(id: $id, name: $name) {
+  mutation UpdateFlow($input: UpdateFlowInput) {
+    updateFlow(input: $input) {
      id
      name
    }
--- a/packages/web/src/graphql/mutations/update-step.ts
+++ b/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
--- a/packages/web/src/graphql/mutations/verify-connection.ts
+++ b/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!) {
-    verifyConnection(id: $id) {
+  mutation VerifyConnection($input: VerifyConnectionInput) {
+    verifyConnection(input: $input) {
      id
      verified
      formattedData {
--- a/packages/web/src/helpers/authenticationSteps.ts
+++ b/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;