Building Search in Optimizely DAM: Leveraging Fragments

Introduction

When you need to pull assets (images, video, documents, etc.) from Optimizely DAM, you often select a handful of core fields (like ID and title) by default. However, you may also need additional metadata specific to each asset type—fields not present in the base type. Optimizely DAM’s GraphQL-style fragments let you define those extra field selections in reusable blocks and splice them into your query alongside the core fields.

In this post, we’ll build an asset‐search query against Optimizely’s DAM using the Content Graph API and your _graphClient helper. We’ll:

Define three fragments—ImageFields, VideoFields, and FileFields—for extra metadata.

1. Construct a base query that pulls core asset fields plus fragment fields.
2. Add facets and total counts to support UI filters and result summaries.
3. All without drilling into nested objects (we’ll cover that in Part 2!).

1. Setup & Prerequisites

Before you start, make sure:

• You have an instance of the Optimizely GraphQL client (_graphClient) configured to point at your DAM endpoint.
• You’ve defined your fragment‐building helpers: imageFragment, videoFragment, and fileFragment.

2. Defining Your Fragments

Fragments encapsulate commonly‐used field selections in Optimizely DAM:

var imageFragment = new FragmentBuilder<DAMPublicImageAsset>("ImageFields")
  .Fields(a => a.Url, a => a.AltText, a => a.Width, a => a.Height);

var videoFragment = new FragmentBuilder<DAMPublicVideoAsset>("VideoFields")
  .Fields(a => a.Url, a => a.AltText);

var fileFragment = new FragmentBuilder<DAMPublicFileAsset>("FileFields")
  .Fields(a => a.Url);

* **`new FragmentBuilder<T>("Name")`** instantiates a fragment builder for the specific DAM asset subtype T (e.g. DAMPublicImageAsset) and assigns it the given fragment name.

* Calling `.Fields(...)` defines exactly which properties each fragment will return.

3. Building the Main Query

With your fragments defined, assemble the search operation against Optimizely DAM:

var assetSearch = _graphClient
  // 1) Give the GraphQL operation a clear name
  .OperationName("SearchAssets")

  // 2) Target the Asset content type in Optimizely DAM
  .ForType<DAMAsset>()

  // 3) Select core asset fields
  .Fields(x => x.Id, x => x.Title, x => x.MimeType, x => x.DateModified)

  // 4) Include your reusable field sets
  .AddFragments(imageFragment, videoFragment, fileFragment)

  // 5) Create facets for UI filters (MIME types)
  .Facet(x => x.MimeType)

  // 6) Request the total matching count (ignore pagination)
      .Total();

Breakdown of each step

1. .OperationName("SearchAssets") Labels the underlying GraphQL operation as SearchAssets in Optimizely’s API.

2. .ForType<DAMAsset>() Indicates you’re querying the built‑in Asset content type.

3. .Fields(...) Pulls back flat properties: ID, title, MIME type, and last modified timestamp from the base class DAMAsset.

4. .AddFragments(...) Embeds your ImageFields, VideoFields, and FileFields fragments directly into the query to get the additional metadata fields from the respective fragments.

5. .Facet(...) Generates facet buckets for MIME types, perfect for building filter panels.

6. .Total() Requests a count of all matching assets so you can display “Showing X of Y results.”

4. Generated GraphQL Request

This code generates a query like the following when sent to Optimizely DAM’s GraphQL endpoint:

query SearchAssets($page: Int!, $size: Int!,) {
  searchAssets(
    page: $page, size: $size
  ) {
    totalCount
    facets {
      mimeType { value, count }
    }
    items {
      id
      title
      mimeType
      dateModified
      ...ImageFields
      ...VideoFields
      ...FileFields
    }
  }
}

fragment ImageFields on Asset {
  url
  altText
  width
  height
}

fragment VideoFields on Asset {
  url
  altText
}

fragment FileFields on Asset {
  url
}

5. Executing & Rendering Results

Run the query and bind the response to your UI model:

var response = await assetSearch.ExecuteAsync();
var assets   = response.Items;
var facets   = response.Facets;
var total    = response.TotalCount;

// Bind to your view (e.g. MVC, React, Blazor)
ViewBag.Total  = total;
ViewBag.Facets = facets;
return View("SearchResults", assets);

6. Benefits of Using Fragments in Optimizely DAM

• Easy Updates: Add or remove properties in one place when asset requirements change.
• Readable Code: Your query pipeline reads like a clear, step-by-step recipe.

Conclusion

Leveraging GraphQL fragments with Optimizely DAM’s Query API keeps your asset searches maintainable, performant, and ready for extension. In Part 2, we’ll dive into how to manage nested data—like tags, categories, and linked assets—to further enrich your DAM queries.