Implementation:Langgenius Dify ORPC Client

Knowledge Sources	Langgenius_Dify
Domains	Frontend, API Client, oRPC
Last Updated	2026-02-08 00:00 GMT

Overview

Configures typed oRPC clients and TanStack Query utilities for the Dify console and marketplace APIs using contract-first OpenAPI links.

Description

The oRPC Client module sets up two typed API clients -- one for the Dify console API and one for the marketplace API -- using the @orpc/client and @orpc/openapi-client libraries. Each client is backed by an OpenAPILink that binds a router contract (imported from @/contract/router) to its respective API prefix URL. The marketplace link uses a custom X-Dify-Version header and standard globalThis.fetch with no-store caching, while the console link delegates fetching to the app's authenticated request function from the base service layer. Both links include onError interceptors for error logging. The module also exports createTanstackQueryUtils wrappers (marketplaceQuery and consoleQuery) that provide type-safe React Query integration for each client. A helper getBaseURL function resolves API prefix paths to full URLs, handling both client-side and server-side environments.

Usage

Use consoleClient and consoleQuery for type-safe calls to the Dify console backend API from React components. Use marketplaceClient and marketplaceQuery for marketplace plugin and template API calls. The query utilities integrate directly with TanStack React Query for automatic caching, invalidation, and suspense support.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/service/client.ts

Signature

export function getBaseURL(path: string): URL

export const marketplaceClient: JsonifiedClient<ContractRouterClient<typeof marketplaceRouterContract>>
export const marketplaceQuery: TanstackQueryUtils

export const consoleClient: JsonifiedClient<ContractRouterClient<typeof consoleRouterContract>>
export const consoleQuery: TanstackQueryUtils

Import

import { consoleClient, consoleQuery, marketplaceClient, marketplaceQuery, getBaseURL } from '@/service/client'

I/O Contract

Inputs

Name	Type	Required	Description
path	string	Yes (getBaseURL)	API prefix path to resolve into a full URL
API_PREFIX	string	Yes (env config)	Console API base path from app configuration
MARKETPLACE_API_PREFIX	string	Yes (env config)	Marketplace API base URL from app configuration
APP_VERSION	string	Yes (env config)	Current Dify app version sent as X-Dify-Version header

Outputs

Name	Type	Description
consoleClient	JsonifiedClient	Typed oRPC client for Dify console API calls
consoleQuery	TanstackQueryUtils	TanStack React Query utilities bound to the console client
marketplaceClient	JsonifiedClient	Typed oRPC client for Dify marketplace API calls
marketplaceQuery	TanstackQueryUtils	TanStack React Query utilities bound to the marketplace client
URL	URL	Resolved base URL object from getBaseURL

Usage Examples

import { consoleClient, consoleQuery, marketplaceQuery } from '@/service/client'

// Direct client call
const result = await consoleClient.apps.list({ page: 1 })

// Using TanStack Query utilities in a component
const { data } = consoleQuery.apps.list.useQuery({ queryKey: ['apps'], input: { page: 1 } })

// Marketplace query
const { data: plugins } = marketplaceQuery.plugins.list.useQuery({ queryKey: ['plugins'] })

// Resolve a base URL
import { getBaseURL } from '@/service/client'
const url = getBaseURL('/console/api')

Related Pages

• Langgenius_Dify_Fetch_Layer - Base fetch layer used by the console link for authenticated requests
• Langgenius_Dify_Refresh_Token - Token refresh mechanism invoked when console requests return 401