Issue with querying and joining data in a front-end application
15 replies
Last updated: May 27, 2021
J
Kia ora! I have a follow up to a previous query - https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1619497015485200
I’ve successfully been able to reference the images I’m looking for, but I’m unable to use them in my front end for some reason! The only difference between this page and another is how I’m querying the images - in this gist, [slug].js is querying all image documents that reference this document (camera), and in [slug-1].js I’m querying a list of images that this document (collection) references.
There must be something I’m missing in how I process these queries and join the data, because next is giving me undefined for slug.current and post.image! Can anyone help?
https://gist.github.com/jenkshields/ec7a11fe3b0f830c40276c4343d33620
I’ve successfully been able to reference the images I’m looking for, but I’m unable to use them in my front end for some reason! The only difference between this page and another is how I’m querying the images - in this gist, [slug].js is querying all image documents that reference this document (camera), and in [slug-1].js I’m querying a list of images that this document (collection) references.
There must be something I’m missing in how I process these queries and join the data, because next is giving me undefined for slug.current and post.image! Can anyone help?
https://gist.github.com/jenkshields/ec7a11fe3b0f830c40276c4343d33620
May 26, 2021, 5:26 AM
J
(Pinging
user A
who helped me last time! If you’ve got any insight this time, I’d absolutely appreciate it! 👏)May 26, 2021, 5:27 AM
G
I’ll be happy to take a look in the morning. 👍
May 26, 2021, 6:18 AM
J
Thank you so much!!
May 26, 2021, 7:10 AM
J
Thank you so much!!
May 26, 2021, 7:10 AM
G
When you run that GROQ query in Vision that’s in getStaticProps() in [slug].js, does it work? Perhaps even paring it down a bit might help to help get to the problem:
Also, just to confirm, are you setting a reference to
*[_type == "camera" && slug.current == $slug]{title, "photos": *[_type == 'photo' && references(^._id)]}[0]
// Params
{
"slug": "<A_CAMERA_SLUG>"
}_type: 'camera'from the document of
_type: 'photo'?
May 26, 2021, 6:58 PM
J
Thanks so much for your help! That page is actually working perfectly fine - it’s the collection query that I’m having trouble with:
While I can see the post objects that this returns in the console, and they seem to look visually identical to the ones logged in the camera page, the data is unavailable - which is making me think it’s something in how I’m working with this reference!
This
export const getStaticProps = async ({ params }) => {
const post = await sanityClient.fetch(`*[_type == "collection" && slug.current == $slug]{title, description, "images": images[]->{image, slug}}[0]`, { slug: params.slug })
return {
props: { post },
revalidate: 30,
}
}
This
collectiondocument has an
imagesfield that is an array of references to
photodocuments.
May 26, 2021, 11:33 PM
G
Okay, thanks for the clarification. So [slug].js works fine but [slug-1].js doesn’t.
ThisBased on this, I’m curious about thecollectiondocument has animagesfield that is an array of references tophotodocuments.
imagein your projection in
"images": images[]->{image, slug}. Would you be willing to post the JSON you get back from this?*[_type == "collection"]{..., "images": images[]->}[0]May 27, 2021, 3:59 AM
J
Absolutely! Here's that JSON: https://gist.github.com/jenkshields/d6bbed75e104f3b7cf45600c2e0def95
May 27, 2021, 4:24 AM
G
Great! That’s helpful, thank you. Could you try this in your fetch in getStaticProps()?
*[_type == "collection" && slug.current == $slug]{title, description, "images": images[]{'image': image.asset->, slug}}[0]`, { slug: params.slug })May 27, 2021, 4:34 AM
G
You can play with the naming, but it looks like you’ll want to destructure
images[].image.asset.
May 27, 2021, 4:35 AM
J
Thanks for this! When I run this query the
imagesarray is filled with empty objects for some reason!
May 27, 2021, 4:43 AM
G
Oh. Sorry, I’m looking back at the code that produced response.json and you did destructure images[]. What does this give?
*[_type == "collection" && slug.current == $slug]{title, description, "images": images[]->{'image': image.asset->, slug}}[0]`, { slug: params.slug })May 27, 2021, 4:46 AM
J
That did it, thank you so much!
I had also totally missed that my presentation logic was sitting outside my map function, which also wasn't helping!
I had also totally missed that my presentation logic was sitting outside my map function, which also wasn't helping!
May 27, 2021, 4:55 AM
J
Thanks again for all your help! I really appreciate it!
May 27, 2021, 4:55 AM
G
Great! 🙌 Happy to hear it.
May 27, 2021, 4:56 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.