fix(queries): remove more remaining manual state management and refetching in favor of reactquery (#2852)

Author: waleedlatif1

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

@@ -98,11 +98,7 @@ export function McpDeploy({
   const workspaceId = params.workspaceId as string
   const openSettingsModal = useSettingsModalStore((state) => state.openModal)
 
-  const {
-    data: servers = [],
-    isLoading: isLoadingServers,
-    refetch: refetchServers,
-  } = useWorkflowMcpServers(workspaceId)
+  const { data: servers = [], isLoading: isLoadingServers } = useWorkflowMcpServers(workspaceId)
   const addToolMutation = useAddWorkflowMcpTool()
   const deleteToolMutation = useDeleteWorkflowMcpTool()
   const updateToolMutation = useUpdateWorkflowMcpTool()
@@ -346,7 +342,6 @@ export function McpDeploy({
             toolDescription: toolDescription.trim() || undefined,
             parameterSchema,
           })
-          refetchServers()
           onAddedToServer?.()
           logger.info(`Added workflow ${workflowId} as tool to server ${serverId}`)
         } catch (error) {
@@ -375,7 +370,6 @@ export function McpDeploy({
               delete next[serverId]
               return next
             })
-            refetchServers()
           } catch (error) {
             logger.error('Failed to remove tool:', error)
           } finally {
@@ -398,7 +392,6 @@ export function McpDeploy({
       parameterSchema,
       addToolMutation,
       deleteToolMutation,
-      refetchServers,
       onAddedToServer,
     ]
   )

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

@@ -52,15 +52,19 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal'
 import { ToolCredentialSelector } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-credential-selector'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
-import { useChildDeployment } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/use-child-deployment'
 import { getAllBlocks } from '@/blocks'
 import { useMcpTools } from '@/hooks/mcp/use-mcp-tools'
 import {
   type CustomTool as CustomToolDefinition,
   useCustomTools,
 } from '@/hooks/queries/custom-tools'
 import { useForceRefreshMcpTools, useMcpServers, useStoredMcpTools } from '@/hooks/queries/mcp'
-import { useWorkflowInputFields, useWorkflows } from '@/hooks/queries/workflows'
+import {
+  useChildDeploymentStatus,
+  useDeployChildWorkflow,
+  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'
@@ -756,37 +760,26 @@ function WorkflowToolDeployBadge({
   workflowId: string
   onDeploySuccess?: () => void
 }) {
-  const { isDeployed, needsRedeploy, isLoading, refetch } = useChildDeployment(workflowId)
-  const [isDeploying, setIsDeploying] = useState(false)
+  const { data, isLoading } = useChildDeploymentStatus(workflowId)
+  const deployMutation = useDeployChildWorkflow()
   const userPermissions = useUserPermissionsContext()
 
-  const deployWorkflow = useCallback(async () => {
+  const isDeployed = data?.isDeployed ?? null
+  const needsRedeploy = data?.needsRedeploy ?? false
+  const isDeploying = deployMutation.isPending
+
+  const deployWorkflow = useCallback(() => {
     if (isDeploying || !workflowId || !userPermissions.canAdmin) return
 
-    try {
-      setIsDeploying(true)
-      const response = await fetch(`/api/workflows/${workflowId}/deploy`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
+    deployMutation.mutate(
+      { workflowId },
+      {
+        onSuccess: () => {
+          onDeploySuccess?.()
         },
-        body: JSON.stringify({
-          deployChatEnabled: false,
-        }),
-      })
-
-      if (response.ok) {
-        refetch()
-        onDeploySuccess?.()
-      } else {
-        logger.error('Failed to deploy workflow')
       }
-    } catch (error) {
-      logger.error('Error deploying workflow:', error)
-    } finally {
-      setIsDeploying(false)
-    }
-  }, [isDeploying, workflowId, refetch, onDeploySuccess, userPermissions.canAdmin])
+    )
+  }, [isDeploying, workflowId, userPermissions.canAdmin, deployMutation, onDeploySuccess])
 
   if (isLoading || (isDeployed && !needsRedeploy)) {
     return null

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/index.ts

@@ -1,5 +1,4 @@
 export { useBlockProperties } from './use-block-properties'
 export { useBlockState } from './use-block-state'
 export { useChildWorkflow } from './use-child-workflow'
-export { useScheduleInfo } from './use-schedule-info'
 export { useWebhookInfo } from './use-webhook-info'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/use-child-deployment.ts

@@ -1,6 +1,6 @@
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
-import { useChildDeployment } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/hooks/use-child-deployment'
 import type { WorkflowBlockProps } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/types'
+import { useChildDeploymentStatus } from '@/hooks/queries/workflows'
 
 /**
  * Return type for the useChildWorkflow hook
@@ -16,12 +16,12 @@ export interface UseChildWorkflowReturn {
   childNeedsRedeploy: boolean
   /** Whether the child version information is loading */
   isLoadingChildVersion: boolean
-  /** Function to manually refetch deployment status */
-  refetchDeployment: () => void
 }
 
 /**
- * Custom hook for managing child workflow information for workflow selector blocks
+ * Custom hook for managing child workflow information for workflow selector blocks.
+ * Cache invalidation is handled automatically by React Query when using
+ * the useDeployChildWorkflow mutation.
  *
  * @param blockId - The ID of the block
  * @param blockType - The type of the block
@@ -53,20 +53,20 @@ export function useChildWorkflow(
     }
   }
 
-  const {
-    activeVersion: childActiveVersion,
-    isDeployed: childIsDeployed,
-    needsRedeploy: childNeedsRedeploy,
-    isLoading: isLoadingChildVersion,
-    refetch: refetchDeployment,
-  } = useChildDeployment(isWorkflowSelector ? childWorkflowId : undefined)
+  const { data, isLoading, isPending } = useChildDeploymentStatus(
+    isWorkflowSelector ? childWorkflowId : undefined
+  )
+
+  const childActiveVersion = data?.activeVersion ?? null
+  const childIsDeployed = data?.isDeployed ?? null
+  const childNeedsRedeploy = data?.needsRedeploy ?? false
+  const isLoadingChildVersion = isLoading || isPending
 
   return {
     childWorkflowId,
     childActiveVersion,
     childIsDeployed,
     childNeedsRedeploy,
     isLoadingChildVersion,
-    refetchDeployment,
   }
 }