Getting all Sitecore Fields with GraphQL

GraphQL is a powerful addon to headless Sitecore implementations. It does, however, require writing queries based on the available schema to return data. This varies from a Restful endpoint where it already contains the structure and data. In fact, one of the best aspects of GraphQL Is that you can define the data structure you want data returned in so long as the properties are available in the GraphQL schema.

Constructing a Highly Specific GraphQL Query

One challenge that may arise is how granular to construct your GraphQL queries. If you know the fields to return, you can certainly construct a highly focused GraphQL query. The benefit in this case is that you are able to expose more information such as lookup field display names.

For example, the following returns an output with JSON image fields for src and alt… text, url, and target for the link field… and value, targetItem, displayName a lookup field.

{
    item(
      path: "<path to Sitecore Item or GUID>"
      language: "en"
    ) {
      ... on myTemplate {
        title {
          value
        }
        description {
          value
        }
        image {
          src
          alt
        }
        link {
          text
          url
          target
        }
        myLookupField{
          value
          targetItem {
              displayName
          }
        }
 
      }
    }
  }

Introspection to Get All Fields

While this may produce a desirable output, it does place some burden on going through the schema to get each of the fields and create your structure. This is where introspection comes into play.

In the following example, you are able to retrieve all the fields for a particular item. Note two important options of excludeStandardFields:true and ownFields:false for the fields property. excludeStandardFields allows you to select if you want the system/standard values returned or just the primary editable fields. ownFields is a little different when used within fields as it is a true/false that seems to return an array of the first field type in the list vs. the ownFields that is used when looking up a template.

In my example, we are focused to returning an item, so we set ownFields to false to get more than just the first field type and excludeStandardFields to true in order to retrieve only the fields I would typically edit. We also use the editable property to get a return of everything that is editable so I can parse the values:

{
  item(path: "<path to Sitecore Item or GUID>"
  language: "en"
  ){
    id
    name
    ...on myTemplate {  
      fields(excludeStandardFields:true, ownFields:true) {
        name
        __typename
        editable
      }
    }
  }
}

Notice that I also return the __typename. This returns the field type. This matters because if I want a more refined data output that what the editable field provides (ex. in order to get the display name of a lookup field OR to avoid parsing the editable field), you could use the output from the introspection GraphQL query with a loop over the __typename to dynamically create a second GraphQL query.

Example: Loop over the typename and return any image fields in the folllowing format since the introspection returns the field name and type.

        primaryImage {
          src
          alt
        }
        mobileImage {
          src
          alt
        }

The benefit of this approach is that instead of scouring through the schema per item/template, you can get all the fields and then use the output to dynamically create a data structure depending on the fields it may/may not contain.