Implementation:Langgenius Dify Service Use Common

Knowledge Sources	Langgenius_Dify
Domains	Frontend, API_Service
Last Updated	2026-02-12 07:00 GMT

Overview

React Query hooks for common API endpoints providing cached, reactive data fetching for user profiles, workspaces, model providers, authentication status, and platform configuration.

Description

use-common.ts provides a comprehensive set of React Query (TanStack Query) hooks that wrap the common API service functions from common.ts and base.ts. It defines a centralized commonQueryKeys object that establishes a structured cache key namespace (prefixed with "common") for all query types, enabling consistent cache invalidation. The module exports useQuery hooks for read operations (e.g., useUserProfile, useCurrentWorkspace, useModelProviders, useMembers, useIsLogin) and useMutation hooks for write operations (e.g., useSendMail, useMailValidity, useMailRegister, useLogout, useOneMoreStep, useGenerateStructuredOutputRules). Several hooks accept enabled parameters for conditional fetching, and some use staleTime: 0 / gcTime: 0 to ensure fresh data on every access (e.g., useUserProfile, useIsLogin). The useUserProfile hook enriches the profile response with metadata extracted from response headers (x-version and x-env). The useIsLogin hook performs a silent profile fetch and returns a logged_in boolean, catching all errors to return false.

Usage

Use these hooks in React components that need to access common platform data. Import the specific hook you need and call it within a component. The hooks handle caching, deduplication, and automatic refetching through React Query. Use commonQueryKeys when you need to manually invalidate cached data.

Code Reference

Source Location

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

Signature

// Query key registry
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,
  workspaces: [NAME_SPACE, 'workspaces'] as const,
  members: [NAME_SPACE, 'members'] as const,
  modelProviders: [NAME_SPACE, 'model-providers'] as const,
  modelList: (type: ModelTypeEnum) => [NAME_SPACE, 'model-list', type] as const,
  // ... and more
}

// Query hooks
export const useFileUploadConfig = () => UseQueryResult<FileUploadConfigResponse>
export const useUserProfile = () => UseQueryResult<UserProfileWithMeta>
export const useLangGeniusVersion = (currentVersion?: string | null, enabled?: boolean) => UseQueryResult<LangGeniusVersionResponse>
export const useCurrentWorkspace = () => UseQueryResult<ICurrentWorkspace>
export const useWorkspaces = () => UseQueryResult<{ workspaces: IWorkspace[] }>
export const useMembers = () => UseQueryResult<MemberResponse>
export const useFilePreview = (fileID: string) => UseQueryResult<FilePreviewResponse>
export const useSchemaTypeDefinitions = () => UseQueryResult<SchemaTypeDefinition[]>
export const useIsLogin = () => UseQueryResult<{ logged_in: boolean }>
export const useModelProviders = () => UseQueryResult<{ data: ModelProvider[] }>
export const useModelListByType = (type: ModelTypeEnum, enabled?: boolean) => UseQueryResult<{ data: Model[] }>
export const useDefaultModelByType = (type: ModelTypeEnum, enabled?: boolean) => UseQueryResult
export const useSupportRetrievalMethods = () => UseQueryResult<{ retrieval_method: RETRIEVE_METHOD[] }>
export const useAccountIntegrates = () => UseQueryResult<{ data: AccountIntegrate[] | null }>
export const useDataSourceIntegrates = (options?: DataSourceIntegratesOptions) => UseQueryResult<{ data: DataSourceNotion[] }>
export const usePluginProviders = () => UseQueryResult<PluginProvider[] | null>
export const useNotionConnection = (enabled: boolean) => UseQueryResult<{ data: string }>
export const useApiBasedExtensions = () => UseQueryResult<ApiBasedExtension[]>
export const useInvitationCheck = (params?, enabled?) => UseQueryResult
export const useNotionBinding = (code?: string | null, enabled?: boolean) => UseQueryResult
export const useModelParameterRules = (provider?, model?, enabled?) => UseQueryResult<{ data: ModelParameterRule[] }>
export const useVerifyForgotPasswordToken = (token?: string | null) => UseQueryResult<ForgotPasswordValidity>

// Mutation hooks
export const useGenerateStructuredOutputRules = () => UseMutationResult
export const useSendMail = () => UseMutationResult
export const useMailValidity = () => UseMutationResult
export const useMailRegister = () => UseMutationResult
export const useLogout = () => UseMutationResult
export const useOneMoreStep = () => UseMutationResult

// Invalidation hooks
export const useInvalidDataSourceIntegrates = () => () => void

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
type	ModelTypeEnum	Varies	Model type enum for type-specific queries (useModelListByType, useDefaultModelByType)
enabled	boolean	No	Controls whether the query is active; defaults to true for most hooks
fileID	string	Yes (useFilePreview)	File identifier for preview fetching
provider	string	Varies	Model provider identifier for parameter rules
model	string	Varies	Model identifier for parameter rules
currentVersion	string or null	Varies	Current app version for version check query
token	string or null	Varies	Token for forgot password verification
params	object	Varies	Invitation check parameters (workspace_id, email, token)

Outputs

Name	Type	Description
UseQueryResult	UseQueryResult<T>	React Query result containing data, isLoading, isError, refetch, and other query state
UseMutationResult	UseMutationResult	React Query mutation result containing mutate, mutateAsync, isLoading, and other mutation state
invalidate function	() => void	Cache invalidation function returned by useInvalidDataSourceIntegrates

Usage Examples

Fetch Current User Profile

import { useUserProfile } from '@/service/use-common'

function UserInfo() {
  const { data, isLoading } = useUserProfile()

  if (isLoading) return <div>Loading...</div>

  return (
    <div>
      <p>{data?.profile.name}</p>
      <p>Version: {data?.meta.currentVersion}</p>
    </div>
  )
}

Check Login Status

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

function AuthGuard({ children }) {
  const { data } = useIsLogin()

  if (!data?.logged_in) return <LoginPage />
  return children
}

List Model Providers

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

function ModelProviderList() {
  const { data } = useModelProviders()

  return (
    <ul>
      {data?.data.map(provider => (
        <li key={provider.provider}>{provider.provider}</li>
      ))}
    </ul>
  )
}

Related Pages

• Principle:Langgenius_Dify_React_Query_Pattern
• Langgenius_Dify_Service_Base - HTTP wrappers used by query functions
• Langgenius_Dify_Service_Common - Service functions wrapped by some hooks