Optimistic UI updates in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the optimistic response for a mutation.

GraphQL

mutation UpdateUserName($id: ID!, $name: String!) {
  updateUser(id: $id, name: $name) {
    id
    name
  }
}

const optimisticResponse = {
  updateUser: {
    __typename: 'User',
    id: [1],
    name: 'New Name'
  }
};

Drag options to blanks, or click blank then click option'

Anull

B'temp-id'

C123

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined for id causes errors.

Using a number instead of a string for id.

The optimistic response needs a temporary id as a string to match the expected type.

2fill in blank

medium

Complete the code to update the cache after a mutation with optimistic UI.

GraphQL

cache.modify({
  id: cache.identify({ __typename: 'User', id: [1] }),
  fields: {
    name() {
      return 'Updated Name';
    }
  }
});

Drag options to blanks, or click blank then click option'

AuserId

Bnull

C'temp-id'

D123

Attempts:

3 left

💡 Hint

Common Mistakes

Using a real user id instead of the temporary optimistic id.

Using null or undefined as id.

The cache.modify needs the id used in the optimistic response, which is 'temp-id'.

3fill in blank

hard

Fix the error in the optimistic response by completing the missing __typename.

GraphQL

const optimisticResponse = {
  updateUser: {
    [1]: 'User',
    id: 'temp-id',
    name: 'Optimistic Name'
  }
};

Drag options to blanks, or click blank then click option'

A__typename

Btypename

CtypeName

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'typename' or 'typeName' instead of '__typename'.

Omitting the __typename field causes cache errors.

The __typename field is required for Apollo Client to identify the object type in the cache.

4fill in blank

hard

Fill both blanks to write an optimistic response with correct __typename and id.

GraphQL

const optimisticResponse = {
  updateUser: {
    [1]: 'User',
    id: [2],
    name: 'Optimistic Update'
  }
};

Drag options to blanks, or click blank then click option'

A__typename

B'temp-id'

C'real-id'

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'real-id' instead of a temporary id.

Omitting __typename or using wrong field names.

The optimistic response must include __typename and a temporary id string.

5fill in blank

hard

Fill all three blanks to write a cache update function using optimistic UI with correct id, field, and value.

GraphQL

cache.modify({
  id: cache.identify({ __typename: [1], id: [2] }),
  fields: {
    [3]() {
      return 'Optimistic Value';
    }
  }
});

Drag options to blanks, or click blank then click option'

A'User'

B'temp-id'

Cname

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using real user id instead of temporary id.

Using wrong field names or missing __typename.

The cache.modify needs the __typename 'User', the temporary id 'temp-id', and the field name 'name' to update.

Practice

1. What is the main purpose of using optimisticResponse in GraphQL client updates?

easy

A. To show UI changes immediately before the server responds

B. To delay UI updates until the server confirms

C. To rollback UI changes after server response

D. To fetch data from the server without updating UI

Solution

1. Step 1: Understand optimisticResponse role

   The optimisticResponse is used to update the UI instantly, assuming the server will succeed.

2. Step 2: Compare options with purpose

   Only To show UI changes immediately before the server responds describes showing UI changes immediately before server confirmation, which matches the optimistic update concept.

3. Final Answer:

   To show UI changes immediately before the server responds -> Option A

4. Quick Check:

   optimisticResponse = immediate UI update [OK]

Hint: Think: optimistic means 'hopeful' update shown early [OK]

Common Mistakes:

• Confusing optimisticResponse with delayed updates
• Thinking it rolls back changes automatically
• Assuming it fetches data without UI change

2. Which of the following is the correct syntax to provide an optimistic response in a GraphQL mutation using Apollo Client?

easy

A. mutation({ variables, optimisticResponse: { id: 1, name: 'Test' } })

B. mutation({ variables, optimisticResponse: { __typename: 'User', id: 1, name: 'Test' } })

C. mutation({ variables, optimistic: { id: 1, name: 'Test' } })

