Learn GROQ Interactively

Abraham A. Agung — Fri, 16 Apr 2021 03:30:10 +0000

What is GROQ?

GROQ is Graph Relational Object Queries. Created by Alexander Staubo and Simen Svale Skogsgrud Additional works by Erik Grinaker and Magnus Holm. If you familiar with Sanity.io CMS then GROQ is not a stranger for you.

Why Learn GROQ?

You can use Groq to query JSON data from your favorite API with ease. Meaning querying data is much fun with GROQ, where you can query complex data with concise code. You don't need to modify the raw data using multiple and / or complex JS functions later like reducer.

Building Process

I built this project based on Magnus Holm blog in CSS-Tricks, and inspired by Swyx old project GraphQL of Thrones and GROQ Arcade.

The project is built with React, ChakraUI for the styling, Codemirror6 for the editor and Vite to wrap it up.

The process is quite simple and with Vite, building project like this is really fast and enjoyable, while off course there is always some quirks I found with it, but overall it was a nice experience.

The hardest problem I found building this is configuring Codemirror. Before I using Codemirror6, I use Codemirror5 and try couple of Codemirror-react-wrapper and it had some problems with Vite.

All the lessons is create with markdown file and the data is in JSON file. Vite and Rollup plugin make it easy to get both of those files and read it in React component.

Head to GROQ of Thrones to learn more.

Source code is on Github

DEV Community: Abraham A. Agung

Learn GROQ Interactively

What is GROQ?

Why Learn GROQ?

Building Process

Head to GROQ of Thrones to learn more.