GraphQL Inline Fragments in Optimizely CMS – Query Content and Expanded Fields

An inline fragment lets a single GraphQL query include type-specific selections so different content types return different fields in one response. Optimizely Graph supports inline fragments on the content schema, which lets you request common fields once and type-specific fields per content type without issuing multiple queries.

The GraphQL querying service supports using inline fragments to query items in the content schema. This functionality is only supported for content. It lets you get common fields of content and specific fields of different content types based on content in a single query.

The GraphQL querying service also supports inline fragments when querying the Expanded field. Its type is inherited from Content. Query specific content types with Expanded, for example, to get values from Content Area items.

Query common and type-specific fields

Combine common fields with inline fragments to return shared properties for every item and type-specific properties for each content type in one response.

The following example shows the inline fragments used in the query with content. The common fields in this example are __typename and Name. Get the MainContentArea of the specific schema type StartPage. For a StandardPage schema, Optimizely projects ContentLink and Language.

{
  Content(locale: en, limit: 100) {
    items {
      __typename
      Name     
      ... on StartPage {
        MainContentArea {
          DisplayOption
        }
      }
      ...testFragment
    }
  }
}

fragment testFragment on StandardPage {
  ContentLink {
    Id
  }
  Language {
    Link
    DisplayName
    Name
  }
}

Response

{
  "data": {
    "Content": {
      "items": [
        {
          "__typename": "StartPage",
          "Name": "Start",
          "MainContentArea": [
            {
              "DisplayOption": ""
            },
            {
              "DisplayOption": "narrow"
            },
            {
              "DisplayOption": "narrow"
            },
            {
              "DisplayOption": "narrow"
            }
          ]
        },
        {
          "__typename": "StandardPage",
          "Name": "Reporting Made Simple",
          "ContentLink": {
            "Id": 13
          },
          "Language": {
            "Link": "http://localhost:63574/en/about-us/news-events/events/reporting-made-simple/",
            "DisplayName": "English",
            "Name": "en"
          }
        },
        {
          "__typename": "StandardPage",
          "Name": "Collaboration Made Simple",
          "ContentLink": {
            "Id": 14
          },
          "Language": {
            "Link": "http://localhost:63574/en/about-us/news-events/events/collaboration-made-simple/",
            "DisplayName": "English",
            "Name": "en"
          }
        },
        {
          "__typename": "StandardPage",
          "Name": "Risk Management",
          "ContentLink": {
            "Id": 15
          },
          "Language": {
            "Link": "http://localhost:63574/en/about-us/news-events/events/risk-management-in-complex-projects/",
            "DisplayName": "English",
            "Name": "en"
          }
        },
        {
          "__typename": "ArticlePage",
          "Name": "Alloy Saves Bears"
        }
      ]
    }
  },
  "extensions": {
    "correlationId": "e23a2494-1db7-4799-a3ad-e6863f635d89"
  }
}

Note how the StartPage items return MainContentArea while the StandardPage items return ContentLink and Language in the same response, even though the queried list mixes both content types.

Query child items with inline fragments

Use the special _children field with inline fragments to traverse a content tree in one query and apply different selections per child content type.

The following example shows where you use inline fragments in combination with the special _children field to get the child items of the type Content belonging to StandardPage:

{
  Content(locale: en) {
    items {
      __typename
      Name     
      ... on StartPage {
        _children {
          Content {
            items {
              __typename
              RouteSegment
              Url
            }
          }
        }
      }
      ...testFragment
    }
  }
}

fragment testFragment on StandardPage {
  _children {
    Content {
      items {
        __typename
        Name
        Changed
        Created
      }
    }
  }
}

Query the Expanded field with inline fragments

Use inline fragments on the Expanded field to pull data from referenced blocks, such as Content Area items, without issuing follow-up queries for each block type.

The following example shows where you use inline fragments with the Expanded field to get the data of the EditorialBlock inside the Expanded field of the StandardPage:

{
  StandardPage(locale: en) {
    items {
      Name
      MainContentArea {
        ContentLink {
          Expanded {
            ... on EditorialBlock {
              __typename
              Name
              Language {
                Link
                DisplayName
                Name
              }
            }
          }
        }
      }
    }
  }
}

Response

{
  "data": {
    "StandardPage": {
      "items": [
        {
          "Name": "Collaboration Made Simple",
          "MainContentArea": [
            {
              "ContentLink": {
                "Expanded": {
                  "__typename": "EditorialBlock",
                  "Name": "Collaboration made simple - When and Where",
                  "Language": {
                    "Link": null,
                    "DisplayName": "English",
                    "Name": "en"
                  }
                }
              }
            }
          ]
        },
        {
          "Name": "Risk Management",
          "MainContentArea": [
            {
              "ContentLink": {
                "Expanded": {
                  "__typename": "EditorialBlock",
                  "Name": "Collaboration made simple - When and Where",
                  "Language": {
                    "Link": null,
                    "DisplayName": "English",
                    "Name": "en"
                  }
                }
              }
            }
          ]
        },
        {
          "Name": "Management",
          "MainContentArea": [
            {
              "ContentLink": {
                "Expanded": {}
              }
            }
          ]
        },
        {
          "Name": "Contact us",
          "MainContentArea": null
        },
        {
          "Name": "Become a reseller",
          "MainContentArea": null
        },
        {
          "Name": "Whitepaper",
          "MainContentArea": null
        },
        {
          "Name": "News & Events 1",
          "MainContentArea": [
            {
              "ContentLink": {
                "Expanded": {}
              }
            }
          ]
        },
        {
          "Name": "Find a reseller",
          "MainContentArea": null
        },
        {
          "Name": "Okela 1",
          "MainContentArea": [
            {
              "ContentLink": {
                "Expanded": {}
              }
            }
          ]
        },
        {
          "Name": "About us 1",
          "MainContentArea": [
            {
              "ContentLink": {
                "Expanded": {}
              }
            }
          ]
        }
      ]
    }
  },
  "extensions": {
    "correlationId": "27d8117e-ba8b-4546-a9b0-2c57004402e2"
  }
}

Note how each MainContentArea entry returns only the EditorialBlock fields named in the inline fragment, even though MainContentArea can contain other block types.