Next.js Errors when trying to map Slugs to Articles

19 replies
Last updated: Jun 7, 2022
Hey, small groq question -- what does this part of this expression do? I noticed my query wasn't working when the highlighted part here was uncommented
Jun 7, 2022, 2:06 PM
The
slug.current == $slug
part filters the results from
_type == "post"
to only return posts where the slug matches the
$slug
variable supplied to the query
Jun 7, 2022, 2:08 PM
It looks for
post
documents which have a
slug
field with a value that is equal to the
slug
argument given to the query.
Jun 7, 2022, 2:09 PM
The
[0]
part simply gets the first (hopefully only) one of these results to eliminate the need to traverse to the first array item in your code
Jun 7, 2022, 2:09 PM
Makes sense! Thank you both for the explanation 🙂
Jun 7, 2022, 2:18 PM
On my site there's a "news" ("nouvelles") page which maps out a bunch of articles. With the following query, my articles (when on their slug) would render the content properly, but when I would go to the parent page "nouvelles.js" rather than [slug].js I would get the following error (see screenshot)

*[_type == "nouvelles"&& slug.current == $slug][0]{

_id,

title,

publishedAt,

"slug": slug.current,

"categories": category[]->{title, slug},

"imageUrl": mainImage.asset->url,

body,

}

The error would go away on nouvelles.js when I remove the highlighted expression in my original question, but then I wouldn't get the proper content when I click into an article ( [slug].js ).

Will I need a separate query for this to work properly, or am I doing something wrong here?
Jun 7, 2022, 2:40 PM
here is nouvelles.js, and [slug].js respectively
Jun 7, 2022, 2:41 PM
Your query references a
$slug
parameter, but you do not provide any. So either it doesn’t need to check for the slug and that condition needs to be removed, or you need to pass a slug parameter. 🙂
Jun 7, 2022, 2:45 PM
Just to be clear, you mean within my groq query right? not within
getStaticProps
?
Jun 7, 2022, 2:48 PM
Both? Your groq query is executed in
getStaticProps
.
Jun 7, 2022, 2:50 PM
Yeah... so on the news index page, you don't want to match against a slug... you want to list all of the news items... so the slug match and the array index aren't needed
Jun 7, 2022, 2:51 PM
So I should have one query on my news index page without the check like so:

*[_type == "nouvelles"][]{
    _id,
    title,
    publishedAt,
    "slug": slug.current,
    "categories": category[]->{title, slug},
    "imageUrl": mainImage.asset->url,
    body,
  }
then another for my [slug].js like so:


  *[_type == "nouvelles" && slug.current == $slug][0]{
    _id,
    title,
    publishedAt,
    "slug": slug.current,
    "categories": category[]->{title, slug},
    "imageUrl": mainImage.asset->url,
    body,
  }
Am I understanding this correctly?
Jun 7, 2022, 2:53 PM
Your
getStaticProps
method might fail on that page because its looking for
params.slug
which may not exist if you're not on a route that specifically uses
slug
as a named paramater (I'm assuming this is NextJS?)
Jun 7, 2022, 2:53 PM
Nextjs yeah
Jun 7, 2022, 2:53 PM
Your first query for the news index page doesn't need the extra array expression in there, as it is already an array -->
*[_type == "nouvelles"]{...
Jun 7, 2022, 2:54 PM
Ah gotcha, this config worked:
Jun 7, 2022, 2:56 PM
whereby the second query is for the news index and the first is for an individual article
Jun 7, 2022, 2:56 PM
Yup that looks about right 😄
Jun 7, 2022, 2:57 PM
Right. You can always extract the middle bit (the fields you query) if you don’t want to maintain it at 2 different places. But essentially you need separate queries based on what you are trying to achieve, yes. 🙂
Jun 7, 2022, 2:57 PM
Thanks again for your help 😅 I really appreciate your patience!
Jun 7, 2022, 2:58 PM

Sanity.io – build remarkable experiences at scale

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

Categorized in