D. mutation({ variables, optimisticResponse: { id: 1 } })

Solution

1. Step 1: Recall optimisticResponse structure

   The optimisticResponse must include the __typename field to match the GraphQL schema type.

2. Step 2: Check each option for __typename

   Only mutation({ variables, optimisticResponse: { __typename: 'User', id: 1, name: 'Test' } }) includes __typename: 'User' along with id and name, making it syntactically correct.

3. Final Answer:

   mutation({ variables, optimisticResponse: { __typename: 'User', id: 1, name: 'Test' } }) -> Option B

4. Quick Check:

   Include __typename in optimisticResponse [OK]

Hint: Always add __typename in optimisticResponse object [OK]

Common Mistakes:

• Omitting __typename causes errors
• Using 'optimistic' instead of 'optimisticResponse'
• Providing incomplete optimisticResponse data

3. Given this mutation call with optimisticResponse:

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

What will the UI show immediately after this mutation is called but before the server responds?

medium

A. An error message about missing id

B. No change until server responds

C. A new todo with id 'temp-id' and text 'Buy milk' shown

D. A blank todo item with no text

Solution

1. Step 1: Analyze optimisticResponse content

   The optimisticResponse provides a new todo with id 'temp-id', text 'Buy milk', and completed false.

2. Step 2: Understand UI behavior

   The UI will immediately show this new todo item with the given fields before server confirmation.

3. Final Answer:

   A new todo with id 'temp-id' and text 'Buy milk' shown -> Option C

4. Quick Check:

   optimisticResponse shows temporary UI data [OK]

Hint: optimisticResponse data appears instantly in UI [OK]

Common Mistakes:

• Expecting no UI change before server response
• Thinking optimisticResponse causes errors
• Assuming blank or incomplete UI display

4. You wrote this optimisticResponse but the UI does not update immediately:

optimisticResponse: {
  addTodo: {
    id: 'temp-id',
    text: 'Buy milk',
    completed: false
  }
}

What is the most likely reason for this issue?

medium

A. optimisticResponse should be a function

B. Variables object is empty

C. Mutation name is incorrect

D. Missing __typename fields in optimisticResponse

Solution

1. Step 1: Check optimisticResponse structure

   The optimisticResponse must include __typename for each object to match the schema.

2. Step 2: Identify missing fields

   The given optimisticResponse lacks __typename fields, causing Apollo Client to ignore it.

3. Final Answer:

   Missing __typename fields in optimisticResponse -> Option D

4. Quick Check:

   __typename required for optimisticResponse to work [OK]

Hint: Always add __typename to every object in optimisticResponse [OK]

Common Mistakes:

• Forgetting __typename causes no UI update
• Assuming variables affect optimisticResponse directly
• Thinking optimisticResponse must be a function

5. You want to implement an optimistic UI update for a mutation that toggles a user's 'active' status. The server might reject the change. Which approach best ensures UI consistency?

hard

A. Use optimisticResponse to toggle status immediately and handle errors to revert if needed

B. Wait for server response before updating UI to avoid inconsistencies

C. Update UI without optimisticResponse and ignore server errors

D. Use optimisticResponse but do not handle errors, assuming success

Solution

1. Step 1: Understand optimistic UI with possible server rejection

   Optimistic UI shows changes immediately but must handle errors to keep UI correct.

2. Step 2: Evaluate options for best practice

   Use optimisticResponse to toggle status immediately and handle errors to revert if needed uses optimisticResponse for instant UI update and error handling to revert if server rejects, ensuring consistency.

3. Final Answer:

   Use optimisticResponse to toggle status immediately and handle errors to revert if needed -> Option A

4. Quick Check:

   Optimistic update + error handling = consistent UI [OK]

Hint: Combine optimisticResponse with error handling for safe UI [OK]

Common Mistakes:

• Ignoring error handling causes UI mismatch
• Waiting for server loses optimistic UI benefits
• Assuming optimisticResponse alone guarantees correctness