Implementation:Langgenius Dify Global Public Context

Knowledge Sources	Langgenius_Dify
Domains	Frontend, System Configuration, Application Bootstrap
Last Updated	2026-02-12 07:00 GMT

Overview

A Zustand-based global store and provider component that fetches and caches system-wide feature flags before rendering the rest of the application.

Description

The GlobalPublicStoreProvider is a lightweight initialization layer that ensures system feature configuration is available before any downstream components render. It uses Zustand (via create) for state management rather than React context, which makes the system features accessible both inside and outside the React tree through useGlobalPublicStore.getState().

The store holds a SystemFeatures object initialized with default values from defaultSystemFeatures. On mount, the provider triggers a TanStack Query fetch (via useSystemFeaturesQuery) that calls consoleClient.systemFeatures(), then merges the API response with defaults and writes it into the Zustand store. While this fetch is pending, the provider renders a full-screen loading spinner, ensuring no child component attempts to read uninitialized feature flags.

The module also exports a useSetupStatusQuery hook that prefetches the setup status with staleTime: Infinity, caching it in localStorage for the AppInitializer. Both queries run in parallel to reduce waterfall latency during application bootstrap.

Usage

Wrap the application root (or the outermost layout) with GlobalPublicStoreProvider to guarantee that system features are loaded before any other provider or page component mounts. Consume the features from any component or utility using useGlobalPublicStore(s => s.systemFeatures). This store is also referenced by AppContextProvider to conditionally control branding-related behavior.

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/context/global-public-context.tsx
Lines: 1-65

Signature

type GlobalPublicStore = {
  systemFeatures: SystemFeatures
  setSystemFeatures: (systemFeatures: SystemFeatures) => void
}

export const useGlobalPublicStore: UseBoundStore<StoreApi<GlobalPublicStore>>

export function useSystemFeaturesQuery(): UseQueryResult<SystemFeatures>

export function useIsSystemFeaturesPending(): boolean

export function useSetupStatusQuery(): UseQueryResult

const GlobalPublicStoreProvider: FC<PropsWithChildren>

Import

import GlobalPublicStoreProvider, {
  useGlobalPublicStore,
  useSystemFeaturesQuery,
  useIsSystemFeaturesPending,
  useSetupStatusQuery,
} from '@/context/global-public-context'

I/O Contract

Inputs

Name	Type	Required	Description
children	`PropsWithChildren`	Yes	Child components rendered after system features are loaded

Outputs

Name	Type	Description
systemFeatures	`SystemFeatures`	The merged system feature flags fetched from the API and combined with defaults
setSystemFeatures	`(systemFeatures: SystemFeatures) => void`	Manually updates the system features in the Zustand store
useSystemFeaturesQuery	`() => UseQueryResult`	TanStack Query hook returning the system features query state
useIsSystemFeaturesPending	`() => boolean`	Returns true while the system features fetch is still pending
useSetupStatusQuery	`() => UseQueryResult`	TanStack Query hook for the setup status with infinite stale time

Usage Examples

Wrapping the Application Root

import GlobalPublicStoreProvider from '@/context/global-public-context'

function RootLayout({ children }) {
  return (
    <GlobalPublicStoreProvider>
      {children}
    </GlobalPublicStoreProvider>
  )
}

Consuming System Features in a Component

import { useGlobalPublicStore } from '@/context/global-public-context'

function BrandingHeader() {
  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)

  if (!systemFeatures.branding.enabled) {
    return <DefaultHeader />
  }

  return <CustomBrandedHeader />
}

Checking System Features Outside React

import { useGlobalPublicStore } from '@/context/global-public-context'

function checkFeatureFlag() {
  const { systemFeatures } = useGlobalPublicStore.getState()
  return systemFeatures.branding.enabled
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment