Inline Fragments in GraphQL

GraphQL’s flexibility in querying diverse data structures is one of its key strengths. Inline fragments are a powerful feature that allows developers to conditionally query fields based on the type of an object. In this article, We will explore the concept of inline fragments in GraphQL, how they work, and practical examples along with the usage and so on.

What are Inline Fragments?

• An inline fragment is a fragment that has no name. Inline fragments in GraphQL allow us to conditionally include fields based on the type of the object being queried. They are used within a selection set to specify different fields or directives for different types.
• This is particularly useful when dealing with interfaces or unions, where the actual type of the object may vary. It is a unit of data that belongs to a type in a schema.
• They are simply fragments without names and we can spread them inline where we define them.
• Inline fragments are written using the ... on TypeName syntax, where TypeName is the name of the type we want to apply the fragment to. we can then include fields specific to that type within the inline fragment.

Syntax:

{
  fieldName {
    ... on TypeName {
      field1
      field2
      # Additional fields specific to TypeName
    }
    ... on OtherTypeName {
      field3
      field4
      # Additional fields specific to OtherTypeName
    }
    # Additional fields common to all types
  }
}

Explanation:

• fieldName is the name of the field you are querying.
• TypeName and OtherTypeName are the names of the types you want to apply the inline fragments to.
• field1, field2, field3, field4, etc are the fields specific to each type.

Examples of Inline Fragments in GraphQL

Example 1: Displaying Specific Fields Based on Type in GraphQL

Suppose we want to design a GraphQL query to retrieve information about resources, which can be either books or articles. For books, the query should include the title and author fields, while for articles, it should include the title and published date fields.

Our task is to create a query that handles these different types of resources and fetches the required information for each type.

graphql

query {
  resources {
    ... on Book {
      title
      author
    }
    ... on Article {
      title
      publishedDate
    }
  }
}

Output:

{
  "data": {
    "resources": [
      {
        "title": "GraphQL: A Query Language for APIs",
        "author": "John Doe"
      },
      {
        "title": "Getting Started with GraphQL",
        "publishedDate": "2023-01-15"
      }
    ]
  }
}

Explanation: In this query

• If a resource is of type Book, it will return title and author.
• If a resource is of type Article, it will return title and publishedDate.
• In this output, we can see that for each resource, the appropriate fields are returned based on their types.

Example 2: Querying Information for Person, Company, and Product Entities in GraphQL

Suppose we have a GraphQL schema defining three types: Person, Company, and Product. We want to query information about various entities, including their names and additional details specific to each type.

graphql

query {
  entities {
    ... on Person {
      name
      age
    }
    ... on Company {
      name
      location
    }
    ... on Product {
      name
      price
    }
  }
}

Output:

{
  "data": {
    "entities": [
      {
        "name": "John Doe",
        "age": 30
      },
      {
        "name": "ABC Inc.",
        "location": "New York"
      },
      {
        "name": "Smartphone XYZ",
        "price": 799
      }
    ]
  }
}

Explanation: In this output, we receive information about different entities. For Person, it returns name and age; for Company, it returns name and location; and for Product, it returns name and price.

Example 3: Querying Information for Animal and Plant Entities in GraphQL

Consider a scenario where we have a GraphQL schema defining two types: Animal and Plant. We want to query information about various organisms, including their names and additional details specific to each type.

graphql

query {
  organisms {
    ... on Animal {
      name
      habitat
    }
    ... on Plant {
      name
      type
    }
  }
}

Output:

{
  "data": {
    "organisms": [
      {
        "name": "Lion",
        "habitat": "Grasslands"
      },
      {
        "name": "Oak Tree",
        "type": "Deciduous"
      },
      {
        "name": "Rose",
        "type": "Perennial"
      }
    ]
  }
}

Explanation: In this output, we receive information about different organisms. For Animal, it returns name and habitat; for Plant, it returns name and type.

Use of Inline fragments in GraphQL

A GraphQL query can conditionally include fields according to the kind of object being retrieved by using inline fragments. They let developers designate which fields should only be retrieved under specific circumstances. When searching for interfaces or union types—where the actual type of the object may differ—this is especially helpful.

Inline fragments find their utility in various scenarios within GraphQL development:

• Conditional Field Selection: Inline fragments enable developers to selectively retrieve fields based on the type of object being queried, ensuring a more tailored and efficient data fetching process.
• Interface and Union Types: When dealing with GraphQL interface and union types, where the actual object type may vary, inline fragments provide a mechanism to handle different field sets gracefully.
• Code Clarity and Redundancy Reduction: By using inline fragments, developers can write more concise and readable queries, reducing redundancy and enhancing code clarity.

Conclusion

Inline fragments in GraphQL outfit developers with a necessary resource for prohibitively recall fields for their inquiries considering the kind of the addressed object. This further develops code clearness, decreases redundancy, and thinks about more compelling data recuperation in GraphQL APIs. By ruling inline fragments, developers can moreover upgrade their GraphQL requests and work on by and large execution.