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...

const baseQuery = (filters) => `*[ ${filters} ]`
const filters = `_type == "products" and name match ${nameKeyword}`
const query = `baseQuery(filters)`

*[
   (_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"]
 }

const query = `*[
        ${baseFilter}
        ${additionalFilter}
      ] {
        ${baseProjection}
        ${additionalProjections}
      }
      `;