Querying for articles in a category for a dynamic route using Astro
12 replies
Last updated: Jul 30, 2022
B
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
i'm trying to create a category archive page for each category
i want to get all
articlesin 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
B
ok, i've got this going right now
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
*[_type == 'category']{
slug,
'relatedArticles': *[_type == 'article' && references(^._id)]{slug}
}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
B
ok, got it sorted ... for anyone looking to do the same, I just had to adjust my
I also had to add
final query looked like this.
.mapon 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
B
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
V
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
B
update: yes
user Y
I did that, and all added a spread for all content from the category
Jul 30, 2022, 1:34 PM
B
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
categoryarchive pages, and then i wanted to populate them with the appropriate articles
Jul 30, 2022, 1:35 PM
B
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:
Give the use case
“relatedArticles”: *[_type == “article” && ^._id in categories[]._ref]order(publishedAt desc){ _id, title, slug, categories[]->{_id,title,slug}}referenceswill 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
B
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.