Watch a live product demo 👀 See how Sanity powers richer commerce experiences

What’s the best way to construct GROQ query dynamically in JavaScript? Is there a sort of way to construct it in objects or any config which will then get translated to a...

5 replies
Last updated: Jan 7, 2021
What’s the best way to construct GROQ query dynamically in JavaScript? Is there a sort of way to construct it in objects or any config which will then get translated to a string query we can use?
I’m unsure whether what I’m doing right now is how it should be. As an example, I defined variables for like:


const baseQuery = (filters) => `*[ ${filters} ]`
const filters = `_type == "products" and name match ${nameKeyword}`
const query = `baseQuery(filters)`
This can go out of hand if I add in projections, additional filters, etc.
Jan 6, 2021, 11:38 AM
I've seen two projects that tries to make an abstraction over GROQ:
https://www.npmjs.com/package/sanity-typed-queries
https://www.npmjs.com/package/sanity-query-helper Maybe you can take some inspiration from there?

But generally, I prefer to just write out every query, makes it a bit easier to debug and for other people to onboard to the project
Jan 6, 2021, 12:59 PM
I've seen two projects that tries to make an abstraction over GROQ:
https://www.npmjs.com/package/sanity-typed-queries
https://www.npmjs.com/package/sanity-query-helper Maybe you can take some inspiration from there?

But generally, I prefer to just write out every query, makes it a bit easier to debug and for other people to onboard to the project
Jan 6, 2021, 12:59 PM
Thanks
user Y
. 👀
Jan 6, 2021, 2:40 PM
The reason why I needed to construct GROQ dynamically is we are sort of creating a product configurator and we do filtering based on user selected option. I guess this wouldn’t be so hard if the data is simple. But since it’s not, we gotta push through. Hmm. Or maybe there’s another approach we could take?
Here’s a simple GROQ based on two filters. It could get more complicated as soon as more options are selected:


*[
   (_type == "product" && defined(productConfigurator[])) 
   && productConfigurator[].itemNumber match '-UWW-'
 ] {
   _id,
   _type,
   title,
   productConfigurator[itemNumber match '-UWW-'] {
     ...,
     tapeLightType->{title}
   }
 } |  [ productConfigurator[tapeLightType.title == "Reel"] ] {
   ...,
   productConfigurator[tapeLightType.title == "Reel"]
 }
Jan 7, 2021, 2:23 AM
Then we try to do it this way before that query turned out above:

const query = `*[
        ${baseFilter}
        ${additionalFilter}
      ] {
        ${baseProjection}
        ${additionalProjections}
      }
      `;
Jan 7, 2021, 2:25 AM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing