Fetching multiple queries at once with the Sanity client
24 replies
Last updated: Aug 18, 2022
G
Hey everyone. Is there a way to fetch multiple queries at once with the Sanity client? Let’s say I’ve this code:
This seems wasteful somehow. Could I just fetch all three queries at the same time?
const firstQuery = `*[groq here][]{}`
const secondQuery = `*[groq here][]{}`
const thirdQuery = `*[groq here][]{}`
const firstProp = await sanityClient.fetch(firstQuery)
const secondProp = await sanityClient.fetch(secondQuery)
const thirdProp = await sanityClient.fetch(thirdQuery)
return {
props: {
firstProp,
secondProp,
thirdProp,
},
}Aug 18, 2022, 1:44 PM
H
you make a query that looks like the following :
and thenyou can fetch it with
const allQueries =
{ firstQuery, secondQuery, thirdQuery }sanityClient.fetch(allQueries)and get the result will be an object with the result of each query in the correspondingly named field.
Aug 18, 2022, 1:47 PM
H
Aug 18, 2022, 1:48 PM
G
Awesome. I’ll give this a try. So this would return a single prop as an object, correct?
Aug 18, 2022, 1:54 PM
H
Yeah, it would return a single object, with the result of each query in the named field.You could define the object like this
And that would be equivalent to your example-code.
The object you define your queries with is basically a javascript-object. You can name the fields anything you want, and Sanity will take the query in each field, and return a javascript object with the results of the query behind your chosen name in the object.
const allQueries = { firstProp: firstQuery, secondProp: secondQuery, thirdProp: thirdQuery }
const results = await sanityClient.fetch(allQueries }
return { props : results }The object you define your queries with is basically a javascript-object. You can name the fields anything you want, and Sanity will take the query in each field, and return a javascript object with the results of the query behind your chosen name in the object.
Aug 18, 2022, 1:58 PM
G
This is great. Excellent explanation! I’ll give this a try
Aug 18, 2022, 2:07 PM
G
So I’m getting a weird error:
ClientError: expected ']' following array body
Aug 18, 2022, 2:22 PM
G
So I’m getting a weird error: The first query returns an array of objects (which is expected), while the other two just a single one.
ClientError: expected ']' following array body
Aug 18, 2022, 2:23 PM
K
Your query is invalid. 🙂
Aug 18, 2022, 2:28 PM
G
Hi
user F
. Thought about that, but the same query worked just fine using three separate fetches…Aug 18, 2022, 2:31 PM
K
Show me?
Aug 18, 2022, 2:32 PM
G
Sure. This works:
This does not:
const firstQuery = `*[groq here][]{}`
const secondQuery = `*[groq here][]{}`
const thirdQuery = `*[groq here][]{}`
const firstProp = await sanityClient.fetch(firstQuery)
const secondProp = await sanityClient.fetch(secondQuery)
const thirdProp = await sanityClient.fetch(thirdQuery)
return {
props: {
firstProp,
secondProp,
thirdProp,
}
}const firstQuery = `*[groq here][]{}`
const secondQuery = `*[groq here][]{}`
const thirdQuery = `*[groq here][]{}`
const allQueries = {
firstProp: firstQuery,
secondProp: secondQuery,
thirdProp: thirdQuery,
}
const allProps = await sanityClient.fetch(allQueries)
return {
props: {
allProps
}
}Aug 18, 2022, 2:39 PM
K
Yes, because the fetch method doesn’t accept an object, it expects a string.
Aug 18, 2022, 2:41 PM
K
const { a, b, c } = await sanityClient.fetch(
`{
"a": *[…],
"b": *[…],
"c": *[…]
}`
);
return {
props: { a, b, c },
};Aug 18, 2022, 2:42 PM
G
ahhhh! let’s try this
Aug 18, 2022, 2:44 PM
G
That was it! you’re a genius. I moved all the queries to a string as per your example and it worked.
Aug 18, 2022, 2:50 PM
K
Lovely. 😊
Aug 18, 2022, 2:52 PM
G
From your example, how would I pass a param to the query? This doesn’t seem to work:
const querya = `*[groq here][]{}`
const queryb = `*[groq here][]{}`
const queryc = `*[groq here][]{}`
const { a, b, c } = await sanityClient.fetch(
`{
"a": $querya,
"b": $queryb,
"c": $queryc
}`,
{
querya: querya,
queryb: queryb,
queryc: queryc
}
);
return {
props: { a, b, c },
};Aug 18, 2022, 2:59 PM
K
You seem to be mixing up dynamically constructing the query string with different variables, and passing parameters to your GROQ queries. The latter expect variables in certain places, you can’t pass a whole expression and expect it to work. 🙂
Aug 18, 2022, 7:47 PM
K
If you just want to construct your meta query from different variables, use interpolation or a template literal instead.
const query = `{
"a": ${queryA},
"b": ${queryB},
"c": ${queryC}
}`Aug 18, 2022, 7:47 PM
G
Yeah I guess I was. I was thinking about params and it was the wrong approach
Aug 18, 2022, 7:50 PM
K
However, if your queries do need params, you still can pass them as usual:
const queryA = `*[ _type == "post" && category == $category ]`
const queryB = `*[ _type == "author" ]`
const query = `{ "a": ${queryA}, "b": ${queryB} }`
const { a, b } = await client.fetch(query, { category: 'foobar' })Aug 18, 2022, 7:53 PM
K
Here we have a meta query made of 2 sub-queries A and B. Sub-query A actually needs a category via the
$categoryparameter. We pass that argument to the fetch as usual. 🙂
Aug 18, 2022, 7:54 PM
G
This is awesome, perfect for what I needed. Thanks
user F
! 🥇Aug 18, 2022, 7:59 PM
K
Fab. 💚
Aug 18, 2022, 8:00 PM
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.