In addition to GraphQL, GROQ is another mechanism provided for retrieving data stored in Sanity. In this article, we will verify the operation of GROQ.
Learning GROQ
2025-08-04
This document is a translated version of the official steps explained in Japanese. If you would like to check the English version, we recommend referring to the official page.
Use Playground
A Playground that allows you to execute queries using GROQ and check the results is included in Studio. Select Vision displayed at the top of the menu.
Nothing is displayed because no query is set when the window is opened.
Although this differs from the steps in the guide, proceed as follows. First, enter * in Query and execute.
All data will be displayed. To filter by schema type event, enter *[_type=="event"] and execute. The result will be a reduced amount of data, and only event data will be retrieved.
Several event items are displayed, but if you only need the name, execute *[_type=="event"].name to get a list of names.
If you only want to retrieve the title, the above is fine, but in some cases you may want to retrieve the necessary data from the event schema. In this case, enter the following query.
typescript
As a result, we were able to obtain the event ID and name.
The condition was to retrieve cases where _type was event.
If you only want to retrieve events with dates in the future, add the following condition.
typescript
How can I process the data obtained in JSON format? For example, I would like to update it as follows.
typescript
Headlines and isComing are not included in the original schema. You can obtain them by executing this GROQ.
Summary
In this article, we introduced how to retrieve data using GROQ. In the next article, we will create a Next.js project and execute data processing using GROQ.
