Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Troubleshooting reference fields in a Next.js Landing page template

10 replies
Last updated: May 2, 2020
I'm working off the Next.js Landing page template. I've created a new document called Features. I want to be able to reference the features and insert them into a Page. I have the studio set up correctly so I can add the Features within the page. When I have two features in there, I can get 2 empty divs to show up on my front end so it seems like it's finding the referenced documents, but I'm missing data for the titles etc.
I'm returning

{features && (
          <ul>
            Posted in
            {features.map(feature => <li key={feature}>{feature.title}{feature.key}</li>)}
          </ul>        )}
But I think I can't get the groq query right. For that I have:


if (slug && slug === '/') {
      return client
        .fetch(
          groq`
        *[_id == "global-config"][0]{
          frontpage -> {...,content[] {...,},
          features
        }
      }
      `
        )
        .then(res => ({...res.frontpage, slug}))
    }
I can't seem to pass the title or any of the features fields to it.
May 2, 2020, 3:47 PM
have you tried console logging the features variable to make sure there is something to map over?
May 2, 2020, 3:50 PM
Hi Anders, thanks for the response, i'm having trouble finding the right place to put the console log, would you mind directing me?
May 2, 2020, 3:53 PM
If I add an extra document reference in the page, I get an extra empty item on the page. So it's mapping over something
May 2, 2020, 3:55 PM
May 2, 2020, 3:56 PM
help really appreciated I've been stuck on this for 2 days. I was able to make some progress with the blog post you linked me to the other day, but i think one last piece of the puzzle is missing 🙂
May 2, 2020, 3:56 PM
I think about line 73 in your github before you set the openGraphImages var inside your render console.log(features) will let you know, my guess is it's an empty array I'll look at your code to see if I see anything I can tell. I haven't used groq just graphql, but i'll take a look.
May 2, 2020, 4:07 PM
Thanks
user S
! I do see this. So seems it's not empty?
May 2, 2020, 4:09 PM
Try
if (slug && slug === '/') {
      return client
        .fetch(
          groq`
        *[_id == "global-config"][0]{
          frontpage -> {...,content[] {...,},
          features[]->
        }
      }
      `
        )
        .then(res => ({...res.frontpage, slug}))
    }
Since 
features
is an array, you have to traverse it 
[]
, and since this is an array of reference objects, you can add 
->
 to join the documents. Since you‘re not using all the fields here, I‘d perhaps project only those you need as well:
features[]->{_id, title)
Then you can

{features.map(feature => <li key={feature._id}>{feature.title}</li>)}

May 2, 2020, 4:15 PM
Try
if (slug && slug === '/') {
      return client
        .fetch(
          groq`
        *[_id == "global-config"][0]{
          frontpage -> {...,content[] {...,},
          features[]->
        }
      }
      `
        )
        .then(res => ({...res.frontpage, slug}))
    }
Since 
features
is an array, you have to traverse it 
[]
, and since this is an array of reference objects, you can add 
->
 to join the documents. Since you‘re not using all the fields here, I‘d perhaps project only those you need as well:
features[]->{_id, title)
Then you can

{features.map(feature => <li key={feature._id}>{feature.title}</li>)}

May 2, 2020, 4:15 PM
Glad to hear! Don’t hesitate to let us know before it has gone 2 days if you're stuck 🙂
May 2, 2020, 4:29 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.

Get started for freeExplore the demo

Was this answer helpful?