Implementation:Langgenius Dify Use Explore

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

Overview

React Query hooks for the Explore page providing cached data fetching for recommended apps, installed apps, app parameters, app metadata, access modes, banners, and app management mutations.

Description

use-explore.ts provides React Query hooks for the Dify Explore page, which is the app marketplace and discovery interface. The module exports: useExploreAppList fetches and sorts the recommended app list by position, keyed by the current locale for language-aware caching; useGetInstalledApps fetches the list of installed applications; useUninstallApp is a useMutation that removes an installed app and invalidates the installed apps cache on success; useUpdateAppPinStatus is a useMutation that toggles the pinned state of an installed app with automatic cache invalidation; useGetInstalledAppAccessModeByAppId checks the enterprise access mode for an installed app, returning AccessMode.PUBLIC when webapp_auth is disabled via systemFeatures from useGlobalPublicStore; useGetInstalledAppParams and useGetInstalledAppMeta fetch app parameters and metadata respectively using fetchAppParams and fetchAppMeta from the share service with AppSourceType.installedApp; and useGetBanners fetches promotional banners with optional locale filtering. All hooks use the "explore" namespace for query keys.

Usage

Use these hooks in Explore page components, app cards, installed app lists, and app detail views. The hooks handle caching, deduplication, and automatic cache invalidation for mutation operations.

Code Reference

Source Location

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

Signature

export const useExploreAppList = () => UseQueryResult<ExploreAppListData>

export const useGetInstalledApps = () => UseQueryResult<any>

export const useUninstallApp = () => UseMutationResult<any, unknown, string>

export const useUpdateAppPinStatus = () => UseMutationResult<
  any,
  unknown,
  { appId: string, isPinned: boolean }
>

export const useGetInstalledAppAccessModeByAppId = (
  appId: string | null
) => UseQueryResult<{ accessMode: AccessMode }>

export const useGetInstalledAppParams = (
  appId: string | null
) => UseQueryResult<any>

export const useGetInstalledAppMeta = (
  appId: string | null
) => UseQueryResult<any>

export const useGetBanners = (locale?: string) => UseQueryResult<Banner[]>

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
appId	string or null	Varies	App ID for access mode, params, and meta queries; null disables the query
locale	string	No	Language locale for fetching banners
appId (mutation)	string	Yes (useUninstallApp)	Installed app ID to uninstall
isPinned	boolean	Yes (useUpdateAppPinStatus)	Whether to pin or unpin the app

Outputs

Name	Type	Description
ExploreAppListData	{ categories: AppCategory[], allList: App[] }	Categories and sorted list of recommended apps
installed apps	any	List of installed applications
accessMode	AccessMode	Public or restricted access mode for the app
Banner[]	Banner[]	Promotional banners for the explore page

Usage Examples

Explore App List

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

function ExploreGrid() {
  const { data, isLoading } = useExploreAppList()

  if (isLoading) return <Skeleton />

  return (
    <div>
      {data?.allList.map(app => (
        <AppCard key={app.id} app={app} />
      ))}
    </div>
  )
}

Uninstall an App

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

function AppActions({ appId }: { appId: string }) {
  const { mutate: uninstall } = useUninstallApp()

  return (
    <button onClick={() => uninstall(appId)}>
      Uninstall
    </button>
  )
}

Pin/Unpin App

import { useUpdateAppPinStatus } from '@/service/use-explore'

function PinButton({ appId, isPinned }: { appId: string, isPinned: boolean }) {
  const { mutate } = useUpdateAppPinStatus()

  return (
    <button onClick={() => mutate({ appId, isPinned: !isPinned })}>
      {isPinned ? 'Unpin' : 'Pin'}
    </button>
  )
}

Related Pages

• Principle:Langgenius_Dify_Explore_Feature
• Langgenius_Dify_Service_Explore - Service functions consumed by these hooks
• Langgenius_Dify_Use_Share - Share service functions used for app params and meta