fixes http request variable result collision

Author: empav

src/features/executions/ExecutorRegistry.ts

@@ -21,7 +21,7 @@ export type NodeExecutor<TData = Record<string, unknown>> = (
 const executorRegistry: Record<NodeType, NodeExecutor> = {
   [NodeType.MANUAL_TRIGGER]: manualTriggerExecutor,
   [NodeType.INITIAL]: manualTriggerExecutor,
-  [NodeType.HTTP_REQUEST]: HttpRequestExecutor,
+  [NodeType.HTTP_REQUEST]: HttpRequestExecutor as NodeExecutor,
 };
 
 export const getExecutor = (type: NodeType): NodeExecutor => {

src/features/executions/components/http-request/Dialog.tsx

@@ -33,6 +33,13 @@ const formSchema = z.object({
   endpoint: z.url({ message: "Enter a valid url" }),
   method: z.enum(["GET", "POST", "PUT", "PATCH", "DELETE"]),
   body: z.string().optional(),
+  variableName: z
+    .string()
+    .min(1, { message: "variableName is required" })
+    .regex(/^[A-Za-z_$][A-Za-z0-9_$]*$/, {
+      message:
+        "variableName must start with a letter or underscore and contain only letters, numbers or underscores",
+    }),
 });
 
 export type HttpRequestDialogFormValues = z.infer<typeof formSchema>;
@@ -53,9 +60,10 @@ export const HttpRequestDialog = ({
   const form = useForm({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      endpoint: defaultValues?.endpoint || "",
-      method: defaultValues?.method || "GET",
-      body: defaultValues?.body || "",
+      endpoint: defaultValues.endpoint || "",
+      method: defaultValues.method || "GET",
+      body: defaultValues.body || "",
+      variableName: defaultValues.variableName || "",
     },
   });
 
@@ -70,9 +78,10 @@ export const HttpRequestDialog = ({
   useEffect(() => {
     if (open) {
       form.reset({
-        endpoint: defaultValues.endpoint,
-        method: defaultValues.method,
-        body: defaultValues.body,
+        variableName: defaultValues.variableName || "",
+        endpoint: defaultValues.endpoint || "",
+        method: defaultValues.method || "GET",
+        body: defaultValues.body || "",
       });
     }
   }, [defaultValues, form, open]);
@@ -91,6 +100,22 @@ export const HttpRequestDialog = ({
             onSubmit={form.handleSubmit(handleSubmit)}
             className="space-y-8 mt-4"
           >
+            <FormField
+              control={form.control}
+              name="variableName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Variable Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="variableName" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Use this name to reference the result in other nodes
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
             <FormField
               control={form.control}
               name="method"

src/features/executions/components/http-request/Executor.ts

@@ -8,37 +8,46 @@ export const HttpRequestExecutor: NodeExecutor<HttpRequestNodeData> = async ({
   context,
   step,
 }) => {
+  if (!data.variableName) {
+    throw new NonRetriableError("[Http request]: Variable name not configured");
+  }
   if (!data.endpoint) {
     throw new NonRetriableError("[Http request]: No endopoint configured");
   }
+  if (!data.method) {
+    throw new NonRetriableError("[Http request]: No method configured");
+  }
 
-  const result = await step.run("http-request", async () => {
-    // biome-ignore lint/style/noNonNullAssertion: <see line 13-14-15>
-    const endpoint = data.endpoint!;
+  return await step.run("http-request", async () => {
     const method = data.method || "GET";
 
     const options: Options = {
       method,
+      headers: {
+        "Content-Type": "application/json",
+      },
     };
     if (["POST", "PATCH", "PUT", "DELETE"].includes(method)) {
       options.body = data.body;
     }
 
-    const response = await ky(endpoint, options);
+    const response = await ky(data.endpoint, options);
     const contentType = response.headers.get("content-type");
     const responseData = contentType?.includes("application/json")
       ? await response.json()
-      : response.text();
+      : await response.text();
 
-    return {
-      ...context,
+    const responsePayload = {
       httpResponse: {
         status: response.status,
         statusText: response.statusText,
         data: responseData,
       },
     };
-  });
 
-  return result;
+    return {
+      ...context,
+      [data.variableName]: responsePayload,
+    };
+  });
 };

src/features/executions/components/http-request/Node.tsx

@@ -6,63 +6,59 @@ import BaseExecutionNode from "../BaseExecutionNode";
 import { GlobeIcon } from "lucide-react";
 import { type HttpRequestDialogFormValues, HttpRequestDialog } from "./Dialog";
 
-export type HttpRequestNodeData = {
-  endpoint?: string;
-  method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
-  body?: string;
-};
+export type HttpRequestNodeData = HttpRequestDialogFormValues;
 
-type HttpRequestNodeType = Node<HttpRequestNodeData>;
+export const HttpRequestNode = memo(
+  (props: NodeProps<Node<HttpRequestNodeData>>) => {
+    const [open, setOpen] = useState(false);
 
-export const HttpRequestNode = memo((props: NodeProps<HttpRequestNodeType>) => {
-  const [open, setOpen] = useState(false);
+    const { setNodes } = useReactFlow();
 
-  const { setNodes } = useReactFlow();
+    const description = props.data?.endpoint
+      ? `${props.data.method || "GET"}: ${props.data.endpoint}`
+      : "Not configured";
 
-  const description = props.data?.endpoint
-    ? `${props.data.method || "GET"}: ${props.data.endpoint}`
-    : "Not configured";
+    const onSettings = () => setOpen(true);
 
-  const onSettings = () => setOpen(true);
+    const onSubmit = (values: HttpRequestDialogFormValues) => {
+      setNodes((nodes) =>
+        nodes.map((node) => {
+          if (node.id === props.id) {
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                ...values,
+              },
+            };
+          }
+          return node;
+        }),
+      );
+    };
 
-  const onSubmit = (values: HttpRequestDialogFormValues) => {
-    setNodes((nodes) =>
-      nodes.map((node) => {
-        if (node.id === props.id) {
-          return {
-            ...node,
-            data: {
-              ...node.data,
-              ...values,
-            },
-          };
-        }
-        return node;
-      }),
+    return (
+      <>
+        <HttpRequestDialog
+          open={open}
+          onOpenChange={setOpen}
+          onSubmit={onSubmit}
+          defaultValues={props.data}
+        />
+        <BaseExecutionNode
+          {...props}
+          icon={GlobeIcon}
+          name="Http Request"
+          description={description}
+          onSettings={onSettings}
+          onDoubleClick={onSettings}
+          showToolbar
+          status="initial"
+        />
+      </>
     );
-  };
-
-  return (
-    <>
-      <HttpRequestDialog
-        open={open}
-        onOpenChange={setOpen}
-        onSubmit={onSubmit}
-        defaultValues={props.data}
-      />
-      <BaseExecutionNode
-        {...props}
-        icon={GlobeIcon}
-        name="Http Request"
-        description={description}
-        onSettings={onSettings}
-        onDoubleClick={onSettings}
-        showToolbar
-        status="initial"
-      />
-    </>
-  );
-});
+  },
+);
 
 HttpRequestNode.displayName = "HttpRequestNode";