Implementation:Langgenius Dify UseCommon

Knowledge Sources	Langgenius_Dify
Domains	Frontend, React Query, Data Fetching, State Management
Last Updated	2026-02-08 00:00 GMT

Overview

Provides React Query hooks (useQuery and useMutation) for fetching and mutating common platform data including user profiles, workspaces, model providers, file uploads, authentication state, and extensions in the Dify frontend.

Description

web/service/use-common.ts is the hook-based data fetching layer for the Dify frontend, built on TanStack React Query (@tanstack/react-query). It provides a declarative, cache-aware approach to server state management as the modern alternative to the imperative functions in service/common.ts.

The module defines:

Query key factory (commonQueryKeys): A centralized object that produces stable query keys for all common data resources, ensuring consistent cache invalidation:

fileUploadConfig, userProfile, currentWorkspace, workspaces, members
modelProviders, modelList(type), defaultModel(type), modelParameterRules(provider, model)
retrievalMethods, accountIntegrates, pluginProviders, notionConnection
apiBasedExtensions, codeBasedExtensions(module), invitationCheck(params)
isLogin, schemaDefinitions, langGeniusVersion(currentVersion)

Query hooks (useQuery-based):

useFileUploadConfig() - File upload limits
useUserProfile() - Current user profile with version metadata
useCurrentWorkspace() - Current workspace details
useWorkspaces() - All workspaces list
useMembers() - Workspace members
useModelProviders() - Configured model providers
useModelListByType(type) - Models filtered by type
useDefaultModelByType(type) - Default model for a type
useSupportRetrievalMethods() - Supported dataset retrieval methods
useIsLogin() - Authentication status check
useLangGeniusVersion() - Platform version information
useFilePreview(fileID) - File content preview
useSchemaTypeDefinitions() - Schema definitions
useAccountIntegrates() - Third-party account integrations
useDataSourceIntegrates() - Data source integrations
usePluginProviders() - Plugin providers
useNotionConnection() - Notion OAuth connection URL
useApiBasedExtensions() - API-based extensions
useCodeBasedExtensions(module) - Code-based extensions
useInvitationCheck(params) - Invitation token validation
useNotionBinding(code) - Notion binding completion
useModelParameterRules(provider, model) - Model parameter rules
useVerifyForgotPasswordToken(token) - Password reset token validation

Mutation hooks (useMutation-based):

useGenerateStructuredOutputRules() - Generate structured output rules from instruction
useSendMail() - Send registration email
useMailValidity() - Verify email code
useMailRegister() - Complete email registration
useOneMoreStep() - Post-registration setup
useLogout() - User logout
useFileSupportTypes() - Supported file types

Invalidation hooks:

useInvalidDataSourceIntegrates() - Invalidate data source cache

Usage

Use these hooks in React components for data fetching with automatic caching and refetching:

import { useCurrentWorkspace, useModelProviders, useIsLogin } from '@/service/use-common'

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/service/use-common.ts
Lines: 1-378

Signature

export const commonQueryKeys = {
  fileUploadConfig: [NAME_SPACE, 'file-upload-config'] as const,
  userProfile: [NAME_SPACE, 'user-profile'] as const,
  currentWorkspace: [NAME_SPACE, 'current-workspace'] as const,
  modelProviders: [NAME_SPACE, 'model-providers'] as const,
  modelList: (type: ModelTypeEnum) => [NAME_SPACE, 'model-list', type] as const,
  // ... more key factories
}

export const useFileUploadConfig = () => useQuery<FileUploadConfigResponse>({...})
export const useUserProfile = () => useQuery<UserProfileWithMeta>({...})
export const useCurrentWorkspace = () => useQuery<ICurrentWorkspace>({...})
export const useWorkspaces = () => useQuery<{ workspaces: IWorkspace[] }>({...})
export const useMembers = () => useQuery<MemberResponse>({...})
export const useModelProviders = () => useQuery<{ data: ModelProvider[] }>({...})
export const useModelListByType = (type: ModelTypeEnum, enabled?: boolean) => useQuery<{ data: Model[] }>({...})
export const useIsLogin = () => useQuery<{ logged_in: boolean }>({...})
export const useLogout = () => useMutation({...})
export const useGenerateStructuredOutputRules = () => useMutation({...})

Import

import {
  useCurrentWorkspace, useModelProviders, useIsLogin,
  useFileUploadConfig, useMembers, commonQueryKeys
} from '@/service/use-common'

I/O Contract

Inputs

Name	Type	Required	Description
type	ModelTypeEnum	Yes (for model hooks)	Model type filter for model list and default model queries
fileID	string	Yes (for useFilePreview)	ID of the file to preview
provider	string	Yes (for useModelParameterRules)	Model provider identifier
model	string	Yes (for useModelParameterRules)	Model identifier
enabled	boolean	No	Controls whether the query is enabled (defaults to true)
token	string	Yes (for useVerifyForgotPasswordToken)	Password reset token to validate

Outputs

Name	Type	Description
UseQueryResult<T>	React Query result	Standard useQuery return with data, isLoading, error, refetch, etc.
UseMutationResult<T>	React Query result	Standard useMutation return with mutate, mutateAsync, isLoading, etc.
commonQueryKeys	object	Factory object for producing stable cache keys for cache invalidation

Usage Examples

import { useCurrentWorkspace, useModelProviders, useIsLogin, commonQueryKeys } from '@/service/use-common'
import { useQueryClient } from '@tanstack/react-query'

function WorkspaceSettings() {
  const { data: workspace, isLoading } = useCurrentWorkspace()
  const { data: providers } = useModelProviders()
  const { data: loginStatus } = useIsLogin()
  const queryClient = useQueryClient()

  if (isLoading) return <Loading />
  if (!loginStatus?.logged_in) return <Redirect to="/signin" />

  const handleRefreshProviders = () => {
    queryClient.invalidateQueries({ queryKey: commonQueryKeys.modelProviders })
  }

  return (
    <div>
      <h1>{workspace?.name}</h1>
      <p>Plan: {workspace?.plan}</p>
      <p>Providers: {providers?.data.length}</p>
      <button onClick={handleRefreshProviders}>Refresh Providers</button>
    </div>
  )
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment