Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Querying for articles in a category for a dynamic route using Astro

12 replies
Last updated: Jul 30, 2022
been searching through slack and trying to follow the Groq cheat sheet, but not finding what i need. can someone help?
i want to get all
articles
in a
category
. what's the best way to do so?
i'm trying to create a category archive page for each category
Jul 30, 2022, 12:03 PM
ok, i've got this going right now

*[_type == 'category']{
  slug,
  'relatedArticles': *[_type == 'article' && references(^._id)]{slug}
}
this returns all the articles for each category...

guess i'm now not sure what to do with this, as i want to build a page for each category, with its articles

so not sure if this is a correct query still
Jul 30, 2022, 12:25 PM
ok, got it sorted ... for anyone looking to do the same, I just had to adjust my
.map
on my archive page.

{post.relatedArticles.map((article) => <PostEntry article={article} />)}

I also had to add
categories[] ->
in order to resolve them deeper down my component pipeline.
final query looked like this.


export const allCategoryPostsQuery = `*[_type == 'category']{slug, 'relatedArticles': *[_type == 'article' && references(^._id)]{..., country ->, categories[] ->}}`
Jul 30, 2022, 12:42 PM
oh, i should add, that i'll also need to include some ordering to get them to list chronologically 😉
Jul 30, 2022, 12:43 PM
Is it also possible to do a dynamic route approach and grab the category name from the address and use it slug style fed as param to the query? Not sure what your front end is.
Jul 30, 2022, 1:07 PM
You can add the order() function to the subquery as well.
Jul 30, 2022, 1:27 PM


export const allCategoryPostsQuery = `*[_type == 'category']{slug, 'relatedArticles': *[_type == 'article' && references(^._id)]order(publishedAt desc){..., country ->, categories[] ->}}`
Jul 30, 2022, 1:28 PM
update: yes
user Y
I did that, and all added a spread for all content from the
category
Jul 30, 2022, 1:34 PM
user S
the front-end is Astro, and it is a dynamic route... that's why this query was so difficult for me to wrap my head around...
first i had to create the routes for all the
category
archive pages, and then i wanted to populate them with the appropriate articles
Jul 30, 2022, 1:35 PM
here's an updated "final" query

export const allCategoryPostsQuery = `*[_type == 'category']{..., 'relatedArticles': *[_type == 'article' && references(^._id)]{..., country ->, categories[] ->} | order(publishDate desc)}`
Jul 30, 2022, 1:35 PM
Btw. If you want to constrain it to references only coming from the categories array, you can do:

“relatedArticles”: *[_type == “article” && ^._id in categories[]._ref]order(publishedAt desc){ _id, title, slug, categories[]->{_id,title,slug}}
Give the use case
references
will unlikely have false positives, but now you know of this pattern as well.
Jul 30, 2022, 1:39 PM
Btw. I'd be a bit careful with the spread when you use it with next. You end up fetching a lot of data you probably never use and that get stored in the json files next generates. Even though it's gzipped text it's something to consider.
Jul 30, 2022, 1:41 PM
user Y
that's a good shout! i'm using Astro, but regardless of framework, querying for only what you need is always best

👍
Jul 30, 2022, 1:46 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.

Was this answer helpful?