Implementation:Langgenius Dify UseDataSourceList

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

Overview

Description

UseDataSourceList is a collection of React Query hooks that manage the data-fetching and credential-management layer for datasource node configuration in Dify RAG pipelines. These hooks enable the frontend to retrieve available datasource plugins, fetch credentials for specific plugins, and update credentials when configuring datasource nodes.

The hook suite includes:

• useDataSourceList -- Fetches the list of available datasource plugins from /rag/pipelines/datasource-plugins. Uses staleTime: 0 to ensure fresh data and supports an onSuccess callback for post-fetch processing.
• useDataSourceCredentials -- Retrieves stored credentials for a specific datasource provider and plugin combination from /auth/plugin/datasource. Automatically enables when both provider and pluginId are provided.
• useUpdateDataSourceCredentials -- A mutation hook for creating or updating datasource plugin credentials. Automatically invalidates the datasource list cache upon success to ensure UI consistency.

Usage

These hooks are consumed by datasource node configuration panels in the pipeline editor. The typical workflow is:

1. Use useDataSourceList to populate the datasource selector with available plugins.
2. When a user selects a plugin that requires authentication, use useDataSourceCredentials to check for existing credentials.
3. If credentials need to be created or updated, invoke useUpdateDataSourceCredentials with the new credential values.

Code Reference

Source Location

web/service/use-pipeline.ts, lines 178--265

Signature

export const useDataSourceList = (
  enabled: boolean,
  onSuccess?: (v: DataSourceItem[]) => void,
) => {
  return useQuery<DataSourceItem[]>({
    enabled,
    queryKey: [NAME_SPACE, 'datasource'],
    staleTime: 0,
    queryFn: async () => {
      const data = await get<DataSourceItem[]>('/rag/pipelines/datasource-plugins')
      onSuccess?.(data)
      return data
    },
    retry: false,
  })
}

export const useDataSourceCredentials = (
  provider: string,
  pluginId: string,
  onSuccess: (value: ToolCredential[]) => void,
) => {
  return useQuery({
    queryKey: [NAME_SPACE, 'datasource-credentials', provider, pluginId],
    queryFn: async () => {
      const result = await get<{ result: ToolCredential[] }>(
        `/auth/plugin/datasource?provider=${provider}&plugin_id=${pluginId}`,
      )
      onSuccess(result.result)
      return result.result
    },
    enabled: !!provider && !!pluginId,
    retry: 2,
  })
}

export const useUpdateDataSourceCredentials = () => {
  const queryClient = useQueryClient()
  return useMutation({
    mutationKey: [NAME_SPACE, 'update-datasource-credentials'],
    mutationFn: ({
      provider,
      pluginId,
      credentials,
      name,
    }: {
      provider: string
      pluginId: string
      credentials: Record<string, any>
      name: string
    }) => {
      return post('/auth/plugin/datasource', {
        body: { provider, plugin_id: pluginId, credentials, name },
      }).then(() => {
        queryClient.invalidateQueries({
          queryKey: [NAME_SPACE, 'datasource'],
        })
      })
    },
  })
}

Import

import {
  useDataSourceList,
  useDataSourceCredentials,
  useUpdateDataSourceCredentials,
} from '@/service/use-pipeline'

I/O Contract

useDataSourceList

Inputs:

Parameter	Type	Required	Description
enabled	boolean	Yes	Whether the query should execute
onSuccess	(v: DataSourceItem[]) => void	No	Callback invoked with the fetched data upon success

Outputs:

Field	Type	Description
data	DataSourceItem[]	Array of available datasource plugin items

useDataSourceCredentials

Inputs:

Parameter	Type	Required	Description
provider	string	Yes	The datasource provider identifier
pluginId	string	Yes	The plugin identifier
onSuccess	(value: ToolCredential[]) => void	Yes	Callback invoked with the credential array upon success

Outputs:

Field	Type	Description
data	ToolCredential[]	Array of credential objects for the specified datasource plugin

useUpdateDataSourceCredentials

Inputs (mutation variables):

Parameter	Type	Required	Description
provider	string	Yes	The datasource provider identifier
pluginId	string	Yes	The plugin identifier
credentials	Record<string, any>	Yes	Key-value map of credential fields
name	string	Yes	Display name for the credential set

Outputs:

Field	Type	Description
(void)	--	Mutation returns void; side-effect invalidates the datasource list cache

Usage Examples

// Fetch available datasource plugins
const { data: datasources, isLoading } = useDataSourceList(
  isEditorOpen,
  (items) => {
    console.log('Loaded datasource plugins:', items.length)
  },
)

// Fetch credentials for a specific plugin
const { data: credentials } = useDataSourceCredentials(
  'notion',
  'notion-plugin-v1',
  (creds) => setFormDefaults(creds),
)

// Update credentials for a datasource plugin
const { mutateAsync: updateCredentials } = useUpdateDataSourceCredentials()

await updateCredentials({
  provider: 'notion',
  pluginId: 'notion-plugin-v1',
  credentials: { api_token: 'secret_abc123' },
  name: 'My Notion Workspace',
})

Related Pages

• Principle:Langgenius_Dify_Datasource_Node_Configuration