Skip to content
👀 See Sanity in action: Watch product demo now →
Sanity
Get started
  • Sanity Studio - Flexible editing environment
  • Content Lake - Real-time database
  • Developer experience - Tooling you love
  • Structured content - The philosophy behind Sanity
  • Review changes - View edits & rollback instantly
  • Image pipeline - On-demand transformations
  • E-commerce - Better shopping experiences
  • Marketing sites - Control your story
  • Products & services - Innovate and automate
  • Mobile apps - Content backend for every OS
  • Aether - Unique digital shopping experience
  • Morning Brew - Omnichannel media distribution
  • InVision - Delivering exceptional customer experiences
  • DataStax - Personalization for global audience
  • React
  • Gatsby
  • Next
  • Nuxt
  • Eleventy
  • Netlify
  • Vercel
  • Algolia
  • Documentation
  • Reference
  • Guides
  • Resource library
  • Headless CMS
  • Tools & plugins
  • Project showcase
  • Schemas & snippets
  • Agency partners
  • Technology partners
  • Get support
  • Share your work
  • Enterprise SSO
EnterprisePricing
Contact salesLog inGet 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!

Platform

Structured ContentDeveloper experienceContent LakeSanity StudioSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal

Resources

Documentation
  • 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
Resource library
  • Agency partners
  • Technology partners
  • Blog Template
  • Personal Website Template
  • Developer Portfolio Templates
  • All Templates
Case Studies
  • Headless CMS
  • What is an API CMS
  • Static Sites 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • What is a DXP?
  • Typescript 101
  • 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
  • Mobile apps CMS

Company

Contact SalesEnterpriseCareersTerms of ServiceAccessibility Statement

Stay connected

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