Implementation:Langgenius Dify FetchWorkflowDraft
| Knowledge Sources | |
|---|---|
| Domains | Workflow API State Hydration |
| Last Updated | 2026-02-08 00:00 GMT |
Overview
Concrete tool for fetching a persisted workflow draft from the Dify backend, provided by the Dify workflow service layer.
Description
fetchWorkflowDraft is a thin service function that retrieves the current draft state of a workflow application. It issues a silent GET request to the backend draft endpoint and returns the full graph structure along with feature flags, environment variables, conversation variables, and a hash for optimistic concurrency control. The response is consumed by the workflow editor to hydrate the visual canvas with nodes, edges, and viewport positioning. The silent: true option suppresses global error toasts, allowing the caller to handle errors (such as 404 for non-existent drafts) gracefully.
Usage
Use fetchWorkflowDraft when the workflow editor component mounts and needs to load the current draft state. It is also called when reloading the editor after navigation, when switching between workflow versions, or when the editor detects that its local hash is stale and needs a fresh copy.
Code Reference
Source Location
- Repository: Dify
- File:
web/service/workflow.ts(Lines 14-16)
Signature
export const fetchWorkflowDraft = (url: string): Promise<FetchWorkflowDraftResponse>
Import
import { fetchWorkflowDraft } from '@/service/workflow'
Implementation Detail
export const fetchWorkflowDraft = (url: string) => {
return get(url, {}, { silent: true }) as Promise<FetchWorkflowDraftResponse>
}
The function delegates to the shared get HTTP helper from @/service/base, passing silent: true to suppress global error notifications.
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| url | string |
Yes | The draft endpoint URL, typically constructed as {prefix}/{appId}/workflows/draft where prefix is derived from the flow type (e.g., /apps or /rag/pipelines).
|
Outputs
| Name | Type | Description |
|---|---|---|
| graph | { nodes: Node[], edges: Edge[], viewport: Viewport } |
The full workflow graph containing all nodes with their typed data payloads, all edges encoding directional connections, and the viewport pan/zoom state. |
| features | Record<string, any> |
Feature flag configuration for the workflow (e.g., text-to-speech, citation settings). |
| environment_variables | EnvironmentVariable[] |
Workflow-scoped environment variables. Secret-typed values are masked as [__HIDDEN__] after hydration.
|
| conversation_variables | ConversationVariable[] |
Per-conversation session state variables defined in the workflow. |
| hash | string |
Optimistic concurrency token. Must be included in subsequent sync/save requests to detect conflicting edits. |
Dependencies
| Dependency | Purpose |
|---|---|
@/service/base (get) |
Provides the underlying HTTP GET helper with authentication, base URL resolution, and error handling. |
@/types/workflow (FetchWorkflowDraftResponse) |
TypeScript type definition for the draft response shape. |
Usage Examples
import { fetchWorkflowDraft } from '@/service/workflow'
// Fetch the draft for a specific app
const draft = await fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
// Access the graph structure
const { nodes, edges, viewport } = draft.graph
// Use the hash for subsequent saves
console.log('Draft hash:', draft.hash)