Partly-Answered: Using CMS to create dynamic URLs (Hygraph, Caisy etc)

Hi all!

Very new here and very new to this sort of development but I’m giving it a go.

I’ve had success using REST APIs and referencing CMS databases like Hygraph etc to render the contents of those databases on canvas.

What I’m struggling with is

A) How to get ONLY the relevant info from a database on page/[slug], such as a blog. If I click a blog post, I only want one title, description etc which corresponds to that row on the database. It’s done here: Dynamic pages and routes in Plasmic - YouTube but they’re using a shopify component that references an ID and is build specifically for that. I can’t find anything like that in the other CMS options I’m trying.

B) How to set up dynamic URLs. Now, this seems fairly straightforward but I’ve heard various things. Apparently github doesn’t support dynamic routing, apparently it IS possible, I have no idea. As far as I’m aware, all I had to do is set links to /page/[slug] from another page and that page will “generate” but that might be very naive of me.

How do I do this? It’s the final hurdle for me in moving over my clients from Framer etc but this is really stressing me out :smiley:

EDIT:

All seems good on vercel… I just need to know if hiding visibility at surface level like this is the appropriate way to go, or if it’s bad practice. If this is fine, then we’re good to go!

image
image

Hi @tom_prest-drawbridge!

You can usually use filters on CMS components to fetch a single row. It depends on which CMS you’re working with, it varies - for instance, GraphQL queries have their own way of expressing filters, different from a custom REST API, which is different from Shopify.

Dynamic routing is possible with pure static hosts only if you implement getStaticPaths in your Next.js app. Generally recommend sticking to something like Vercel rather than GitHub however - it’s much less hassle. The setup in the quickstarts and in create-plasmic-app will ‘just work’.

Hey Yang!

Thanks for the response. So… just to check, it SEEMS like the way I did it has worked (as per the page URLs above): filtering according to slug in the visibility UI as showed.

Is this correct? Can I leave it there? Are we good to go or have I done something that’s actually really bad.

As for what you said about Vercel, I’m hosting on vercel currently - github was just a repository. Am I good to just publish to Vercel or any hoops I have to go through to fix anything?

Publishing to Vercel from GitHub is great.

It looks like you are doing the filtering client side, after the data has been fetched. You may want to update instead your graphql query so that you are specifying the slug filter there, that way you are not fetching more data than is necessary.

Ok can you guide me in a little more detail on that? :sweat_smile:

I have absolutely no idea how to do that.

Hi, this really depends on your data source and graphql query. I’m not personally familiar with Hygraph but it looks like they offer the following: Filtering | Hygraph

How did you come up with your graphql query? Is there a place in it where you can add those filters?

I’ve created an override variable that allows me to include the slug from Plasmic, so it filters it in-query rather than on the canvas.

I just need to know if this is “best practice” or if I’m causing any inefficiencies here?

image

You got it!

I can’t tell if that’s the full variable overrides expression, but you can probably write something like

({slug: $ctx.params.slug})