This page details the frontend API client layer: the Axios-based HTTP client, its request and response interceptors, authentication handling for HttpOnly cookies, and the catalog of plain async API functions.
The API client layer resides in src/frontend/src/controllers/API/ and facilitates all communication between the React frontend and the Langflow backend. It consists of three primary pillars:
api.tsx: Defines the singleton Axios instance and the ApiInterceptor React component that manages request/response interceptors, token renewal, and error recovery. src/frontend/src/controllers/API/api.tsx24-27index.ts: Contains direct asynchronous wrappers for various backend services, including the Langflow Store, GitHub metadata, and API key management. src/frontend/src/controllers/API/index.ts20-58queries/: A subdirectory using TanStack React Query to wrap API calls in hooks (e.g., useQuery, useMutation) for server state management. src/frontend/src/controllers/API/api.tsx21Request Flow Diagram
Title: "Frontend to Backend Request Flow"
Sources: src/frontend/src/controllers/API/api.tsx24-27 src/frontend/src/controllers/API/api.tsx55-147 src/frontend/src/controllers/API/index.ts51-54
The api Axios instance is the core HTTP client. It is configured to handle the base URL and credential sharing for session-based authentication.
| Property | Source | Purpose |
|---|---|---|
baseURL | baseURL from @/customization/constants | Resolves the backend origin. src/frontend/src/controllers/API/api.tsx25 |
withCredentials | getAxiosWithCredentials() | Ensures HttpOnly cookies (access/refresh tokens) are sent with every request. src/frontend/src/controllers/API/api.tsx26 |
Sources: src/frontend/src/controllers/API/api.tsx24-27
ApiInterceptor ComponentApiInterceptor is a logic-only React component that registers Axios interceptors and standard fetch intercepts. It is mounted in the application root to ensure interceptors have access to Zustand stores and React Query mutations. src/frontend/src/controllers/API/api.tsx55-147
Registered via api.interceptors.request.use(...) at src/frontend/src/controllers/API/api.tsx194-222
checkDuplicateRequestAndStoreRequest(config) to abort redundant simultaneous calls. src/frontend/src/controllers/API/api.tsx200useCustomApiHeaders() for internal requests. src/frontend/src/controllers/API/api.tsx207-215isExternalURL. src/frontend/src/controllers/API/api.tsx176-190Registered via api.interceptors.response.use(...) at src/frontend/src/controllers/API/api.tsx91-147
Success Path: Resets health check timeouts via setHealthCheckTimeout(null) in the useUtilityStore. src/frontend/src/controllers/API/api.tsx93-95
Error Path (Auth & Retries): If a 401 or 403 error occurs, the interceptor attempts to refresh the access token unless auto-login is enabled or the request is for an external resource. src/frontend/src/controllers/API/api.tsx97-102
Title: "Response Interceptor Error Handling"
Sources: src/frontend/src/controllers/API/api.tsx91-147 src/frontend/src/controllers/API/api.tsx33-53
Routing and async wrappers are centralized to ensure consistency across the application.
The index.ts file provides specialized wrappers for the Langflow Store and component management. src/frontend/src/controllers/API/index.ts67-182
| Function | Endpoint Path | Purpose |
|---|---|---|
saveFlowStore | store/components/ | Saves a new flow or component to the store. src/frontend/src/controllers/API/index.ts81 |
getStoreComponents | store/components/ | Fetches paginated, filtered lists of components from the store. src/frontend/src/controllers/API/index.ts129 |
getComponent | store/components/{id} | Retrieves a specific component by ID. src/frontend/src/controllers/API/index.ts186 |
createApiKey | api_key/ | Generates a new Langflow API key. src/frontend/src/controllers/API/index.ts51 |
The AdminPage uses several mutations to manage the system's user base:
useGetUsers: Fetches paginated user lists with search support. src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts10useAddUser: Registers new users. src/frontend/src/controllers/API/queries/auth/index.ts10useUpdateUser: Modifies user status (active/superuser). src/frontend/src/controllers/API/queries/auth/index.ts11Sources: src/frontend/src/controllers/API/index.ts45-206 src/frontend/src/pages/AdminPage/index.tsx5-10 src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts10 src/frontend/src/controllers/API/queries/auth/index.ts10-11
The API layer is tightly coupled with AuthContext.tsx. While the browser handles HttpOnly cookies automatically, the frontend maintains state for userData and accessToken. src/frontend/src/contexts/authContext.tsx32-41
Title: "Auth State Restoration Sequence"
Sources: src/frontend/src/contexts/authContext.tsx49-65 src/frontend/src/pages/AdminPage/index.tsx46-78
This diagram bridges the UI components to the underlying API entities.
Title: "Component to API Entity Mapping"
Sources: src/frontend/src/controllers/API/api.tsx24-27 src/frontend/src/pages/AdminPage/index.tsx50-56 src/frontend/src/pages/StorePage/index.tsx105-118 src/frontend/src/pages/LoginPage/index.tsx40-41
Refresh this wiki
This wiki was recently refreshed. Please wait 5 days to refresh again.