Join the Webstudio community

Updated 4 months ago

using data from one CMS get to another

At a glance

The community member is using a dynamic blog post page with a CMS record retrieved based on a slug variable. They want to display related posts based on the post's category, but are unsure how to pass the dynamic category into the new curl resource filter. The comments suggest that Webstudio does not support nested resources, and the community member should create their own backend to combine the data from multiple endpoints. Another community member shares a workaround by using two dynamic variables in the URL (category and slug) to retrieve the main post and related posts. The community member then explores using Supabase, Airtable, and Frontly to manage their blog content and related posts, including storing content in Markdown and using Frontly's integration with Supabase and Cloudinary.

Useful resources
Hello!
On my dynamic blog post page, I use a curl with filter to retrieve my cms record based on the dynamic system variable :slug.

One piece of the retrieved data is a 'category' for the post.

At the bottom of the page, I would like to show related posts based on that category, again by using a curl resource with filter.

But, I don't know how to put the dynamic 'category' into the new variable curl?

Like in the first one, I add ${system.params.slug} to put the slug filter in the url. But how can I do that with the category?

Thank you
1
B
O
c
20 comments
Webstudio does not support nested resources at the moment and merging should be done on backend side.
@calamitykay its currently a limitation because managing waterfalls can be complex

We recommend you to create your own backend in this case that will do the combining of the data from all endpoints and provide a final data
Good APIs usually provide a way to fetch all data you need in one call, both REST and graphql
Hmmm okay.

I thought I'd be able to get away with creating a property ID and Class or something and then insert that into the url πŸ˜‚.

I'll admit, I don't understand variables well enough.

Thanks!
I realize this is not exactly an elegant solution, but I have found a work around for the moment, and am sharing it in case anyone else is looking for this.
In order to have a "related posts" collection at the bottom of my blog post, I wanted to filter it by category.

So, for my dynamic blog page, i've given my dynamic path two dynamic variables. Mine looks like this: /:cat/:slug In this case, :cat refers to the category, and :slug to my slug.

By doing that, I am able to pull the main post by filtering with the slug, and bind everything there. Then, I am able to also pull any related posts by filtering results with the system.params.cat of the page.

On the "overview" page, the link from the article to the detail page looks like this: /${collectionitem.fields.cat}/${collectionitem.fields.slug}

Again, not exactly graceful and urls now have a bit more length to them... but in my use case I don't think it will be a problem.
nice! what backend are you using btw?
I started out with Supabase, but switched over to airtable bc I like it's interface more. But i also really like using Frontly, and they're building out an airtable connection now, so I'm thinking I'll be able to make some cool stuff happen between the three. Though I'm not really sure what haha.
For Airtable you can add related records in a column and the various fields from those records so you can get all the info you need in one api call without having to include category in the url. Similar solutions may be present in Frontly but i've never used it
Okay thanks.
Frontly is a front for Google sheets and Supabase and next airtable.
Okay that makes sense. I'll have to learn how to do that in airtable. Everytime I had a related field I felt like it comes back through as weird strings of text and urls but Im probably not doing it right.
you need to first add a reference column then add a lookup column for every column in the referenced record you want to pull in
first add this
Attachment
Screenshot_2024-09-19_at_8.48.11_AM.png
then this for every field you want to pull in from that referenced record
Attachment
Screenshot_2024-09-19_at_8.48.39_AM.png
Thank you! Generous of you to find it and screenshot for me πŸ‘
Hello.
I went back to the beginning and set it up so I could get everything through one Rest API and through only one dynamic variable in the params. I used chatgpt to help me set it up, so I then asked it to compile a step by step of everything we did in case anyone else who is as brand spanking new to all of this as me wants it. I also went through and checked and think I got most of the nuance lil steps covered.

By following these steps, you’ll be able to set up a related posts section on a dynamic page using Supabase as a backend and Webstudio as your front-end tool. This setup is scalable and allows you to link posts dynamically, providing a better user experience.

https://ag2b.notion.site/Creating-a-Related-Posts-Section-on-a-Dynamic-Page-in-Webstudio-with-Supabase-1146d06becbd80b79ebde9df9e6b792b

Cheers
thats awesome! Your'e using supabase for a cms? Do you store rich text too?
Okay so, this is going to sound whacky but it really isn't.
I store my blog content in markdown, and use the markdown embed option in webstudio to display it.

I create my blog content on a frontly page i built, which has a markdown text editor. Frontly lets me catalogue all of my images (and upload them... i'm using a free cloudinary acct) and easily retrieve their urls, so i can just enter that into the markdown editor. It also provides a preview. Then, when I hit save, it sends it to my supabase, which will then show up on my webstudio.

Also, i haven't configured everything yet, but i'll be able to create the relationships there and whatever else I want.

So, I think it's pretty swell. Here's what the frontly blog builder page looks like (sharing with the expectation everyone looking knows I have NOT refined or designed this, was just puzzling the pieces together first so it looks like poop but you get the idea at least). But it will have real potential for a smooth blog creation flow. And eventually, I'll be able to get other writers to use it, without ever having to touch my supabase or webstudio.
Attachment
Capture.JPG
wow interesting. Im intrigued. Supabase is great but not for managing rich text and relations so this can solve that.

How much setup went into frontly?
Yea! I don't know much about supabase but I am motivated to use it b/c I feel like its a good tool to learn and gain knowledge/comfort around.
Frontly set up was literally so easy. They offer supabase integration, so I just had to follow like 3 steps to do that, and then to create the page is like practically the easist thing in the world. You hit "add form" and change the content field to "markdown text" and boom. That's that. Same with the cloudinary account. Simple integration, and then like a 2 step setup to see my images in frontly.
very cool! thanks for sharing. Supabase is great and this is a neat setup
my pleaure. Frontly is also pretty great, and so is webstudio! so tres greatness :).
Add a reply
Sign up and join the conversation on Discord