Group content by field value

[dturkington (Daniel Turkington)]

I am using GatsbyJS with the Prismic GraphQL interface to display multiple content documents of a single type on a single page. I would like to group the documents by the category field of that content type. The category field is a dropdown the writer selects. To do this, I have to hardcode the field which I want to group by like so:

query MyQuery {
prismic {
categoryOne: allMy_Content(where: {category_fulltext: "category1"}) {
edges {
node {
name
}
}
}
categoryTwo: allMy_Content(where: {category_fulltext: "category2"}) {
edges {
node {
name
}
}
}
categoryThree: allMy_Content(where: {category_fulltext: "category3"}) {
edges {
node {
name
}
}
}
}

I would like to do this without hardcoding the names of the categories so Prismic admins could add more categories in the future and it would not require updates to the Gatsby code base. Thanks!

[Phil (Phil Snow)]

Hi Daniel,

This would be a use case for filtering your documents on the client side rather than using queries to the GraphQL api server side. You would simply query all the documents of that type from the Prismic and then client side filter those documents by their category.

For that you’ll need to index your all your documents at build time a build a dropdown that takes advantage of one these plugins:

Adding Search

I haven’t implemented this before, but the plugins seem well documented.

If your content writers add any new categories or documents then you will need to set up a webhook to trigger a build.

Webhooks

Let me know if you have any further questions.

Thanks.