Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Sanity
  • Platform

    Sanity Studio

    Flexible editing environment

    APIs

    Connect to anything

    Content Lake

    Real-time database

    Watch product demo

    Features

    Real-time collaboration

    Fearlessly work with content

    Precise content querying

    Treat content as data with GROQ

    Localization

    Coherent messaging across territories

  • Use cases

    E-commerce

    Richer shopping experiences

    Marketing sites

    Control your story

    Products & services

    Innovate and automate

    Mobile apps

    Content backend for every OS

    View all

    Integrations

    Shopify
    Mux
    Vercel
    Netlify
    Algolia
    Cloudinary
    BigCommerce
    Commerce Layer
    Smartling
    Transifex
    View all
  • Learn

    Documentation
    API reference
    Guides
    GROQ cheat sheet
    Sanity UI
    Get started

    Build and share

    Templates
    Tools and plugins
    Schemas and snippets
    Project showcase
    Share your work
    Browse Exchange

    Frameworks

    React
    Vue
    Next.js
    Nuxt.js
    Svelte
    Remix
    Gatsby
    Astro
    Angular
    Eleventy
    View all
  • Discover

    Blog
    Resource library
    Agency partners
    Become a partner
    Technical support
    Talk to sales

    Case studies

    Puma

    Source of truth for all global markets

    Aether

    Unique digital shopping experience

    Morning Brew

    Omnichannel media distribution

    InVision

    Delivering exceptional customer experiences

    View all

    Popular guides

    Structured content
    Content modeling
    Headless CMS
    Headless SEO
    Static websites
    View all
  • Enterprise
  • Pricing
  • Log in
  • Contact sales
  • Get started
Contact salesGet started
Published July 6th 2021

GROQ ellipsis operator... and projections

In the latest episode of Kap & Lauren learn GROQ - Part 5, we learned how to use the GROQ ellipsis operator with extra projections to really fine-tune our desired output.

Lo Etheridge

Developer Relations and Strategic Community DEI Efforts at Sanity.io

Kapehe

Developer Relations Specialist at Sanity

On this week's Kap & Lauren learn GROQ - Part 5, we explored the ellipsis operator (... ), scope, chaining projections, and pickles. Kap and I are dill pickle lovers, but we welcome sweet pickle lovers with open arms! But enough about pickles, let's talk about the ellipsis operator.

Using the e-commerce sample dataset, we filtered through the candy products and pulled out the image [] array metadata, title, and price, but we wanted to get a count of categories associated with each candy bar. The ellipsis operator allowed us to use the count() function in our projection and still return all of the attributes without having to list them individually. Once you make a specific projection, only what you specify in the expression will return. This is where the ellipsis operator shines, it brings all the available attributes along for the ride when you are making a custom field or computation.

*[_type == "product"]{
  ...,
  defaultProductVariant{
...,
"imageMetadata": images[]{ asset->{ metadata } } }, "numberOfCategories": count(categories) }{ numberOfCategories, title, defaultProductVariant{ imageMetadata, price } }

Our final query shows the ... in action. We are filtering through the product document and using the ellipsis to return all of the product attributes so we can use them later.

Protip

A note on scope: the ellipsis is not global and will only return the fields from within the context it is declared.

Kap and I found this to be quite tricky when we first learned about it. The defaultProductVariant object is nested projection where we are pulling out image metadata information using the custom field or alias, imageMetadata. Kap and I used the ellipsis operator (...) again so we could return all of the attributes of defaultProductVariant along with our custom field. The second use of the ellipsis operator allowed us to pull out the title and price in the last chained projection.

If you missed the stream, you can watch Kap & Lauren learn GROQ - Part 5 on YouTube. Follow us on Twitch and tune in for another episode of Kap & Lauren learn GROQ, we hope to see you there!

Product

Sanity StudioAPIsContent LakeSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

DocumentationBlogResource libraryCase Studies
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
  • Next.js blog
  • Next.js personal website
  • Clean Next.js + Sanity app
  • Clean Remix + Sanity app
  • Clean SvelteKit + Sanity app
  • All Templates
  • Agency partners
  • Technology partners
  • Headless CMS 101
  • What is an API CMS
  • Static Sites 101
  • Headless Commerce 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • Content as a Service
  • What is a DXP?
  • Typescript 101
  • Ecommerce SEO
  • CMS for enterprise
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServicePrivacy PolicyAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023