Implementation:Langgenius Dify FetchAllInspectVars

Knowledge Sources	Dify
Domains	Workflow, DAG, Frontend
Last Updated	2026-02-12 00:00 GMT

Overview

Description

The fetchAllInspectVars function retrieves the complete set of inspectable variables from a workflow draft. It implements paginated fetching with parallel requests: the first page is fetched to determine the total variable count, and if more than 100 variables exist, all remaining pages are fetched concurrently via Promise.all. This function is the primary data source for the variable picker UI that allows users to wire upstream node outputs to downstream node inputs.

The companion function syncWorkflowDraft persists the current workflow graph state (including all variable wiring) to the backend. Together, these two functions form the read/write pair for the variable wiring lifecycle.

Usage

• Call fetchAllInspectVars with the flow type and flow ID to retrieve all variables available in the draft workflow.
• Call syncWorkflowDraft after modifying variable wiring to persist the updated graph to the backend.
• The result of fetchAllInspectVars is an array of VarInInspect objects, each describing a variable's name, type, and originating node.

Code Reference

Source Location

web/service/workflow.ts, lines 76-92 (fetchAllInspectVars), lines 18-23 (syncWorkflowDraft).

Signature

// Paginated variable inspection - fetches all variables from workflow draft
export const fetchAllInspectVars = async (
  flowType: FlowType,
  flowId: string,
): Promise<VarInInspect[]> => {
  const res = await fetchAllInspectVarsOnePage(flowType, flowId, 1)
  const { items, total } = res
  if (total <= 100)
    return items

  const pageCount = Math.ceil(total / 100)
  const promises = []
  for (let i = 2; i <= pageCount; i++)
    promises.push(fetchAllInspectVarsOnePage(flowType, flowId, i))

  const restData = await Promise.all(promises)
  restData.forEach(({ items: item }) => {
    items.push(...item)
  })
  return items
}

// Internal helper for single-page fetch
const fetchAllInspectVarsOnePage = async (
  flowType: FlowType,
  flowId: string,
  page: number,
): Promise<{ total: number, items: VarInInspect[] }> => {
  return get(`${getFlowPrefix(flowType)}/${flowId}/workflows/draft/variables`, {
    params: { page, limit: 100 },
  })
}

// Persist workflow graph with variable wiring to backend
export const syncWorkflowDraft = ({ url, params }: {
  url: string
  params: Pick<FetchWorkflowDraftResponse, 'graph' | 'features' | 'environment_variables' | 'conversation_variables'>
}) => {
  return post<CommonResponse & { updated_at: number, hash: string }>(url, { body: params }, { silent: true })
}

Import

import { fetchAllInspectVars, syncWorkflowDraft } from '@/service/workflow'

I/O Contract

Inputs (fetchAllInspectVars)

Parameter	Type	Required	Description
flowType	FlowType	Yes	The type of flow (e.g., 'app' or 'pipeline'), used to construct the API URL prefix
flowId	string	Yes	The unique identifier of the workflow application

Outputs (fetchAllInspectVars)

Field	Type	Description
(return)	Promise<VarInInspect[]>	Array of all inspectable variables in the workflow draft, including their names, types, and originating node information

Inputs (syncWorkflowDraft)

Parameter	Type	Required	Description
url	string	Yes	The API endpoint URL for the workflow draft sync
params.graph	{ nodes: Node[], edges: Edge[], viewport?: Viewport }	Yes	The full graph structure to persist
params.features	any	Yes	Workflow feature flags and configuration
params.environment_variables	EnvironmentVariable[]	Yes	Environment-scoped variables
params.conversation_variables	ConversationVariable[]	Yes	Conversation-scoped variables

Outputs (syncWorkflowDraft)

Field	Type	Description
(return)	Promise<CommonResponse & { updated_at: number, hash: string }>	Response with the updated timestamp and content hash for optimistic concurrency control

Usage Examples

import { fetchAllInspectVars, syncWorkflowDraft } from '@/service/workflow'

// Fetch all variables available in a workflow draft
const variables = await fetchAllInspectVars('app', 'app-abc123')
console.log(`Found ${variables.length} variables`)

// Filter variables by a specific node
const llmOutputVars = variables.filter(v => v.node_id === 'llm-node-1')

// Persist updated graph after modifying variable wiring
await syncWorkflowDraft({
  url: '/apps/app-abc123/workflows/draft',
  params: {
    graph: { nodes: updatedNodes, edges: updatedEdges, viewport },
    features: workflowFeatures,
    environment_variables: envVars,
    conversation_variables: convVars,
  },
})

Related Pages

• Principle:Langgenius_Dify_Variable_Wiring