Querying and dereferencing documents with arrays and references in Sanity.io
9 replies
Last updated: Mar 14, 2023
G
Can someone help me format this query? I have a document (type A) that has two arrays, which each reference other documents (type B & C, respectively). I initially queried for documents of type A && with the right name, then made two naked projections for each array of documents, like this:`'typeB': typeBDocuments[].typeBDocument->` so that they dereferenced (I think that is the right terminology?).
The problem is that these documents each have references inside them, and so I either need to learn how to do multi-layer dereferencing, or I need to query documents of type B & C which are referenced by the type A document.
I’m happy to give access to the repository if you want to see the thing.
The problem is that these documents each have references inside them, and so I either need to learn how to do multi-layer dereferencing, or I need to query documents of type B & C which are referenced by the type A document.
I’m happy to give access to the repository if you want to see the thing.
Mar 3, 2023, 5:37 AM
S
You can dereference as deep down the rabbit hole as you want, for eg,this is a 3 layer deep dereference.
Of course, you could also query by document type B and C to get the data you need - it all depends on how you intend to use the information in the end.
*[_type == 'A']{
B[]->{
C->{ someProperty }
}
}Mar 3, 2023, 5:52 AM
G
user T
thank you very much! I was missing the second set of curly bracketsMar 3, 2023, 6:55 PM
G
Actually, I spoke too soon. Here is the actual GROQ which gives me the following data (image attached). As you can see there, the sets’
Any chance you can help me with this more specific question? THANKS!
*[_type == 'collection' && title == "${collectionName}"] {'products': products[].product->, 'sets': sets[].set->}image.assetis a reference, which I need to dereference.
Any chance you can help me with this more specific question? THANKS!
Mar 4, 2023, 1:20 AM
S
It's not advisable to dereference an image asset for presentation via groq. I would recommend using the Image Builder library to dynamically construct the url you need to render the image on the frontend.
Mar 4, 2023, 4:16 AM
G
great, I’ll look into that. Thanks!
Mar 4, 2023, 8:17 PM
G
I’ve installed the image-url builder , but I’m confused on how to use the next set of instructions here . I don’t know how to “pass it your configured sanityClient”. Sorry for the n00b question…
Mar 5, 2023, 2:38 AM
V
Passing a "configured Sanity client" is a two step process of
• first, importing the relevant packages into a 're-usable' file and adjusting the values of the properties to reflect your own studio/project, similar o the example in your second linked, and then
• second, referencing that exported setup from that file into the file where you'll use it
Having the "client" in one place saves you from having to copy and paste the project details every time you want to connect to your data in the code.
Imagine that I had to introduce myself to shake hands with everyone I met. I'd have a file like this
and then everywhere I wanted to shake hands, I could just say
• first, importing the relevant packages into a 're-usable' file and adjusting the values of the properties to reflect your own studio/project, similar o the example in your second linked, and then
• second, referencing that exported setup from that file into the file where you'll use it
Having the "client" in one place saves you from having to copy and paste the project details every time you want to connect to your data in the code.
Imagine that I had to introduce myself to shake hands with everyone I met. I'd have a file like this
// nameDetails.js
export const name = {
first: 'Vincent',
last: 'Florio'
}import { myName } from nameDetails.js
const handshake = shakeHandsUsing( myName )Mar 10, 2023, 2:24 PM
G
Thanks for the explanation! So does this require a build process or active server architecture (to run node)? What would the reusable file be named?
Mar 14, 2023, 7:32 PM
V
You are able to select whichever name you please for the file, just as long as it matches when you import it into the file where it's being used in just the same way.
I don't know that it requires a server architecture because the requests are all able to be made client-side; that said, I think even in regular React (not necessarily Next.js for example) you still have to export to a static build to make sure it all operates correctly, but someone else might be able to weigh in on that.
There are some solid
"starter" projects you can fire up with a free Vercel integration if you're interested in experimenting.
I don't know that it requires a server architecture because the requests are all able to be made client-side; that said, I think even in regular React (not necessarily Next.js for example) you still have to export to a static build to make sure it all operates correctly, but someone else might be able to weigh in on that.
There are some solid
"starter" projects you can fire up with a free Vercel integration if you're interested in experimenting.
Mar 14, 2023, 8:12 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.