relay-mutations-patterns

Optimistic updates in Relay mutations provide immediate UI feedback by specifying an optimisticResponse in commitMutation or useMutation, which reflects changes before the server responds. Use optimisticUpdater to modify the normalized cache directly, ensuring the UI updates instantly while the mutation completes in the background.

Relay mutations support error handling through onError and onCompleted callbacks in commitMutation. On failure, the optimistic update automatically rolls back to the previous cache state, restoring the UI to its pre-mutation condition without manual intervention.

Use @appendEdge and @connection directives to automatically manage list updates in Relay mutations. These directives handle adding new edges to connections and maintaining proper list ordering, eliminating manual cache updates for collection-based mutations like createPost or createComment.

Yes, Relay provides useMutation hook for functional components, offering the same mutation capabilities as commitMutation with a hooks-based API. useMutation integrates seamlessly with Relay's normalized cache and supports optimisticResponse, optimisticUpdater, and error handling.

No, Relay's @appendEdge and @connection directives automate cache updates for connection-based mutations. Custom optimisticUpdater functions are only necessary for complex mutations requiring non-standard cache manipulation beyond standard edge insertion.

Relay's normalized cache stores entities by type and ID, allowing optimisticResponse to instantly update all UI components referencing that entity. The optimisticUpdater can modify connections and relationships, with automatic rollback if the mutation fails server-side.