Inline fragments in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch the name field from a User type using an inline fragment.

GraphQL

query {
  user(id: "1") {
    ... on [1] {
      name
    }
  }
}

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

AComment

BPost

CUser

DProfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong type name in the inline fragment.

Forgetting the 'on' keyword in the inline fragment.

The inline fragment specifies the type User to fetch the name field only if the object is of type User.

2fill in blank

medium

Complete the code to fetch the title field from a Post type using an inline fragment.

GraphQL

query {
  node(id: "2") {
    ... on [1] {
      title
    }
  }
}

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

AUser

BProfile

CComment

DPost

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong type name in the inline fragment.

Not using an inline fragment when the type is not known.

The inline fragment targets the Post type to fetch the title field.

3fill in blank

hard

Fix the error in the inline fragment to fetch the text field from a Comment type.

GraphQL

query {
  node(id: "3") {
    ... [1] {
      text
    }
  }
}

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

Aon Comment

BComment

ConComment

Don comment

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the 'on' keyword.

Using incorrect capitalization or spacing.

The correct syntax for inline fragments includes the keyword on followed by the type name, like ... on Comment.

4fill in blank

hard

Fill both blanks to fetch the name from User and title from Post using inline fragments.

GraphQL

query {
  node(id: "4") {
    ... on [1] {
      name
    }
    ... on [2] {
      title
    }
  }
}

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

AUser

BPost

CComment

DProfile

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up type names for the fields.

Forgetting to use inline fragments for different types.

The first inline fragment targets User to get name, and the second targets Post to get title.

5fill in blank

hard

Fill all three blanks to fetch name from User, title from Post, and text from Comment using inline fragments.

GraphQL

query {
  node(id: "5") {
    ... on [1] {
      name
    }
    ... on [2] {
      title
    }
    ... on [3] {
      text
    }
  }
}

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

AUser

BPost

CComment

DProfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong type names for fields.

Not using inline fragments for multiple types.

Each inline fragment targets the correct type to fetch the respective fields: name from User, title from Post, and text from Comment.