Join the Webstudio community

Updated 4 weeks ago

CMS Posts pages

I'm struggling with the dynamic pages from my CMS (payload). I think I'm missing some simple concepts from the videos. Here are the steps I've taken:

  1. Create a dynamic path
  2. Add a variable to the body with my endpoint (the attached image shows the data returned)
  3. Bind content through the expression editor
  4. Adjust the path to see the dynamic pages (this is where nothing happens)
I think the binding might be causing the issue because I need to have "docs[0].title"; I think the array position is messing things up, but when I remove the [0], I get nothing.

I've watched all the CMS YouTube videos multiple times, but I am getting stuck here.
Attachments
CleanShot_2024-07-24_at_23.21.232x.png
CleanShot_2024-07-24_at_23.23.482x.png
CleanShot_2024-07-24_at_23.22.382x.png
CleanShot_2024-07-24_at_23.20.152x.png
1
O
J
J
40 comments
sounds like you are on a details page but you are fetching a list of documents for the overview
for the details page of an item you should be fetching just that item
other than that from what I can see on your screen shots I think you are not using the variable from path params in your query to fetch the right item
Good way to ask these questions is lead with shared url, because its like looking through a lock hole with these screenshots
Thanks, Oleg. I've been messing with this for hours trying your suggestion. I think it's precisely what you are saying, but I can't figure out how to make my query fetch the individual post. I've created a dynamic page using the resource URL and the same using graphql; both are the same issue.
https://apps.webstudio.is/builder/69600a11-6c31-4f93-bd56-72b1d2ee4743?authToken=cc64f694-7587-4e71-b552-48057655e41f&mode=preview

Any suggestions would be appreciated.
I don't know their api, here is their documentation https://payloadcms.com/docs/rest-api/overview
you prob want the Find
using collection slug to get the right collection item
I would also try using gpt and asking them to read that doc
btw if you ask gpt to give you a curl command, since we support pasting curl commands into the url, it will put all the parameters in the right inputs
ofc you still need to use the slug variable from system, but we have a video on that
looking at your graphql query you are clearly not passing the post slug or id to your query ... we have a video on exactly this, please watch it, I am curious where you get stuck
e.g. this is using hygraph with graphql pretty much the same thing
did you watch it before? was it not clear?
I've watched that video multiple times. I hosted a WordPress instance just to follow along and was able to get that working by following John's instructions. I wouldn't have been able to do that without the tutorial.

The issue is my knowledge gap. I've never connected to APIs before so I'm at the beginner level of understanding how they work. I've read the api docs on Payload as well but they are for someone who already knows what they are doing.

I'm trying to learn by doing. I've just got stuck at the moment. I'm probably not asking GPT the right questions though.
what you are missing is the fact that to load a details page, basically item, you need to get the item id or slug from the url and use it in your query
URL: /item/jeremy

GET /api/item/jeremy
Attachment
image.png
you are getting the itme by accessing system.params.whatever variable
you have to use it in your query, look carefully again how you do it in the videos
This took me much longer to figure out than I wanted. I'm sharing this in case anyone has the same issue.

USE THE POST ID: Add "posts/:id" as the dynamic path, then add a variable https://.../api/posts/${system.params.id}

OR

FILTER BY SLUG: Add "posts/:slug" as the dynamic path, then add a variable https://.../api/posts?where[slug][equals=${system.params.slug}
yes! how can we explain this better, where did you see content that should have explained it but didn't. You are right now fresh into this, so you probably still know what went through your path to get to understand this
I basically screenshot this conversation and gave it to AI along with all the payload cms API docs and the Webstudio documentation. Then, I took many screenshots of Webstudio builder and into Postman to try and figure out the endpoints. I needed to ask AI how to teach me a little about API endpoints, the terms and what questions to ask. It wasn't a smooth process, but I don't think it was a lack of anything in your videos. It's a lack of my knowledge on the subject.

Adding a tutorial on the basics of endpoints might have helped me, but I'd assume that isn't your market.
I actually think we have some great videos on endpoints etc but maybe it needs to go in detail about everything @John Siciliano wdyt
Hmm so in your case Jeremy it would be helpful to explain the URL provides data and you can change the URL to filter or sort data?
Also, I'm curious if you read the cms docs. Its okay if you havent πŸ™‚ If you have can you suggest where they can be improved?
I would be even curious what are all the things about urls/apis that you didn't know @Jeremy to better understand what are we exactly missing in the docs
"I don't think it was a lack of anything in your videos. It's a lack of my knowledge on the subject." - This was intended as a compliment; I think the videos and docs are great. I was saying it was a "me problem".
Still, maybe we need some dedicated video for the API endpoints and article. I think this is very critical and we need to do an amazing job at explaining those.
Yep, I read all the docs multiple times and watched your video approximately 9 times. I was able to follow along exactly for the systems you've used. I just needed to learn how to translate this to a different CMS, that is where I was stuck. Nothing on Webstudio.
I wouldn't be opposed to that! πŸ™‚

I wasn't expecting support for a completely different product (in this case Payloadcms). You guys are always super helpful beyond your product (eg fixing people's JS), but this ask seemed like too much.
I am basically not very familiar with payloads specific api, so I wouldn't know what exactly went wrong with your case, but I saw you are not using params in your query, so it couldn't work
we should probably launch a video for payload too, but @John Siciliano unfortunately can not multiply himself lol
haha yeah, I enjoy his videos. A second John would be cool.
Also another reason to deeply understand what people don't understand with APIs, is because we can integrate AI for them
In theory there could be a prompt "where one can say, create a query for payload api and fetch me xyz"
I needed to add the slug to the code and create a posts/ collection. It makes its own endpoints but I haven't got my brain around this yet. I'm sure AI could help with that stuff but probably wouldn't get it correct off the bat.
Saving this for future
Add a reply
Sign up and join the conversation on Discord