Implementation:Langgenius Dify Use Share

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

Overview

React Query hooks for shared webapp and public-facing application functionality including app info, conversations, chat history, access mode verification, human input forms, and conversation name generation.

Description

use-share.ts provides React Query hooks for the Dify shared webapp experience, covering all data needs for publicly shared applications and installed app views. The module defines a centralized shareQueryKeys object for cache key management under the "webapp" namespace. It exports: useGetWebAppAccessModeByCode checks the access mode for a webapp by share code with staleTime: 0 to prevent caching stale permissions; useGetWebAppInfo fetches app info for the current webapp; useGetWebAppParams and useGetWebAppMeta fetch app parameters and metadata; useShareConversations fetches paginated conversation lists with complex enablement logic (disabled for tryApp source type and for installedApp without an appId); useShareChatList fetches the chat message list for a specific conversation with staleTime: 0 to ensure fresh data when switching conversations; useShareConversationName generates or retrieves the name for a conversation; useInvalidateShareConversations provides cache invalidation for the conversations query. The module also includes HumanInputFormError (a custom error class with code and status properties), useGetHumanInputForm for fetching human-in-the-loop form data with specialized error handling that wraps Response errors into HumanInputFormError instances, and useSubmitHumanInputForm for submitting form responses. All hooks support conditional enablement and configurable refetch behaviors via ShareQueryOptions.

Usage

Use these hooks in shared webapp pages, installed app views, conversation sidebars, chat message panels, and human input form pages. The hooks handle the complexities of different app source types (webApp, installedApp, tryApp) and manage conversation data lifecycle.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/service/use-share.ts
• Lines: 1-212

Signature

// Query keys
export const shareQueryKeys = {
  appAccessMode: (code: string | null) => [NAME_SPACE, 'appAccessMode', code] as const,
  appInfo: [NAME_SPACE, 'appInfo'] as const,
  appParams: [NAME_SPACE, 'appParams'] as const,
  appMeta: [NAME_SPACE, 'appMeta'] as const,
  conversations: [NAME_SPACE, 'conversations'] as const,
  conversationList: (params) => [NAME_SPACE, 'conversations', params] as const,
  chatList: (params) => [NAME_SPACE, 'chatList', params] as const,
  conversationName: (params) => [NAME_SPACE, 'conversationName', params] as const,
  humanInputForm: (token: string) => [NAME_SPACE, 'humanInputForm', token] as const,
}

// Query hooks
export const useGetWebAppAccessModeByCode = (code: string | null) => UseQueryResult
export const useGetWebAppInfo = () => UseQueryResult
export const useGetWebAppParams = () => UseQueryResult
export const useGetWebAppMeta = () => UseQueryResult
export const useShareConversations = (params: ShareConversationsParams, options?: ShareQueryOptions) => UseQueryResult<AppConversationData>
export const useShareChatList = (params: ShareChatListParams, options?: ShareQueryOptions) => UseQueryResult
export const useShareConversationName = (params: ShareConversationNameParams, options?: ShareQueryOptions) => UseQueryResult<ConversationItem>
export const useGetHumanInputForm = (token: string, options?: ShareQueryOptions) => UseQueryResult<HumanInputFormData, HumanInputFormError>

// Mutation hooks
export const useSubmitHumanInputForm = () => UseMutationResult<any, unknown, SubmitHumanInputFormParams>

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

// Error class
export class HumanInputFormError extends Error {
  code: string
  status: number
}

Import

import {
  useGetWebAppInfo,
  useGetWebAppParams,
  useShareConversations,
  useShareChatList,
  useInvalidateShareConversations,
  shareQueryKeys,
} from '@/service/use-share'

import {
  useGetHumanInputForm,
  useSubmitHumanInputForm,
  HumanInputFormError,
} from '@/service/use-share'

I/O Contract

Inputs

Name	Type	Required	Description
code	string or null	Varies	App share code for access mode check
params.appSourceType	AppSourceType	Yes	Source type: webApp, installedApp, or tryApp
params.appId	string	Varies	App ID, required for installedApp source type
params.conversationId	string	Varies	Conversation ID for chat list and name queries
params.lastId	string	No	Last conversation ID for pagination
params.pinned	boolean	No	Filter for pinned conversations
params.limit	number	No	Page size limit for conversation list
options.enabled	boolean	No	Controls whether the query is active
options.refetchOnWindowFocus	boolean	No	Refetch when window regains focus
options.refetchOnReconnect	boolean	No	Refetch when network reconnects
token	string	Yes (human input)	Token identifying the human input form
data.inputs	Record<string, string>	Yes (submit)	Form input values for submission
data.action	string	Yes (submit)	Action to take (e.g., 'approve', 'reject')

Outputs

Name	Type	Description
AppConversationData	AppConversationData	List of conversations with pagination info
ConversationItem	ConversationItem	Conversation details including generated name
HumanInputFormData	HumanInputFormData	Form schema and metadata for human input
HumanInputFormError	HumanInputFormError	Custom error with code and status for form fetch failures

Usage Examples

Shared Webapp Conversations

import { useShareConversations } from '@/service/use-share'
import { AppSourceType } from '@/service/share'

function ConversationSidebar() {
  const { data } = useShareConversations({
    appSourceType: AppSourceType.webApp,
    limit: 20,
    pinned: false,
  })

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

Chat Message List

import { useShareChatList } from '@/service/use-share'

function ChatPanel({ conversationId }: { conversationId: string }) {
  const { data } = useShareChatList({
    conversationId,
    appSourceType: AppSourceType.webApp,
  })

  return (
    <div>
      {data?.data.map(message => (
        <ChatMessage key={message.id} message={message} />
      ))}
    </div>
  )
}

Human Input Form

import { useGetHumanInputForm, useSubmitHumanInputForm, HumanInputFormError } from '@/service/use-share'

function HumanInputPage({ token }: { token: string }) {
  const { data: form, error } = useGetHumanInputForm(token)
  const { mutate: submit } = useSubmitHumanInputForm()

  if (error instanceof HumanInputFormError) {
    return <div>Error {error.status}: {error.message}</div>
  }

  const handleSubmit = (inputs: Record<string, string>) => {
    submit({ token, data: { inputs, action: 'approve' } })
  }

  return <DynamicForm schema={form} onSubmit={handleSubmit} />
}

Related Pages

• Principle:Langgenius_Dify_React_Query_Pattern
• Langgenius_Dify_Service_Base - HTTP wrappers consumed by share service functions
• Langgenius_Dify_Use_Explore - Explore hooks that also consume share service functions
• Langgenius_Dify_Webapp_Auth - Token management for webapp authentication