Optimistic UI updates in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main purpose of optimistic UI updates in GraphQL?

Optimistic UI updates are used in GraphQL to improve user experience by:

A Caching all queries to avoid network requests

B Immediately showing the expected result of a mutation before the server responds

C Automatically retrying failed mutations without user input

D Waiting for the server response before updating the UI

💡 Hint

Think about how the UI feels faster to the user.

Optimistic UI updates show the expected result immediately, making the app feel faster and more responsive.

❓ query_result

intermediate

What will be the UI state immediately after this mutation with optimistic update?

Given this GraphQL mutation to add a new comment with optimistic response: mutation AddComment($text: String!) { addComment(text: $text) { id text } } Optimistic response: { addComment: { id: "temp-id", text: "Hello!" } } What will the UI show right after the mutation is sent but before server response?

GraphQL

UI shows the new comment with id 'temp-id' and text 'Hello!'

A The new comment with id 'temp-id' and text 'Hello!' appears immediately

B No new comment appears until server confirms

C An error message appears because 'temp-id' is invalid

D The UI shows a loading spinner but no comment

💡 Hint

Optimistic response is used to show data before server reply.

The optimistic response lets the UI display the new comment instantly with a temporary id.

📝 Syntax

advanced

Identify the syntax error in this optimistic update code snippet

This is a snippet of a GraphQL mutation with optimistic response in JavaScript: client.mutate({ mutation: ADD_TODO, variables: { text: 'Buy milk' }, optimisticResponse: { addTodo: { id: 'temp-id', text: 'Buy milk', __typename: 'Todo' } } }); What is the syntax error here?

GraphQL

client.mutate({
  mutation: ADD_TODO,
  variables: { text: 'Buy milk' },
  optimisticResponse: {
    addTodo: {
      id: 'temp-id',
      text: 'Buy milk',
      __typename: 'Todo'
    }
  }
});

A Missing __typename in the root optimisticResponse object

B optimisticResponse should be a function, not an object

C No syntax error; the code is correct

D Missing comma after 'addTodo' object

💡 Hint

Check if the object structure matches expected format.

The optimisticResponse is correctly structured with __typename inside the nested object, no syntax errors.

❓ optimization

advanced

Which approach best avoids UI flicker when using optimistic updates?

You want to update a list of items optimistically after a mutation. Which method best prevents flicker or jump in the UI?

A Update the cache directly with the optimistic response and merge with existing data

B Use a loading spinner instead of optimistic updates

C Clear the cache before applying optimistic update

D Wait for the server response before updating the cache

💡 Hint

Think about how to keep UI stable while data changes.

Directly updating the cache with optimistic data and merging it keeps UI stable and avoids flicker.

🔧 Debug

expert

Why does this optimistic update cause stale UI after server response?

You have this mutation with optimistic update: client.mutate({ mutation: UPDATE_USER, variables: { id: 1, name: 'Alice' }, optimisticResponse: { updateUser: { id: 1, name: 'Alice', __typename: 'User' } }, update: (cache, { data: { updateUser } }) => { cache.writeQuery({ query: GET_USER, variables: { id: 1 }, data: { user: updateUser } }); } }); After the server responds with updated user data, the UI still shows the optimistic name 'Alice' even if server returned 'Alicia'. What is the likely cause?

A The cache.writeQuery is missing a required id field

B The optimisticResponse is missing __typename at root level

C The mutation variables are incorrect causing cache not to update

D The update function overwrites server data with optimistic data because it runs after optimistic update

💡 Hint

Consider the order of cache writes and optimistic updates.

The update function writes the optimistic data again after server response, preventing the UI from showing server data.