Dynamic routing with Hygraph database

Plasmic Studio Questions
1

Hi all! How would one go about making /blog/[slug] work with a Hygraph database? (I’m a newbie using NextJS, Headless API, and SSG/[[…catchall]])

I’ve set up my slugs and blog content in Hygraph, but I’m stuck a little unsure of how to get plasmic to dynamically display pages based on the slug.
• The Plasmic CMS example in the documentation added a slug param to getStaticPaths and a getProductsSlugs() asyncs function to the catchall file (link to catchall in plasmic-cms-nextjs).
• Based on this Hygraph blog tutorial, it looks like I need to
a. Create a .env.local file with my Hygraph “endpoint” URL
b. In getStaticPaths, add my Hygraph “slug” GraphQL query directly there, and modify the returned slug param? ← this part I’m the most unsure about

image.png
image.png819×649 35.7 KB

2

The tutorial had the following at // pages/events/[slug].tsx. I assume this is the part to be modifying for my Plasmic [[...catchall]].tsx?

const client = new GraphQLClient(process.env.NEXT_PUBLIC_HYGRAPH_URL);

export const getStaticPaths: GetStaticPaths = async () => {
  const query = gql`
    query Events {
      events {
        slug
      }
    }
  `;
  const data = await client.request(query);

  return {
    paths: data.events.map((event) => ({ params: { slug: event.slug } })),
    fallback: "blocking",
  };
};