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.