Query your data inside VS Code

Written by Knut Melvær

The Sanity.io extension for VS Code brings syntax highlighting and execution of GROQ queries. Super useful if you want to quickly see the data result of a query while your building, troubleshooting, or experimenting with code. The code execution feature was put together during the virtual all-hands hackathon that we had earlier this fall.

Try it out by installing the Sanity.io VS Code extension.

Using CodeLens (a feature that annotates code with useful contextual actions), you'll get an option to “Execute Query” whenever VS Code recognizes a GROQ query. You make it do so in a couple of different ways:

• Put the query in a file with the .groq extension
• Add fenced code blocks in Markdown with the groq tag
• Use tagged template literals with the groq tag
• Prefixed with the /* groq */ comment
• Start a template literals with a // groq comment

// Markdown code block

```groq
*[_type == "post"]{title}
```

// Tagged template literal

import groq from 'groq'

const query = groq`*[_type == "post"]{title}`

// Prefixed template literal

const query = /* groq */`*[_type == "post"]{title}`

// Template literal starting with comment

const query = `//groq
  *[_type == "post"]{
    title,
    authors[]->{name}
  }
`

The extension also ships with configuration to turn off the CodeLens feature, and to whether to open query results in a new tab as an editable JSON file. If you use VS Code for your Sanity.io projects, you should also check out the Sanity snippet extension for quickly building out schemas.