Real-time Updates

Optimistic Updates for UI Responsiveness

To ensure the UI feels instantaneous, especially for frequent operations like drag-and-drop, the frontend employs an Optimistic Update pattern. The client immediately updates its local state/UI and rolls back only if the backend operation fails.

The Optimistic Update Flow

sequenceDiagram participant User participant ClientUI as React Components participant ClientState as Apollo Cache participant Backend as GraphQL API User->>+ClientUI: Drags and drops Object A onto Object B ClientUI->>+ClientState: Dispatch 'moveObject' action ClientState->>ClientUI: New state (Object A is now inside B) ClientUI->>User: Renders instantly ClientState->>+Backend: Executes 'moveObject' mutation alt Backend succeeds Backend-->>-ClientState: success (state is already correct) else Backend fails Backend-->>-ClientState: error ClientState->>ClientUI: rollback ClientUI->>User: display error end

Real-time Architecture

graph LR A[User Action] --> B{Frontend GraphQL Client} B -- "Query / Mutation" --> C[GraphQL API] C -- "Resolves against" --> D[Neo4j & Supabase] C -- "Returns" --> B B --> E[React Components] subgraph Real-time F[Backend Event] --> G[Subscription Server] G --> B end

GraphQL Subscriptions

Example React hook:

import { useSubscription, gql } from '@apollo/client';
const OBJECT_UPDATED = gql`subscription OnObjectUpdate($objectId: ID!){objectUpdated(id:$objectId){id name statuses spatialParent{ id name }}}`;
export const useObjectUpdates = (objectId:string)=>{
  const {data,loading}=useSubscription(OBJECT_UPDATED,{variables:{objectId}});
  return {updatedObject:data?.objectUpdated,loading};
};