3 simple things in GROQ to supercharge your frontends

Written by Knut Melvær

GROQ is Sanity’s graph-oriented query language. It lets you do rapid development with structured content. As soon as you create a document on the backend, you can instantly query it. No need to define a schema or write a resolver. You can use it with anything that speaks HTTP, but it also has clients in JavaScript, PHP, and .NET.

A basic query in GROQ looks like this: *[_type == "product"]. You read it like “select everything (*) and filter ([ ]) the selection down to every document whose _type is product. You can get far by just using the filter-capabilities in GROQ. It has many more features that make developing with it fast and convenient. Here’s a handpicked three to get you started.

1. Use projections to get exactly as little as you need

Early in the development stage, it can be useful to fetch complete documents with GROQ, but there comes a time where you want to optimize how much data you’re fetching. Then projections come in handy. You make projections by adding curly braces after the filter’s square braces. The anatomy of a GROQ query looks like this: