refactor: rewrite useDynamicData with RQ

packages/backend/src/graphql/queries/get-dynamic-data.js

@@ -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;

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;

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 {

packages/web/src/graphql/queries/get-dynamic-data.js

@@ -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)
-  }
-`;

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: {
+        dynamicDataKey: key,
-          stepId,
+        parameters: rest,
-          ...computedVariables,
-        },
       });
     }
   }, [getDynamicData, stepId, schema, computedVariables]);
+
   return {
-    called,
+    data: data?.data,
-    data: data?.getDynamicData,
+    loading: isDynamicDataPending,
-    loading,
   };
 }
 export default useDynamicData;