Frontend State & Apollo Client
Relevant source files
The following files were used as context for generating this wiki page:
The frontend state management system is built around the Apollo Client ecosystem, which serves as the primary interface for data orchestration between the React application and the GraphQL backend. It handles synchronous data fetching via Queries, state modifications via Mutations, and real-time streaming updates through Subscriptions.
The architecture emphasizes type safety and automation by leveraging graphql-codegen to generate TypeScript types and React hooks directly from the GraphQL schema and document definitions.
Sources: frontend/src/apollo.ts, frontend/package.json:8-9, frontend/codegen.yml
Apollo Client Configuration
The Apollo Client is configured to support hybrid transport protocols, allowing the application to switch between standard HTTP requests and persistent WebSocket connections.
Dual-Link Transport
The system implements a split link strategy. This logic inspects every outgoing GraphQL operation to determine the appropriate transport channel:
- WebSocketLink: Utilizes
subscriptions-transport-wsto handle real-timesubscriptionoperations, enabling features like live candle updates and watchlist price changes. - HttpLink: Standard transport for
queryandmutationoperations.
This diagram illustrates the internal routing of GraphQL operations based on the operation definition kind.
Sources: frontend/src/apollo.ts:7-31, frontend/package.json:23
Cache Management
The client uses an InMemoryCache for local state persistence and normalization. This prevents redundant network requests by storing and reusing fetched data across different components.
Sources: frontend/src/apollo.ts:34
Real-time Data Synchronization
Real-time capabilities are central to the technical analysis platform, particularly for financial charts and instrument tracking.
Subscription Implementation
Subscriptions are managed using specialized hooks such as useWatchListSubscription and useCandleSubscription. For complex components like the main chart, the subscribeToMore function is used to integrate subscription results into an existing query's result set.
| Subscription | Description | Data Structure |
|---|---|---|
watchList | Streams updates for instruments in the user's watchlist. | Array<Instrument> |
candle | Provides real-time OHLCV updates for the active chart. | CandleSubscriptionData |
trades | Streams algorithm execution updates. | Array<AlgorithmTrade> |
Sources: frontend/src/graphql.ts:187-200, frontend/src/pages/chart/index.tsx:75-98
Sequence Flow: Chart Data Update
The following sequence demonstrates how initial data is fetched and then augmented by real-time updates.
This diagram shows the transition from a standard query to a persistent subscription for live charting.
Sources: frontend/src/pages/chart/index.tsx:64-106
Integration and Tooling
ApolloProvider
The Apollo Client instance is injected into the React component tree at the root level using the ApolloProvider. This allows any child component to access the client and its generated hooks.
Sources: frontend/src/App.tsx:40-69
Automated Code Generation
The project uses graphql-codegen to maintain strict type synchronization between the frontend and the backend.
Key Plugins Used:
typescript: Generates base TypeScript types for the schema.typescript-operations: Generates types for specific queries and mutations.typescript-react-apollo: Generates typed React hooks (e.g.,useCandlesQuery).introspection: Generates thegraphql.schema.jsonfor tooling support.
Sources: frontend/codegen.yml:4-13, frontend/package.json:43-47
Key Data Models (GraphQL Types)
The following table summarizes the core entities managed by the Apollo Client state:
| Type | Description | Key Fields |
|---|---|---|
Instrument | Financial asset details. | ticker, figi, price |
Candle | Market price data point. | open, high, low, close, timestamp |
Indicator | Technical analysis overlay. | name, settings |
Shape | User-drawn graphical annotations. | name, points, ticker |
Sources: frontend/src/graphql.ts:40-100
Conclusion
The frontend state architecture leverages Apollo Client's advanced link splitting and caching to provide a responsive, real-time trading interface. By automating the generation of hooks and types, the system ensures that the frontend remains perfectly aligned with the backend GraphQL schema, reducing boilerplate and preventing runtime errors related to data structure mismatches.