Inline fragments in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this GraphQL query using inline fragments?

Given this GraphQL schema with types Book and Magazine implementing Publication, and this query:

{
  publications {
    title
    ... on Book {
      author
    }
    ... on Magazine {
      issue
    }
  }
}

Assuming the data has one Book titled "GraphQL Guide" by "Alice" and one Magazine titled "Tech Monthly" with issue 42, what is the query result?

A [{"title": "GraphQL Guide", "issue": 42}, {"title": "Tech Monthly", "author": "Alice"}]

B [{"title": "GraphQL Guide"}, {"title": "Tech Monthly"}]

C [{"title": "GraphQL Guide", "author": "Alice"}, {"title": "Tech Monthly", "issue": 42}]

D [{"author": "Alice"}, {"issue": 42}]

💡 Hint

Inline fragments allow you to select fields specific to a type when querying an interface or union.

The query returns a list of publications. For each item, it includes the title field, and then uses inline fragments to include author only if the item is a Book, and issue only if the item is a Magazine. So the Book has author, the Magazine has issue.

🧠 Conceptual

intermediate

Why use inline fragments in GraphQL queries?

Choose the best reason why inline fragments are used in GraphQL queries.

A To paginate large lists of data efficiently.

B To sort query results on the server side.

C To define reusable fragments that can be used across multiple queries.

D To conditionally select fields based on the runtime type of an object implementing an interface or union.

💡 Hint

Think about how GraphQL handles interfaces and unions with different possible types.

Inline fragments let you specify fields that only apply to certain types when querying interfaces or unions. This lets you get type-specific data in one query.

📝 Syntax

advanced

Identify the syntax error in this GraphQL query using inline fragments

Which option contains a syntax error in the use of inline fragments?

{
  search(term: "GraphQL") {
    ... on Book {
      title
      author
    }
    ... Magazine {
      title
      issue
    }
  }
}

A The fragment on <code>Book</code> should be named with a fragment name.

B The fragment on <code>Magazine</code> is missing the keyword <code>on</code>.

C Inline fragments cannot be used inside queries.

D The <code>search</code> field cannot have inline fragments.

💡 Hint

Check the syntax for inline fragments carefully.

Inline fragments require the keyword on before the type name. The fragment on Magazine is missing on, causing a syntax error.

❓ optimization

advanced

How do inline fragments improve query efficiency in GraphQL?

Which option best explains how inline fragments can optimize GraphQL queries?

A They allow fetching only the fields relevant to the actual type, reducing unnecessary data transfer.

B They automatically cache query results on the client side.

C They enable batch loading of related objects in one request.

D They compress the query string to reduce network size.

💡 Hint

Think about how selecting fields conditionally affects the data returned.

Inline fragments let you request fields only for the types that have them, so you avoid fetching irrelevant fields and reduce data size.

🔧 Debug

expert

What error does this GraphQL query raise?

Given this query:

{
  items {
    ... on Product {
      id
      price
    }
    ... on Service {
      id
      duration
    }
    ... on Product {
      name
    }
  }
}

Assuming items returns a list of Product and Service types, what error will this query cause?

A No error; the query runs successfully.

B Syntax error due to missing fragment names.

C Runtime error because <code>duration</code> is not a field of <code>Service</code>.

D Duplicate fragment type error because <code>Product</code> inline fragment is repeated.

💡 Hint

Inline fragments on the same type are allowed; GraphQL merges their field selections.

GraphQL allows multiple inline fragments on the same type at the same level. Their field selections are merged (e.g., id, price, and name for Product), so no error occurs.