Skip to content
Get help on Slack

Combining two Groq queries in one client.fetch() and usePreview() in Sanity.io

5 replies
Last updated: Jan 20, 2023
Can I combine two groq queries in one client.fetch?
And can client.fetch() and usePreview() use one of these combined queries?

Example:

const partnerQuery = groq`*[_type == "partner" && slug == "${slug}"][0]{name,slug,h1,h2,logo,"logoAspectRatio":logo.asset->metadata.dimensions.aspectRatio,undergrad_cosigned,undergrad_noncosigned,undergrad_outcomes,mba,medical,dental,law,grad}`;
and


const rateQuery = groq`*[_type == "rates" && name == "December"]`;
is it possible to combine these into one query so there's only one request? Or should they be kept separate?

I found in the docs that two queries can be combined in a "projection":

  const query = {
    partnerData: groq`*[_type == "partner" && slug == "${slug}"][0]{name,slug,h1,h2,logo,"logoAspectRatio":logo.asset->metadata.dimensions.aspectRatio,undergrad_cosigned,undergrad_noncosigned,undergrad_outcomes,mba,medical,dental,law,grad}`,
    rateData: groq`*[_type == "rates" && name == "December"]`,
  };
However,
client.fetch(query) wants the query parameter to be a string
and

usePreview only allows the second parameter to be a string


So would I need to have two fetches or usePreview (one for each query string)?:
const partnerData = usePreview(null, query.partnerData);
const rateData = usePreview(null, query.rateData);
Jan 19, 2023, 5:15 PM
I think I just found the solution in your docs:

{
  "mainStory": *[_id == "story-1234"],
  "campaign": *[_id == "campaign-1234"],
  "topStories": *[_type == "story"] | order(publishAt desc) [0..10]
}
Jan 19, 2023, 5:20 PM
You should just be able to wrap the whole object in a string! Maybe try this:
  const query = groq`{
    partnerData: *[_type == "partner" && slug == "${slug}"][0]{name,slug,h1,h2,logo,"logoAspectRatio":logo.asset->metadata.dimensions.aspectRatio,undergrad_cosigned,undergrad_noncosigned,undergrad_outcomes,mba,medical,dental,law,grad},
    rateData: *[_type == "rates" && name == "December"],
  }`;
Jan 19, 2023, 5:50 PM
user M
I get:ClientError: string literal expected


    statusCode: 400,
    statusMessage: 'Bad Request'
  },
  statusCode: 400,
  responseBody: '{\n' +
    '  "error": {\n' +
    '    "description": "string literal expected",\n' +
    '    "type": "queryParseError"\n' +
    '  }\n' +
    '}',
  details: { description: 'string literal expected', type: 'queryParseError' },
I just passed the query into the fetch:

const sanityData = await sanityClient.fetch(query);
Jan 20, 2023, 12:02 AM
user M
Ok I think the groq was throwing it off
removing the groq worked:


  const query = `{
    "partnerData": *[_type == "partner" && slug == "${slug}"][0]{name,slug,h1,h2,logo,"logoAspectRatio":logo.asset->metadata.dimensions.aspectRatio,undergrad_cosigned,undergrad_noncosigned,undergrad_outcomes,mba,medical,dental,law,grad},
    "rateData": *[_type == "rates" && name == "December"],
  }`;
Thanks for your help on this
Jan 20, 2023, 12:10 AM
Glad you got it working!
Jan 20, 2023, 1:25 AM

Sanity– build remarkable experiences at scale

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

Get started for freeExplore the demo

Was this answer helpful?