Implementation:Langgenius Dify UsePipelineTemplateList

Knowledge Sources	Dify
Domains	RAG, Pipeline, Frontend
Last Updated	2026-02-12 00:00 GMT

Overview

Description

UsePipelineTemplateList is a suite of React Query hooks in the Dify frontend that provides the data-fetching layer for pipeline template selection. These hooks enable components to retrieve lists of available RAG pipeline templates, fetch individual template details by ID, and manage query caching and invalidation for both built-in and customized templates.

The primary hooks are:

• usePipelineTemplateList -- Fetches a paginated/filtered list of pipeline templates from the /rag/pipeline/templates endpoint. Supports filtering by template type (built-in or customized) and optional language parameter.
• usePipelineTemplateById -- Retrieves the full details of a single template including its graph structure (nodes, edges, viewport), DSL export data, and metadata. Uses staleTime: 0 to always fetch fresh data.

Usage

These hooks are consumed by pipeline creation and template browsing components in the Dify frontend. A typical usage pattern involves:

1. Rendering a template list using usePipelineTemplateList with the appropriate type filter.
2. Allowing the user to select a template, then fetching its full graph via usePipelineTemplateById.
3. Loading the returned graph structure into the pipeline editor for customization.

Code Reference

Source Location

web/service/use-pipeline.ts, lines 42--70

Signature

export const PipelineTemplateListQueryKeyPrefix = [NAME_SPACE, 'template-list']

export const usePipelineTemplateList = (
  params: PipelineTemplateListParams,
  enabled = true,
) => {
  return useQuery<PipelineTemplateListResponse>({
    queryKey: [...PipelineTemplateListQueryKeyPrefix, params],
    queryFn: () => {
      return get<PipelineTemplateListResponse>('/rag/pipeline/templates', { params })
    },
    enabled,
  })
}

export const usePipelineTemplateById = (
  params: PipelineTemplateByIdRequest,
  enabled: boolean,
) => {
  const { template_id, type } = params
  return useQuery<PipelineTemplateByIdResponse>({
    queryKey: [NAME_SPACE, 'template', type, template_id],
    queryFn: () => {
      return get<PipelineTemplateByIdResponse>(
        `/rag/pipeline/templates/${template_id}`,
        { params: { type } },
      )
    },
    enabled,
    staleTime: 0,
  })
}

Import

import {
  usePipelineTemplateList,
  usePipelineTemplateById,
  PipelineTemplateListQueryKeyPrefix,
} from '@/service/use-pipeline'

I/O Contract

usePipelineTemplateList

Inputs:

Parameter	Type	Required	Description
params	PipelineTemplateListParams	Yes	Filter parameters for the template list query
params.type	'built-in' | 'customized'	Yes	Category of templates to retrieve
params.language	string	No	Optional language filter for localized templates
enabled	boolean	No	Whether the query should execute (default: true)

Outputs:

Field	Type	Description
pipeline_templates	PipelineTemplate[]	Array of template objects
pipeline_templates[].id	string	Unique template identifier
pipeline_templates[].name	string	Human-readable template name
pipeline_templates[].icon	IconInfo	Icon metadata for display
pipeline_templates[].description	string	Template description text
pipeline_templates[].position	number	Sort order position
pipeline_templates[].chunk_structure	ChunkingMode	Chunking strategy: text_model, qa_model, or hierarchical_model

usePipelineTemplateById

Inputs:

Parameter	Type	Required	Description
params	PipelineTemplateByIdRequest	Yes	Request parameters containing template_id and type
params.template_id	string	Yes	The ID of the template to retrieve
params.type	'built-in' | 'customized'	Yes	Category of the template
enabled	boolean	Yes	Whether the query should execute

Outputs:

Field	Type	Description
id	string	Template identifier
name	string	Template name
icon_info	IconInfo	Icon metadata
description	string	Template description
chunk_structure	ChunkingMode	Chunking strategy
export_data	string	Serialized DSL content for the pipeline
graph	{ nodes: Node[], edges: Edge[], viewport: Viewport }	Full pipeline graph structure
created_by	string	User ID of the template creator

Usage Examples

// Fetch all built-in templates
const { data: builtInTemplates, isLoading } = usePipelineTemplateList({
  type: 'built-in',
  language: 'en-US',
})

// Fetch all customized templates
const { data: customTemplates } = usePipelineTemplateList({
  type: 'customized',
})

// Fetch a specific template by ID (conditionally enabled)
const { data: templateDetail } = usePipelineTemplateById(
  { template_id: selectedId, type: 'built-in' },
  !!selectedId,
)

// Access the graph for loading into the pipeline editor
if (templateDetail) {
  loadGraph(templateDetail.graph)
}

Related Pages

• Principle:Langgenius_Dify_Pipeline_Template_Selection