Implementation:Langgenius Dify UseExplore

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Explore, App Discovery
Last Updated	2026-02-08 00:00 GMT

Overview

React Query hooks for the Dify Explore page, providing app discovery, installed app management, pin status toggling, access mode resolution, and banner retrieval.

Description

The UseExplore module provides TanStack React Query hooks for the Dify Explore section, which is the app discovery and management interface for end users. The module includes:

• useExploreAppList -- Fetches the recommended app catalog with categories, sorted by position, using the current locale.
• useGetInstalledApps -- Retrieves the list of apps installed by the current user.
• useUninstallApp -- Mutation to uninstall an app, with automatic cache invalidation of the installed apps list.
• useUpdateAppPinStatus -- Mutation to pin or unpin an installed app, with cache invalidation.
• useGetInstalledAppAccessModeByAppId -- Queries the access mode for an installed app, returning PUBLIC when webapp auth is disabled.
• useGetInstalledAppParams -- Fetches app parameters for an installed app.
• useGetInstalledAppMeta -- Fetches app metadata for an installed app.
• useGetBanners -- Retrieves promotional banners for the Explore page, optionally filtered by locale.

Usage

Use these hooks in the Explore page components and installed app views to display discoverable applications, manage user app installations, and render promotional banners.

Code Reference

Source Location

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

Signature

export const useExploreAppList: () => UseQueryResult<ExploreAppListData>
export const useGetInstalledApps: () => UseQueryResult
export const useUninstallApp: () => UseMutationResult<unknown, unknown, string>
export const useUpdateAppPinStatus: () => UseMutationResult<unknown, unknown, { appId: string, isPinned: boolean }>
export const useGetInstalledAppAccessModeByAppId: (appId: string | null) => UseQueryResult<{ accessMode: AccessMode }>
export const useGetInstalledAppParams: (appId: string | null) => UseQueryResult
export const useGetInstalledAppMeta: (appId: string | null) => UseQueryResult
export const useGetBanners: (locale?: string) => UseQueryResult

Import

import {
  useExploreAppList,
  useGetInstalledApps,
  useUninstallApp,
  useUpdateAppPinStatus,
  useGetInstalledAppAccessModeByAppId,
  useGetInstalledAppParams,
  useGetInstalledAppMeta,
  useGetBanners,
} from '@/service/use-explore'

I/O Contract

Inputs

Name	Type	Required	Description
appId	null	Yes (access mode/params/meta)	The installed app ID to query
isPinned	boolean	Yes (pin mutation)	Whether to pin (true) or unpin (false) the app
locale	string	No (banners)	Locale code to filter banners

Outputs

Name	Type	Description
categories	AppCategory[]	Explore app categories
allList	App[]	All recommended apps sorted by position
accessMode	AccessMode	Access mode for the installed app (PUBLIC when auth disabled)

Usage Examples

import { useExploreAppList, useGetInstalledApps, useUninstallApp } from '@/service/use-explore'

// Display explore apps
const { data } = useExploreAppList()
const categories = data?.categories ?? []
const apps = data?.allList ?? []

// List installed apps
const { data: installedApps } = useGetInstalledApps()

// Uninstall an app
const { mutate: uninstall } = useUninstallApp()
uninstall('installed-app-123')

Related Pages

• Langgenius_Dify_UseShare - Share service hooks used for fetching app meta and params
• Langgenius_Dify_Access_Control_Service - Access control hooks for enterprise app access management