GraphQL Queries

In this section, we'll explore how to create scalable and maintainable GraphQL queries for fetching content from Optimizely SaaS CMS. We'll focus on using fragments for blocks and handling multiple items in ContentArea.

Using Fragments for Blocks

Fragments in GraphQL allow us to define reusable pieces of queries. This is useful for content blocks in Optimizely.

Let's look at how we structure our fragments:

# lib/optimizely/queries/fragments/Block.graphql

fragment HeroBlockFragment on HeroBlock {
  title
  subtitle
  decorationColorsPrimary
  decorationColorsSecondary
  showDecoration
}

fragment ContactBlockFragment on ContactBlock {
  title
  description
}

fragment LogosBlockFragment on LogosBlock {
  logos {
    __typename
    ... on LogoItemBlock {
      src
      alt
    }
  }
}

fragment PortfolioGridBlockFragment on PortfolioGridBlock {
  title
  items {
    __typename
    ... on PortfolioItemBlock {
      title
      description
      imageUrl
      link
    }
  }
}

fragment ServicesBlockFragment on ServicesBlock {
  services {
    __typename
    ... on ServiceItem {
      title
      description
      icon
    }
  }
}

fragment TestimonialsBlockFragment on TestimonialsBlock {
  title
  testimonials {
    __typename
    ... on TestimonialItemBlock {
      fullName
      position
      content
      avatarSrc
    }
  }
}

fragment ItemsInContentArea on _IContent {
  __typename
  ...HeroBlockFragment
  ...ContactBlockFragment
  ...LogosBlockFragment
  ...PortfolioGridBlockFragment
  ...ServicesBlockFragment
  ...TestimonialsBlockFragment
}

Benefits of Using Fragments

1. Reusability: Fragments can be reused across multiple queries, reducing duplication.
2. Easier maintenance: When you need to update a block's structure, you only need to update it in one place.
3. Scalability: Adding new blocks is as simple as creating a new fragment and including it in the ItemsInContentArea fragment.

Handling Multiple Items in ContentArea

The ItemsInContentArea fragment is crucial for handling multiple block types in a content area. Here's how it works:

1. It uses the __typename field to determine the type of each block.
2. It spreads all possible block fragments, allowing GraphQL to select the appropriate fields based on the block type.

This approach allows for smooth handling of various block types within a single query:

# lib/optimizely/queries/GetStartPage.graphql

query GetStartPage($locales: [Locales]) {
  StartPage(locale: $locales) {
    items {
      title
      shortDescription
      keywords
      blocks {
        ...ItemsInContentArea
      }
    }
  }
}

Get Header, Footer and CMS Page

# lib/optimizely/queries/GetHeader.graphql

query getHeader($locale: [Locales]) {
  Header(locale: $locale) {
    items {
      logo
      ctaText
      ctaHref
      navItems {
        __typename
        ... on NavItem {
          label
          href
        }
      }
    }
  }
}

# lib/optimizely/queries/GetFooter.graphql

query getFooter($locales: [Locales]) {
  Footer(locale: $locales) {
    items {
      copyrightText
      socialLinks {
        __typename
        ... on SocialLink {
          platform
          href
        }
      }
      columns {
        __typename
        ... on FooterColumn {
          title
          links {
            __typename
            ... on NavItem {
              label
              href
            }
          }
        }
      }
    }
  }
}

# lib/optimizely/queries/GetPageByURL.graphql

query getPageByURL($locales: [Locales], $slug: String) {
  CMSPage(
    locale: $locales
    where: { _metadata: { url: { default: { eq: $slug } } } }
  ) {
    items {
      title
      shortDescription
      keywords
      _modified
      blocks {
        ...ItemsInContentArea
      }
    }
  }
}

Conclusion

Using fragments for blocks creates scalable and maintainable GraphQL queries for Optimizely SaaS CMS. This approach makes it easy to add new content types and manage diverse block structures.

Remember to balance query flexibility with performance, and always test with realistic data volumes.