Next.js Errors when trying to map Slugs to Articles

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

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

It looks for

post

documents which have a

slug

field with a value that is equal to the

slug

argument given to the query.

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

Makes sense! Thank you both for the explanation 🙂

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)

_id,

title,

publishedAt,

"slug": slug.current,

"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?

here is nouvelles.js, and [slug].js respectively

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. 🙂

Just to be clear, you mean within my groq query right? not within

getStaticProps

?

Both? Your groq query is executed in

getStaticProps

.

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

So I should have one query on my news index page without the check like so:

then another for my [slug].js like so:


Am I understanding this correctly?

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?)

Nextjs yeah

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"]{...

Ah gotcha, this config worked:

whereby the second query is for the news index and the first is for an individual article

Yup that looks about right 😄

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. 🙂

Thanks again for your help 😅 I really appreciate your patience!