Get help on Discord

Understanding the differences between Groq and GraphQL in Sanity.io

4 replies
Last updated: May 27, 2023
Hi! We're pretty close to choosing Sanity for our next project, but out team has hit 1 challenge using GROQ Vision that I'm trying to better understand. With other CMS using GraphQL Playground, it's super simple to construct queries from scratch since included with the playground is usually schema documentation and autocomplete. Does the Vision interface have anything like that to help generate the request?
AI Update

Yes! The Vision plugin does have features to help you construct queries, though they work differently than GraphQL Playground's schema introspection and autocomplete.

What Vision offers:

According to the Vision plugin documentation, Vision provides:

  • Query execution and testing - Test GROQ queries directly against your datasets with immediate results
  • Dataset, API version, and perspective selectors - Dropdown menus to easily switch contexts
  • Parameter support - Test queries with parameters (like $minSeats) just like in production code
  • Direct API URL generation - Each query generates the actual API endpoint URL

However, Vision doesn't have built-in schema documentation or autocomplete like GraphQL Playground does.

For autocomplete and better IntelliSense:

The best developer experience for writing GROQ queries comes from the Sanity VS Code extension, which provides:

  • Syntax highlighting for GROQ queries
  • IntelliSense/autocomplete when using defineQuery or groq template literals in your code
  • Query execution directly from VS Code
  • Integration with Sanity TypeGen for automatic type generation and type-safe queries

Why GROQ works differently:

Unlike GraphQL which requires a predefined schema for introspection, GROQ queries JSON documents directly without requiring schema definitions. This is actually one of GROQ's strengths - it can parse and query any JSON structure. However, this means there's no centralized schema to auto-generate documentation from.

Practical workarounds:

  1. View actual documents in Vision - You can see your real data structure and available fields
  2. Reference your Studio schema files - Your schema definitions in sanity.config.js/ts document your content structure
  3. Use the _type field - Filter by document type to explore different content structures
  4. Try groq.dev - A standalone GROQ playground for experimenting (though it won't have your project's data)

Bottom line: For the autocomplete/schema-aware experience you're looking for, I'd recommend using the VS Code extension for writing queries in your codebase, and Vision for quick testing against your actual data. The combination gives you a powerful workflow even though it's structured differently than GraphQL Playground.

Hi (Removed Name),
The thing is, that the Vision tool isn't operating on GraphQL -- it's for the Groq query language so useful in all areas of Sanity .

Sanity
also lets you deploy your project's GraphQL API, and there, any GraphQL playground is able to introspect that api's GraphQL schema to generate autocompletion and that 'Documentation' -- which is what they all do, including Sanity's own GraphQL playground.
I'm putting a screenshot below, taken just now of Sanity's playground on a dev project, showing as many features as can be in the shot; the field list standing in for the autocomplete which uses the same introspected information.

I'm also giving you links with include a view on why Groq was chosen for work inside Sanity. It's brief, powerful, easily learned, can be used in one-line fragments which attune many features and screens, and so forth.

Both GraphQL and Groq are fully present and capable in Sanity, each for its own best uses.


https://www.sanity.io/docs/what-about-graphql
https://www.sanity.io/docs/graphql
https://graphql.org/learn/introspection/
https://www.sanity.io/docs/how-queries-work
user Q
Thank you for that very helpful response! I have actually liked using Groq over GraphQL for a couple reasons (primarily the reshaping capability), and I think my curiosity is more if we can somehow achieve those same Autocomplete/Introspection features with Groq/Vision?
Hi again, (Removed Name), and it's a reasonable question to ask.
I haven't been able to find anything that does this directly. There was a GitHub conversation some time ago which suggested an undocumented feature to get GraphQL SDL or JSON from a dataset, but that seems not to have gone forward, as when I attempted it, the link asked for a feature not existing now on the dataset, and the api didn't appear to have the feature.

I think the solution I suggested, using Vision on your deployed GraphQL API, is the way to get such a visualizaion of schema/s, also with auto-lookup of data names by filling in part of a query -- if such abilities seem useful.

Of a practical mind, them, don't tool abilities tend to show up where there's need for them? Sanity has very many useful tools, and given introspection in Groq views isn't among them, perhaps one should consider how needful it is in practice.

One of Sanity's great advantages, if it isn't indeed the central one, is componentized data. This means each individual schema is simple enough, especially on the side of easily seeing its data names.

And in Groq, you don't have the GraphQL challenges with discovering layers of internally made-up querying labels, or ways nodes need to be accessed for different purposes, or etc., which are the real problems introspected documentation tries to answer.

In Groq, you just write what you need, maybe with a few array or dereferencing indications, and you have what you wanted, with Vision letting you see how to work out and verify any details.

So, I said 'practical', and I guess that's what this is, no? And a definite smile, then.

(Removed Name), from your questions, I'd like to think you and your team will enjoy Sanity. It's as good as software gets, experience might say, and has a very definite sense of being solidly well engineered.

This new announcement, with interesting short video, might hint at just how far they intend to take it...

https://www.sanity.io/blog/visual-editing-sanity-verceld
(Removed Name)
user Q
Thank you again for a very thorough answer! We are also feeling Sanity will be a great product for us—every aspect thus far seems to be very well thought through. Our team will have to weigh the pros/cons of Groq vs GraphQL now, but great to have a better understanding of what those are and that Sanity can serve us well either way.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?