Optimistic UI updates in GraphQL - Step-by-Step Execution

Concept Flow - Optimistic UI updates

User triggers mutation

↓

UI immediately updates (optimistic)

↓

Send mutation request to server

↓

Server processes mutation

↓

Confirm UI

When a user triggers a change, the UI updates right away (optimistic update) before the server confirms. Then the server response either confirms or rolls back the UI.

Execution Sample

GraphQL

mutation AddTodo {
  addTodo(text: "Buy milk") {
    id
    text
  }
}

# UI shows new todo immediately before server response

This mutation adds a todo item and the UI shows it immediately, assuming success.

Execution Table

Step	Action	UI State	Server Response	Resulting UI State
1	User clicks 'Add Todo'	No new todo shown yet	No request sent yet	No change
2	UI adds todo optimistically	New todo 'Buy milk' shown	Request sent to server	New todo visible
3	Server processes mutation	New todo visible	Server returns success with id=101	UI confirms todo with id=101
4	User sees confirmed todo	Todo with id=101 shown	No new response	UI stable
5	If server failed	New todo visible	Server returns error	UI removes optimistic todo

💡 Execution ends when server response confirms or rejects the optimistic update

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5
UI_TodoList	[]	[{text: 'Buy milk', id: null}]	[{text: 'Buy milk', id: 101}]	[] if error, else unchanged

Key Moments - 3 Insights

Why does the UI show the new todo before the server responds?

The UI updates optimistically to give instant feedback, as shown in execution_table step 2, improving user experience.

What happens if the server returns an error?

The UI rolls back the optimistic update and removes the todo, as shown in execution_table step 5.

How does the UI know to replace the temporary todo with the confirmed one?

When the server responds with the new todo's id (step 3), the UI updates the todo item to include this id.

Visual Quiz - 3 Questions

Look at the execution_table, what is the UI state immediately after the user clicks 'Add Todo'?

A New todo 'Buy milk' is shown optimistically

B No new todo is shown yet

C Todo with id=101 is shown

D UI removes the todo

💡 Hint

Check execution_table row 1 under 'UI State'

At which step does the UI confirm the todo with the server-assigned id?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at execution_table row 3 under 'Resulting UI State'

If the server returns an error, what happens to the UI_TodoList variable?

A It keeps the optimistic todo

B It adds a duplicate todo

C It removes the optimistic todo

D It shows a loading spinner

💡 Hint

See variable_tracker after Step 5 and execution_table step 5

Concept Snapshot

Optimistic UI updates:
- UI updates immediately on user action
- Sends mutation to server in background
- On success, UI confirms update
- On failure, UI rolls back
- Improves user experience by reducing wait

Full Transcript

Optimistic UI updates happen when the user triggers a change, and the UI immediately shows the change before the server confirms. This makes the app feel faster. The mutation is sent to the server. If the server confirms success, the UI finalizes the change with server data like IDs. If the server returns an error, the UI removes the optimistic change to stay consistent. This flow helps users see instant feedback while keeping data accurate.