How to build a category page in Plasmic?

Plasmic Studio Questions
1

Hi folks! I’m evaluating Plasmic for my company and we’re loving it so far. We’re wanting to move away from a traditional headless CMS and were wondering how we’d accomplish something like this category page in Plasmic: https://next.palmetto.com/learning-center/blog/category/solar

In our CMS we had a Category model with a one-to-many relationship with blog posts and queried based off of that. Is something like that possible in Plasmic? If we build the blog posts as pages would we be able to query multiple pages to check their metadata key-values for a category?

2

Hi @back_porcupine, you can query all pages using loader.fetchAllPages() from your getStaticProps, and filter to what you want.

You can register some code components that (1) fetch/loop and (2) render fields of this data (similar to the Plasmic CMS data fetching components):

https://docs.plasmic.app/learn/data-code-components/

Then in your final page, you would fetch the data you want based on the params

export function getStaticProps(params) { 
  const posts = await PLASMIC.fetchAllPages().filter(....params....)
  const pageData = ...
  return { props: { posts, pageData, ... } } 

export default function Page({posts, pageData}) {
  return <Provider value={posts}>
    <PlasmicRootProvider ...>
      <PlasmicComponent component="Listing" />
    </PlasmicRootProvider>
  </Provider>
}
3

Let me know if that helps. (We’re also actively working on making this simpler, but that is the current approach.)

4

Yang, this should work well enough! Looking forward to seeing what you all have planned to make this simpler!