improvement(tools): use react query to fetch child workflow schema, avoid refetch and duplicated utils

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx

@@ -29,7 +29,7 @@ import {
   extractPathFromOutputId,
   parseOutputContentSafely,
 } from '@/lib/core/utils/response-format'
-import { normalizeInputFormatValue } from '@/lib/workflows/input-format-utils'
+import { normalizeInputFormatValue } from '@/lib/workflows/input-format'
 import { StartBlockPath, TriggerUtils } from '@/lib/workflows/triggers/triggers'
 import { START_BLOCK_RESERVED_FIELDS } from '@/lib/workflows/types'
 import {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx

@@ -22,7 +22,7 @@ import {
 import { Skeleton } from '@/components/ui'
 import type { AgentAuthentication, AgentCapabilities } from '@/lib/a2a/types'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import { normalizeInputFormatValue } from '@/lib/workflows/input-format-utils'
+import { normalizeInputFormatValue } from '@/lib/workflows/input-format'
 import { StartBlockPath, TriggerUtils } from '@/lib/workflows/triggers/triggers'
 import {
   useA2AAgentByWorkflow,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx

@@ -14,7 +14,7 @@ import {
 } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
 import { generateToolInputSchema, sanitizeToolName } from '@/lib/mcp/workflow-tool-schema'
-import { normalizeInputFormatValue } from '@/lib/workflows/input-format-utils'
+import { normalizeInputFormatValue } from '@/lib/workflows/input-format'
 import { isValidStartBlockType } from '@/lib/workflows/triggers/trigger-utils'
 import type { InputFormatField } from '@/lib/workflows/types'
 import {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { Badge, Input } from '@/components/emcn'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
@@ -7,39 +7,7 @@ import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/compon
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
-
-/**
- * Represents a field in the input format configuration
- */
-interface InputFormatField {
-  name: string
-  type?: string
-}
-
-/**
- * Represents an input trigger block structure
- */
-interface InputTriggerBlock {
-  type: 'input_trigger' | 'start_trigger'
-  subBlocks?: {
-    inputFormat?: { value?: InputFormatField[] }
-  }
-}
-
-/**
- * Represents a legacy starter block structure
- */
-interface StarterBlockLegacy {
-  type: 'starter'
-  subBlocks?: {
-    inputFormat?: { value?: InputFormatField[] }
-  }
-  config?: {
-    params?: {
-      inputFormat?: InputFormatField[]
-    }
-  }
-}
+import { useWorkflowInputFields } from '@/hooks/queries/workflows'
 
 /**
  * Props for the InputMappingField component
@@ -70,73 +38,6 @@ interface InputMappingProps {
   disabled?: boolean
 }
 
-/**
- * Type guard to check if a value is an InputTriggerBlock
- * @param value - The value to check
- * @returns True if the value is an InputTriggerBlock
- */
-function isInputTriggerBlock(value: unknown): value is InputTriggerBlock {
-  const type = (value as { type?: unknown }).type
-  return (
-    !!value && typeof value === 'object' && (type === 'input_trigger' || type === 'start_trigger')
-  )
-}
-
-/**
- * Type guard to check if a value is a StarterBlockLegacy
- * @param value - The value to check
- * @returns True if the value is a StarterBlockLegacy
- */
-function isStarterBlock(value: unknown): value is StarterBlockLegacy {
-  return !!value && typeof value === 'object' && (value as { type?: unknown }).type === 'starter'
-}
-
-/**
- * Type guard to check if a value is an InputFormatField
- * @param value - The value to check
- * @returns True if the value is an InputFormatField
- */
-function isInputFormatField(value: unknown): value is InputFormatField {
-  if (typeof value !== 'object' || value === null) return false
-  if (!('name' in value)) return false
-  const { name, type } = value as { name: unknown; type?: unknown }
-  if (typeof name !== 'string' || name.trim() === '') return false
-  if (type !== undefined && typeof type !== 'string') return false
-  return true
-}
-
-/**
- * Extracts input format fields from workflow blocks
- * @param blocks - The workflow blocks to extract from
- * @returns Array of input format fields or null if not found
- */
-function extractInputFormatFields(blocks: Record<string, unknown>): InputFormatField[] | null {
-  const triggerEntry = Object.entries(blocks).find(([, b]) => isInputTriggerBlock(b))
-  if (triggerEntry && isInputTriggerBlock(triggerEntry[1])) {
-    const inputFormat = triggerEntry[1].subBlocks?.inputFormat?.value
-    if (Array.isArray(inputFormat)) {
-      return (inputFormat as unknown[])
-        .filter(isInputFormatField)
-        .map((f) => ({ name: f.name, type: f.type }))
-    }
-  }
-
-  const starterEntry = Object.entries(blocks).find(([, b]) => isStarterBlock(b))
-  if (starterEntry && isStarterBlock(starterEntry[1])) {
-    const starter = starterEntry[1]
-    const subBlockFormat = starter.subBlocks?.inputFormat?.value
-    const legacyParamsFormat = starter.config?.params?.inputFormat
-    const chosen = Array.isArray(subBlockFormat) ? subBlockFormat : legacyParamsFormat
-    if (Array.isArray(chosen)) {
-      return (chosen as unknown[])
-        .filter(isInputFormatField)
-        .map((f) => ({ name: f.name, type: f.type }))
-    }
-  }
-
-  return null
-}
-
 /**
  * InputMapping component displays and manages input field mappings for workflow execution
  * @param props - The component props
@@ -168,62 +69,10 @@ export function InputMapping({
   const inputRefs = useRef<Map<string, HTMLInputElement>>(new Map())
   const overlayRefs = useRef<Map<string, HTMLDivElement>>(new Map())
 
-  const [childInputFields, setChildInputFields] = useState<InputFormatField[]>([])
-  const [isLoading, setIsLoading] = useState(false)
+  const workflowId = typeof selectedWorkflowId === 'string' ? selectedWorkflowId : undefined
+  const { data: childInputFields = [], isLoading } = useWorkflowInputFields(workflowId)
   const [collapsedFields, setCollapsedFields] = useState<Record<string, boolean>>({})
 
-  useEffect(() => {
-    let isMounted = true
-    const controller = new AbortController()
-
-    async function fetchChildSchema() {
-      if (!selectedWorkflowId) {
-        if (isMounted) {
-          setChildInputFields([])
-          setIsLoading(false)
-        }
-        return
-      }
-
-      try {
-        if (isMounted) setIsLoading(true)
-
-        const res = await fetch(`/api/workflows/${selectedWorkflowId}`, {
-          signal: controller.signal,
-        })
-
-        if (!res.ok) {
-          if (isMounted) {
-            setChildInputFields([])
-            setIsLoading(false)
-          }
-          return
-        }
-
-        const { data } = await res.json()
-        const blocks = (data?.state?.blocks as Record<string, unknown>) || {}
-        const fields = extractInputFormatFields(blocks)
-
-        if (isMounted) {
-          setChildInputFields(fields || [])
-          setIsLoading(false)
-        }
-      } catch (error) {
-        if (isMounted) {
-          setChildInputFields([])
-          setIsLoading(false)
-        }
-      }
-    }
-
-    fetchChildSchema()
-
-    return () => {
-      isMounted = false
-      controller.abort()
-    }
-  }, [selectedWorkflowId])
-
   const valueObj: Record<string, string> = useMemo(() => {
     if (isPreview && previewValue && typeof previewValue === 'object') {
       return previewValue as Record<string, string>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx

@@ -1,7 +1,6 @@
 import type React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { useQuery } from '@tanstack/react-query'
 import { Loader2, WrenchIcon, XIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
@@ -61,7 +60,7 @@ import {
   useCustomTools,
 } from '@/hooks/queries/custom-tools'
 import { useForceRefreshMcpTools, useMcpServers, useStoredMcpTools } from '@/hooks/queries/mcp'
-import { useWorkflows } from '@/hooks/queries/workflows'
+import { useWorkflowInputFields, useWorkflows } from '@/hooks/queries/workflows'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { getProviderFromModel, supportsToolUsageControl } from '@/providers/utils'
 import { useSettingsModalStore } from '@/stores/modals/settings/store'
@@ -645,56 +644,7 @@ function WorkflowInputMapperSyncWrapper({
   disabled: boolean
   workflowId: string
 }) {
-  const { data: workflowData, isLoading } = useQuery({
-    queryKey: ['workflow-input-fields', workflowId],
-    queryFn: async () => {
-      const response = await fetch(`/api/workflows/${workflowId}`)
-      if (!response.ok) throw new Error('Failed to fetch workflow')
-      const { data } = await response.json()
-      return data
-    },
-    enabled: Boolean(workflowId),
-    staleTime: 60 * 1000,
-  })
-
-  const inputFields = useMemo(() => {
-    if (!workflowData?.state?.blocks) return []
-
-    const blocks = workflowData.state.blocks as Record<string, any>
-
-    const triggerEntry = Object.entries(blocks).find(
-      ([, block]) =>
-        block.type === 'start_trigger' || block.type === 'input_trigger' || block.type === 'starter'
-    )
-
-    if (!triggerEntry) return []
-
-    const triggerBlock = triggerEntry[1]
-
-    const inputFormat = triggerBlock.subBlocks?.inputFormat?.value
-
-    if (Array.isArray(inputFormat)) {
-      return inputFormat
-        .filter((field: any) => field.name && typeof field.name === 'string')
-        .map((field: any) => ({
-          name: field.name,
-          type: field.type || 'string',
-        }))
-    }
-
-    const legacyFormat = triggerBlock.config?.params?.inputFormat
-
-    if (Array.isArray(legacyFormat)) {
-      return legacyFormat
-        .filter((field: any) => field.name && typeof field.name === 'string')
-        .map((field: any) => ({
-          name: field.name,
-          type: field.type || 'string',
-        }))
-    }
-
-    return []
-  }, [workflowData])
+  const { data: inputFields = [], isLoading } = useWorkflowInputFields(workflowId)
 
   const parsedValue = useMemo(() => {
     try {

apps/sim/hooks/queries/workflows.ts

@@ -3,6 +3,7 @@ import { createLogger } from '@sim/logger'
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { getNextWorkflowColor } from '@/lib/workflows/colors'
 import { buildDefaultWorkflowArtifacts } from '@/lib/workflows/defaults'
+import { extractInputFieldsFromBlocks, type WorkflowInputField } from '@/lib/workflows/input-format'
 import {
   createOptimisticMutationHandlers,
   generateTempId,
@@ -22,6 +23,34 @@ export const workflowKeys = {
   deploymentVersions: () => [...workflowKeys.all, 'deploymentVersion'] as const,
   deploymentVersion: (workflowId: string | undefined, version: number | undefined) =>
     [...workflowKeys.deploymentVersions(), workflowId ?? '', version ?? 0] as const,
+  inputFields: (workflowId: string | undefined) =>
+    [...workflowKeys.all, 'inputFields', workflowId ?? ''] as const,
+}
+
+/**
+ * Fetches workflow input fields from the workflow state.
+ */
+async function fetchWorkflowInputFields(workflowId: string): Promise<WorkflowInputField[]> {
+  const response = await fetch(`/api/workflows/${workflowId}`)
+  if (!response.ok) throw new Error('Failed to fetch workflow')
+  const { data } = await response.json()
+  return extractInputFieldsFromBlocks(data?.state?.blocks)
+}
+
+/**
+ * Hook to fetch workflow input fields for configuration.
+ * Uses React Query for caching and deduplication.
+ *
+ * @param workflowId - The workflow ID to fetch input fields for
+ * @returns Query result with input fields array
+ */
+export function useWorkflowInputFields(workflowId: string | undefined) {
+  return useQuery({
+    queryKey: workflowKeys.inputFields(workflowId),
+    queryFn: () => fetchWorkflowInputFields(workflowId!),
+    enabled: Boolean(workflowId),
+    staleTime: 60 * 1000, // 1 minute cache
+  })
 }
 
 function mapWorkflow(workflow: any): WorkflowMetadata {

apps/sim/lib/mcp/workflow-tool-schema.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import { normalizeInputFormatValue } from '@/lib/workflows/input-format-utils'
+import { normalizeInputFormatValue } from '@/lib/workflows/input-format'
 import { isValidStartBlockType } from '@/lib/workflows/triggers/trigger-utils'
 import type { InputFormatField } from '@/lib/workflows/types'
 import type { McpToolSchema } from './types'

apps/sim/lib/workflows/blocks/block-outputs.ts

@@ -1,5 +1,5 @@
 import { createLogger } from '@sim/logger'
-import { normalizeInputFormatValue } from '@/lib/workflows/input-format-utils'
+import { normalizeInputFormatValue } from '@/lib/workflows/input-format'
 import {
   classifyStartBlockType,
   StartBlockPath,