Frontend Data Flow

Request/Render Flow

User action (click/input)
   -> page or section handler
      -> GraphQL query/mutation via Apollo
         -> API response
            -> React state/UI update

Real-Time Flow

Subscription-capable screen
   -> Apollo split link chooses WebSocket transport
      -> subscription events received
         -> UI updates without full refresh

SSR/Client behavior summary

• _app.jsx initializes Apollo for server and client usage.
• On server render, required GraphQL data is fetched to pre-hydrate pages.
• On client, a shared Apollo instance is reused for performance.

Why this matters for non-technical readers

• Pages can load quickly with server-side data.
• Real-time features (like messaging) can update without manual refresh.
• Shared API wiring reduces repeated integration bugs across pages.