Skip to content

Get Ridiculously Organized Quickly with GROQ

  • #Tips & Tricks
Read time: 13 minutes

GROQ (Graph-Relational Object Queries) is an incredibly powerful query language tailored for use with Sanity.io. Over time, itโ€™s become an indispensable tool in my development toolkit, especially within the context of SanityPress or any Sanity project. Whether you're looking to filter content, project specific fields, or handle complex data structures, GROQ has you covered.

GROQ stands out among query languages for its ability to handle complex content structures effortlessly. Whether you're building a simple blog or a complex e-commerce site, GROQ gives you the tools to structure your data queries in a way that aligns with your project's needs.

For kicks and giggles, I had AI make some alternative acronyms:

  • Generally Rocks Other Queries
  • Grandmaster Retriever of Optimal Queries
  • Get Ready for Outstanding Querying
  • Great Results Obtained Quickly
golden retriever wearing sunglasses and a mafia suit sitting in front of a chess board sitting in the godfather's chair, with the text "The GROQfather" in the room background, film still from the movie Godfather
Grandmaster Retriever of Optimal Queries

๐Ÿ–ค Useful GROQ Queries in SanityPress๐Ÿ”—

Below are some of the most useful GROQ queries Iโ€™ve implemented in SanityPress. These queries are versatile and can be adapted for various content models, whether you're filtering posts by category, fetching related content, or implementing pagination.

Get all pages excluding X, Y, and Z๐Ÿ”—

๐Ÿ“ src/app/(frontend)/[...slug]/page.tsx
*[
  _type == 'page' &&
  !(metadata.slug.current in ['index', '404', 'blog/*'])
]

Joining conditional references efficiently๐Ÿ”—

In SanityPress, some page modules may have fields that reference other documents. You can join those references on a per-module basis:

๐Ÿ“ src/app/(frontend)/page.tsx
*[_type == 'page' && metadata.slug.current == $slug][0]{
  ...,
  modules[]{
    ...,
    # specify the module _type, then join the reference
    _type == 'logo-list' => { logos[]-> },
    
    _type == 'pricing-list' => {
      tiers[]->{
        ...,
        ctas[]{ ${ctaQuery} }
      }
    },
    
    _type == 'testimonial-list' => { testimonials[]-> },
  }
}

Processing blog content data๐Ÿ”—

Like calculating read time and generating table of contents for a blog post.

๐Ÿ“ src/app/(frontend)/blog/[slug]/page.tsx
*[_type == 'blog.post' && metadata.slug.current == $slug][0]{
  # get everything else
  ...,

  # calculate read time
  'readTime': length(pt::text(body)) / 200,

  # get heading text for table of contents
  'headings': body[style in ['h2', 'h3']]{
    style,
    'text': pt::text(@)
  },

  # join references for blog categories
  categories[]->
}

Get all blog categories referenced by at least 1 post๐Ÿ”—

๐Ÿ“ src/ui/modules/blog/BlogList/Filtering.tsx
*[
  _type == 'blog.category' &&
  count(*[_type == 'blog.post' && references(^._id)]) > 0
]|order(title)
# ^ then sort by the category title

Multiple sorting conditions๐Ÿ”—

  1. Show featured posts first
  2. Then, sort by newest posts
  3. Show up to $limit (a number) posts
๐Ÿ“ src/ui/modules/blog/BlogList/index.tsx
*[_type == 'blog.post']|order(featured desc, publishDate desc)[0...$limit]

๐Ÿ“ฃ Shoutout to the Official GROQ Cheat Sheet๐Ÿ”—

While the queries Iโ€™ve shared are powerful, GROQ's full potential goes far beyond what Iโ€™ve covered. If youโ€™re looking to dive deeper into what GROQ can do, I highly recommend checking out the official GROQ cheat sheet.

This cheat sheet is an excellent resource, offering a comprehensive overview of the languageโ€™s syntax, functions, and use cases. Whether youโ€™re a beginner or an experienced developer, itโ€™s a valuable tool for getting the most out of GROQ and Sanity.io.

Conclusion๐Ÿ”—

So there you have itโ€”my go-to GROQ queries that keep SanityPress humming along smoothly. Whether youโ€™re just dipping your toes into the GROQ waters or youโ€™re ready to dive in headfirst, these queries are sure to make your content management experience a breeze.

Happy querying!

an orange brand new Toyota GR Supra with the racing logo "GROQ", posed next to a pink super dirty rusty 2015 Prius with the logo "GraphQL" at a California canyon road, Hasselblad photography