Sanity GROQ Queries Explained

Sanity is an amazing content management system, and since there is so much to cover, I decided to make a part 2 of my previous article which is available to read here:

https://www.danielfullstack.com/article/integrate-sanity-with-next-js

Today, we will cover GROQ queries, and by the end of this article you will be able to create powerful groq queries to fetch data from sanity with ease.

So without further ado... Let's dive right in!

What is GROQ

GROQ (Graph-Relational Object Queries) is a query language used by Sanity to describe exactly what information you need to fetch from your CMS into your application.

It's similar in concept to SQL, which describes exactly what information you need to fetch from your database into your application.

GROQ is a powerful query language, and you can do a lot with it, including filters, ordering, offsets and limits, and much more.

So let's take a look at some GROQ queries and try to understand how it works.

GROQ Queries

If you want to follow along, please visit https://groq.dev. Here you can play around with GROQ and write queries on a sample dataset.

Query #1 - Filters

Let's first understand how we can fetch all the available data using this simple GROQ query:

• Here the * means to search all documents inside your dataset. If you need a refresher on terminology, please check out my previous article.
• The empty brackets [] means there are zero filters. Everything inside here would be similar to the WHERE clause from SQL, and the syntax is actually quite similar.

So lets create our first filtered query; the explanation is located below the code:

• First we filter all documents with id between 50 and 100 (non-inclusive).
• Next, we filter out documents with completed set to false.

Here is the output you should see:

If you have any further questions please let me know in the comments.

Query #2 - Ordering

Let's extend our previous query to order our data.

Here is how you would do this:

• The first part of the query is the exact same.
• Now we introduce the order function, which is piped into the first part of the query using the |.
• The order function takes in the field that you want to order by, in this case id, and it also takes the direction of the ordering, in this case desc (descending). You may also put asc for ascending if you like.
• We have also added some new syntax at the end, which are essentially curly braces {} that wrap certain field names (id, title). This is synonymous to the SELECT clause in SQL, which lets you retrieve only the fields you need.

With all this said, here is the output of the query:

Query #3 - Offsets & Limits

Another powerful functionality of GROQ is that you can offset search results, and also limit the number of search results using very simple syntax.

Let's extend our previous query once more to offset our query results by 10 documents, and return up to 10 matches.

• Notice after the order function we added another pair of brackets [] with numbers from 10...20.
• The 10 represents the actual offset, which means it returns documents starting from the 10th result.
• The 20 represents the limit, which is actually calculated as 20 - 10 = 10.

This query results in us returning a maximum of 10 documents, starting from the 10th document.

Here is the final output:

Using GROQ in our Next.js app

So now that we have played around with GROQ, let's put our knowledge into practice!

Make sure you have a Next.js application with Sanity already configured if you wish to follow along. See my previous article to understand how to do this.

If you are ready, here is code for my src/lib/blogs.ts file which contains a function to execute our groq query and return our data to the frontend.

Assuming you have sanity configured (ideally using Next Inject), and your schema contains the relevant fields, then you can call this function on the frontend and log the results:

Conclusion

I hope you found this overview of GROQ queries with Sanity useful.

If you are enjoying this series, and would like a part 3, please let me know in the comments.

If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