From ea1a63f7ddf706621c8f70c668cb721f5bc3837e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=B1dvan=20Akca?= Date: Wed, 10 Apr 2024 17:17:38 +0200 Subject: [PATCH] refactor: rewrite useDynamicData with RQ --- .../src/graphql/queries/get-dynamic-data.js | 65 ------------------- .../backend/src/graphql/query-resolvers.js | 2 - packages/backend/src/graphql/schema.graphql | 5 -- .../src/graphql/queries/get-dynamic-data.js | 10 --- packages/web/src/hooks/useDynamicData.js | 41 ++++++++---- 5 files changed, 30 insertions(+), 93 deletions(-) delete mode 100644 packages/backend/src/graphql/queries/get-dynamic-data.js delete mode 100644 packages/web/src/graphql/queries/get-dynamic-data.js diff --git a/packages/backend/src/graphql/queries/get-dynamic-data.js b/packages/backend/src/graphql/queries/get-dynamic-data.js deleted file mode 100644 index 731b7d5d..00000000 --- a/packages/backend/src/graphql/queries/get-dynamic-data.js +++ /dev/null @@ -1,65 +0,0 @@ -import App from '../../models/app.js'; -import Step from '../../models/step.js'; -import ExecutionStep from '../../models/execution-step.js'; -import globalVariable from '../../helpers/global-variable.js'; -import computeParameters from '../../helpers/compute-parameters.js'; - -const getDynamicData = async (_parent, params, context) => { - const conditions = context.currentUser.can('update', 'Flow'); - const userSteps = context.currentUser.$relatedQuery('steps'); - const allSteps = Step.query(); - const stepBaseQuery = conditions.isCreator ? userSteps : allSteps; - - const step = await stepBaseQuery - .clone() - .withGraphFetched({ - connection: true, - flow: true, - }) - .findById(params.stepId); - - if (!step) return null; - - const connection = step.connection; - - if (!connection || !step.appKey) return null; - - const flow = step.flow; - const app = await App.findOneByKey(step.appKey); - const $ = await globalVariable({ connection, app, flow, step }); - - const command = app.dynamicData.find((data) => data.key === params.key); - - // apply run-time parameters that're not persisted yet - for (const parameterKey in params.parameters) { - const parameterValue = params.parameters[parameterKey]; - $.step.parameters[parameterKey] = parameterValue; - } - - const lastExecution = await flow.$relatedQuery('lastExecution'); - const lastExecutionId = lastExecution?.id; - - const priorExecutionSteps = lastExecutionId - ? await ExecutionStep.query().where({ - execution_id: lastExecutionId, - }) - : []; - - // compute variables in parameters - const computedParameters = computeParameters( - $.step.parameters, - priorExecutionSteps - ); - - $.step.parameters = computedParameters; - - const fetchedData = await command.run($); - - if (fetchedData.error) { - throw new Error(JSON.stringify(fetchedData.error)); - } - - return fetchedData.data; -}; - -export default getDynamicData; diff --git a/packages/backend/src/graphql/query-resolvers.js b/packages/backend/src/graphql/query-resolvers.js index 1c4d82ad..00b67658 100644 --- a/packages/backend/src/graphql/query-resolvers.js +++ b/packages/backend/src/graphql/query-resolvers.js @@ -1,11 +1,9 @@ import getAppAuthClient from './queries/get-app-auth-client.ee.js'; import getConnectedApps from './queries/get-connected-apps.js'; -import getDynamicData from './queries/get-dynamic-data.js'; const queryResolvers = { getAppAuthClient, getConnectedApps, - getDynamicData, }; export default queryResolvers; diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql index 36ab9a9b..1fee162a 100644 --- a/packages/backend/src/graphql/schema.graphql +++ b/packages/backend/src/graphql/schema.graphql @@ -1,11 +1,6 @@ type Query { getAppAuthClient(id: String!): AppAuthClient getConnectedApps(name: String): [App] - getDynamicData( - stepId: String! - key: String! - parameters: JSONObject - ): JSONObject } type Mutation { diff --git a/packages/web/src/graphql/queries/get-dynamic-data.js b/packages/web/src/graphql/queries/get-dynamic-data.js deleted file mode 100644 index f589beee..00000000 --- a/packages/web/src/graphql/queries/get-dynamic-data.js +++ /dev/null @@ -1,10 +0,0 @@ -import { gql } from '@apollo/client'; -export const GET_DYNAMIC_DATA = gql` - query GetDynamicData( - $stepId: String! - $key: String! - $parameters: JSONObject - ) { - getDynamicData(stepId: $stepId, key: $key, parameters: $parameters) - } -`; diff --git a/packages/web/src/hooks/useDynamicData.js b/packages/web/src/hooks/useDynamicData.js index e6ad5549..c2861485 100644 --- a/packages/web/src/hooks/useDynamicData.js +++ b/packages/web/src/hooks/useDynamicData.js @@ -1,12 +1,16 @@ import * as React from 'react'; -import { useLazyQuery } from '@apollo/client'; import { useFormContext } from 'react-hook-form'; import set from 'lodash/set'; +import { useMutation } from '@tanstack/react-query'; import isEqual from 'lodash/isEqual'; -import { GET_DYNAMIC_DATA } from 'graphql/queries/get-dynamic-data'; + +import api from 'helpers/api'; + const variableRegExp = /({.*?})/; + function computeArguments(args, getValues) { const initialValue = {}; + return args.reduce((result, { name, value }) => { const isVariable = variableRegExp.test(value); if (isVariable) { @@ -17,6 +21,7 @@ function computeArguments(args, getValues) { set(result, name, computedValue); return result; } + set(result, name, value); return result; }, initialValue); @@ -30,8 +35,22 @@ function computeArguments(args, getValues) { */ function useDynamicData(stepId, schema) { const lastComputedVariables = React.useRef({}); - const [getDynamicData, { called, data, loading }] = - useLazyQuery(GET_DYNAMIC_DATA); + + const { + data, + isPending: isDynamicDataPending, + mutate: getDynamicData, + } = useMutation({ + mutationFn: async (variables) => { + const { data } = await api.post( + `/v1/steps/${stepId}/dynamic-data`, + variables, + ); + + return data; + }, + }); + const { getValues } = useFormContext(); const formValues = getValues(); /** @@ -60,6 +79,7 @@ function useDynamicData(stepId, schema) { * `getValues` is for convenience as it supports paths for fields like `getValues('foo.bar.baz')`. */ }, [schema, formValues, getValues]); + React.useEffect(() => { if ( schema.type === 'dropdown' && @@ -67,18 +87,17 @@ function useDynamicData(stepId, schema) { schema.source && computedVariables ) { + const { key, ...rest } = computedVariables; getDynamicData({ - variables: { - stepId, - ...computedVariables, - }, + dynamicDataKey: key, + parameters: rest, }); } }, [getDynamicData, stepId, schema, computedVariables]); + return { - called, - data: data?.getDynamicData, - loading, + data: data?.data, + loading: isDynamicDataPending, }; } export default useDynamicData;