refactor(workflows): collapse duplicate workflow-state cache

The registry store fetched the GET /api/workflows/[id] envelope inline via
requestJson while useWorkflowState cached the same endpoint's mapped state
under workflowKeys.state(id) — two requests, two cache shapes, never
reconciled.

Collapse to one request + one cache entry keyed by workflowKeys.state(id):

- Add hooks/queries/utils/fetch-workflow-envelope.ts: a standalone
  fetchWorkflowEnvelope(id, signal) returning the full GetWorkflowResponseData.
  Standalone (not in workflows.ts) to avoid a store -> query-hook import cycle.
- useWorkflowState/useWorkflowStates now query the envelope and derive the
  mapped WorkflowState via select (mapWorkflowState), so consumers see the
  identical mapped shape from the shared entry.
- The store's loadWorkflowState reads via getQueryClient().fetchQuery({
  staleTime: 0 }) instead of raw requestJson — always-fresh (preserving the
  prior always-fetch boot/refresh semantics, incl. the socket
  handle-resource-event refresh path that has no separate state
  invalidation), in-flight deduped, writing into the same cache entry the
  hooks read.

Request-id staleness guard, deployment-cache priming, cross-store projection,
and the active-workflow-changed event are all preserved unchanged.

Author: waleedlatif1

apps/sim/hooks/queries/utils/fetch-workflow-envelope.ts

@@ -0,0 +1,31 @@
+import { requestJson } from '@/lib/api/client/request'
+import {
+  type GetWorkflowResponseData,
+  getWorkflowStateContract,
+} from '@/lib/api/contracts/workflows'
+
+/**
+ * Fetches the full workflow envelope (in-state slice, deployment status,
+ * variables, and row metadata) for a single workflow from GET
+ * `/api/workflows/[id]`.
+ *
+ * Single source of truth for the `workflowKeys.state(id)` cache entry: the
+ * registry store hydrates it via `fetchQuery` (always-fresh, in-flight
+ * deduped) and `useWorkflowState`/`useWorkflowStates` project the mapped
+ * `WorkflowState` out of the same entry with `select`, so this endpoint has
+ * exactly one cache entry across the store and the hooks.
+ *
+ * Lives in a standalone util (rather than `hooks/queries/workflows.ts`) so the
+ * registry store can import it without creating a store ↔ query-hook import
+ * cycle.
+ */
+export async function fetchWorkflowEnvelope(
+  workflowId: string,
+  signal?: AbortSignal
+): Promise<GetWorkflowResponseData> {
+  const { data } = await requestJson(getWorkflowStateContract, {
+    params: { id: workflowId },
+    signal,
+  })
+  return data
+}

apps/sim/hooks/queries/workflows.ts

@@ -18,7 +18,7 @@ import {
   createWorkflowContract,
   deleteWorkflowContract,
   duplicateWorkflowContract,
-  getWorkflowStateContract,
+  type GetWorkflowResponseData,
   type ImportWorkflowAsSuperuserBody,
   type ImportWorkflowAsSuperuserResponse,
   importWorkflowAsSuperuserContract,
@@ -28,6 +28,7 @@ import {
 } from '@/lib/api/contracts/workflows'
 import { deploymentKeys } from '@/hooks/queries/deployments'
 import { fetchDeploymentVersionState } from '@/hooks/queries/utils/fetch-deployment-version-state'
+import { fetchWorkflowEnvelope } from '@/hooks/queries/utils/fetch-workflow-envelope'
 import { getFolderMap } from '@/hooks/queries/utils/folder-cache'
 import { invalidateWorkflowLists } from '@/hooks/queries/utils/invalidate-workflow-lists'
 import { getTopInsertionSortOrder } from '@/hooks/queries/utils/top-insertion-sort-order'
@@ -49,14 +50,11 @@ const logger = createLogger('WorkflowQueries')
 
 export { type WorkflowQueryScope, workflowKeys } from '@/hooks/queries/utils/workflow-keys'
 
-async function fetchWorkflowState(
-  workflowId: string,
-  signal?: AbortSignal
-): Promise<WorkflowState | null> {
-  const { data } = await requestJson(getWorkflowStateContract, {
-    params: { id: workflowId },
-    signal,
-  })
+/**
+ * Projects the in-state slice of the workflow envelope into the canvas-facing
+ * `WorkflowState` shape consumed by preview/editor surfaces.
+ */
+function mapWorkflowState(data: GetWorkflowResponseData): WorkflowState {
   const wireState = data.state
   return {
     ...wireState,
@@ -70,11 +68,16 @@ async function fetchWorkflowState(
  * Fetches the full workflow state for a single workflow.
  * Used by workflow blocks to show a preview of the child workflow
  * and as a base query for input fields extraction.
+ *
+ * Derives the mapped `WorkflowState` from the shared envelope query via
+ * `select`, so it shares one cache entry (and one request) with the registry
+ * store's hydration and with `useWorkflowStates`.
  */
 export function useWorkflowState(workflowId: string | undefined) {
   return useQuery({
     queryKey: workflowKeys.state(workflowId),
-    queryFn: workflowId ? ({ signal }) => fetchWorkflowState(workflowId, signal) : skipToken,
+    queryFn: workflowId ? ({ signal }) => fetchWorkflowEnvelope(workflowId, signal) : skipToken,
+    select: mapWorkflowState,
     staleTime: 30 * 1000,
   })
 }
@@ -93,7 +96,8 @@ export function useWorkflowStates(
   const results = useQueries({
     queries: uniqueIds.map((id) => ({
       queryKey: workflowKeys.state(id),
-      queryFn: ({ signal }: { signal?: AbortSignal }) => fetchWorkflowState(id, signal),
+      queryFn: ({ signal }: { signal?: AbortSignal }) => fetchWorkflowEnvelope(id, signal),
+      select: mapWorkflowState,
       staleTime: 30 * 1000,
     })),
   })

apps/sim/stores/workflows/registry/store.ts

@@ -2,13 +2,13 @@ import { createLogger } from '@sim/logger'
 import { generateRandomHex } from '@sim/utils/random'
 import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
-import { requestJson } from '@/lib/api/client/request'
-import { getWorkflowStateContract } from '@/lib/api/contracts/workflows'
 import { DEFAULT_DUPLICATE_OFFSET } from '@/lib/workflows/autolayout/constants'
 import { getQueryClient } from '@/app/_shell/providers/get-query-client'
 import type { WorkflowDeploymentInfo } from '@/hooks/queries/deployments'
 import { deploymentKeys } from '@/hooks/queries/deployments'
+import { fetchWorkflowEnvelope } from '@/hooks/queries/utils/fetch-workflow-envelope'
 import { invalidateWorkflowLists } from '@/hooks/queries/utils/invalidate-workflow-lists'
+import { workflowKeys } from '@/hooks/queries/utils/workflow-keys'
 import { useOperationQueueStore } from '@/stores/operation-queue/store'
 import { useVariablesStore } from '@/stores/variables/store'
 import type { Variable } from '@/stores/variables/types'
@@ -98,8 +98,10 @@ export const useWorkflowRegistry = create<WorkflowRegistry>()(
         }))
 
         try {
-          const { data: workflowData } = await requestJson(getWorkflowStateContract, {
-            params: { id: workflowId },
+          const workflowData = await getQueryClient().fetchQuery({
+            queryKey: workflowKeys.state(workflowId),
+            queryFn: ({ signal }) => fetchWorkflowEnvelope(workflowId, signal),
+            staleTime: 0,
           })
 
           const deployedAt = workflowData.deployedAt ? workflowData.deployedAt.toISOString() : null