Recommended
Challenge - 5 Problems
Optimistic UI Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate2:00remaining
What is the main purpose of optimistic UI updates in GraphQL?
Optimistic UI updates are used in GraphQL to improve user experience by:
Attempts:
2 left
💡 Hint
Think about how the UI feels faster to the user.
✗ Incorrect
Optimistic UI updates show the expected result immediately, making the app feel faster and more responsive.
❓ query_result
intermediate2:00remaining
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!'
Attempts:
2 left
💡 Hint
Optimistic response is used to show data before server reply.
✗ Incorrect
The optimistic response lets the UI display the new comment instantly with a temporary id.
📝 Syntax
advanced2:00remaining
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'
}
}
});Attempts:
2 left
💡 Hint
Check if the object structure matches expected format.
✗ Incorrect
The optimisticResponse is correctly structured with __typename inside the nested object, no syntax errors.
❓ optimization
advanced2:00remaining
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?
Attempts:
2 left
💡 Hint
Think about how to keep UI stable while data changes.
✗ Incorrect
Directly updating the cache with optimistic data and merging it keeps UI stable and avoids flicker.
🔧 Debug
expert3:00remaining
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?
Attempts:
2 left
💡 Hint
Consider the order of cache writes and optimistic updates.
✗ Incorrect
The update function writes the optimistic data again after server response, preventing the UI from showing server data.