Implementation:Langgenius Dify UseDatasource

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Data Sources, Plugin Authentication
Last Updated	2026-02-08 00:00 GMT

Overview

React Query hooks for managing plugin-based data source authentication, including listing authorized sources, fetching OAuth URLs, and retrieving per-provider credentials.

Description

The UseDatasource module provides TanStack React Query hooks for interacting with Dify's plugin-based data source authentication API. Data sources in Dify are external data providers (e.g., Notion, Google Drive) that are connected via plugin-based OAuth or API-key authentication. The module offers hooks to list all authorized data source connections, retrieve a specific data source's credentials by plugin ID and provider, initiate OAuth authorization flows by fetching authorization URLs, and invalidate cached queries when connections change. A legacy hook (useGetDefaultDataSourceListAuth) is also provided for backward compatibility but is marked for deprecation.

Usage

Use these hooks in the Dify console account settings data source page to display connected data sources, manage OAuth connections, and invalidate caches after authorization flows complete.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/service/use-datasource.ts

Signature

export const useGetDataSourceListAuth: () => UseQueryResult<{ result: DataSourceAuth[] }>
export const useInvalidDataSourceListAuth: () => () => void
export const useGetDefaultDataSourceListAuth: () => UseQueryResult<{ result: DataSourceAuth[] }>
export const useInvalidDefaultDataSourceListAuth: () => () => void
export const useGetDataSourceOAuthUrl: (provider: string) => UseMutationResult<{ authorization_url: string, state: string, context_id: string }, unknown, string | undefined>
export const useGetDataSourceAuth: (params: { pluginId: string, provider: string }) => UseQueryResult<{ result: DataSourceCredential[] }>
export const useInvalidDataSourceAuth: (params: { pluginId: string, provider: string }) => () => void

Import

import {
  useGetDataSourceListAuth,
  useInvalidDataSourceListAuth,
  useGetDataSourceOAuthUrl,
  useGetDataSourceAuth,
} from '@/service/use-datasource'

I/O Contract

Inputs

Name	Type	Required	Description
provider	string	Yes (OAuth/specific)	The data source provider identifier (e.g., "notion")
pluginId	string	Yes (specific auth)	The plugin ID that provides the data source
credentialId	string	No (OAuth mutation)	Existing credential ID to update during re-authorization

Outputs

Name	Type	Description
result	DataSourceAuth[]	List of authorized data source connections
authorization_url	string	OAuth URL to redirect the user for authorization
state	string	OAuth state parameter for CSRF protection
context_id	string	Context identifier for the OAuth flow
result (specific)	DataSourceCredential[]	Credentials for a specific plugin/provider combination

Usage Examples

import {
  useGetDataSourceListAuth,
  useGetDataSourceOAuthUrl,
  useInvalidDataSourceListAuth,
} from '@/service/use-datasource'

// List all data source connections
const { data } = useGetDataSourceListAuth()
const dataSources = data?.result ?? []

// Initiate OAuth for a data source provider
const { mutateAsync: getOAuthUrl } = useGetDataSourceOAuthUrl('notion')
const { authorization_url } = await getOAuthUrl()
window.location.href = authorization_url

// Invalidate cache after OAuth callback
const invalidate = useInvalidDataSourceListAuth()
invalidate()

Related Pages

• Heuristic:Langgenius_Dify_Warning_Deprecated_Default_Datasource_Auth
• Langgenius_Dify_Fetch_Layer - Underlying HTTP fetch layer for API requests
• Langgenius_Dify_UseEndpoints - Similar hook pattern for plugin endpoint management