Webstudio
Log in

Join the Webstudio community

Updated 2 months ago

Binding data for blog content

At a glance

The community member created a CRM with Hygraph and is having trouble binding the data to their site. They see no data when inspecting the page. The comments suggest that the issue may be due to not having any published posts in the CMS or an issue with the GraphQL query. The community member was able to troubleshoot the missing GraphQL variable, but is now facing issues with the sitemap, where the URLs are showing as "/undefined/". Another community member suggests that the issue is likely due to not fetching or binding the data correctly.

The community members discuss potential solutions, such as using a collection to iterate over the posts and render an XML node for each one. They also discuss issues with the blog overview page, where the same article is being duplicated. The community members suggest using expressions to set CSS variables to handle different designs for the most recent blog and the next 4 blogs, and a standard design for everything else.

There is no explicitly marked answer in the comments.

Useful resources
AAntonioJr
Hi all! I followed the documentation and was able to create a CRM with Hygraph and I thought I had connected things correctly to my site but think I’m missing a step to bind the data. This is what I see when I inspect. I don’t see any data. Could anyone advise?

{
"ok": true,
"data": {
"data": {
"post": null
}
},
"status": 200,
"statusText": ""
}
O
A
20 comments
OOleg Isonen
you don't have any posts
OOleg Isonen
looks like you have nothing in the cms that is published or your gql query is wrong
AAntonioJr
That was it. Was able to trouble shoot myself where the gql variable was missing. Thanks for jumping in!
AAntonioJr
Final thing I haven’t gotten down is the site map. I see all my url slugs when I inspect. But I don’t see it on the site map. It all says /undefined/ ? I haven’t published yet, but would that be why or am I missing something else?
OOleg Isonen
can't tell without seeing anything, likely not fetching data or not binding it correctly
AAntonioJr
This is what my sitemap looks like now https://novee-staging.wstd.io/sitemap.xml
OOleg Isonen
yeah, I can't tell from looking at the result to tell what went wrong
OOleg Isonen
you have to share the project itself
AAntonioJr
Thanks Oleg. Does this work? https://p-3156315b-4af8-472f-8656-d2f680c9d004.apps.webstudio.is/?authToken=d87b1d78-e809-4058-9942-09beb7889b53&mode=preview
OOleg Isonen
you are using Posts.slug but that's wrong you want a collection that will iterate over posts, just like you do it on the posts page and inside that collection you would render an xml node for each post
Attachments
image.png
image.png
AAntonioJr
Oh so I changed it now to this and that looks good, but I’m missing how to make it dynamic as I start adding to content and show all

system.origin + "/blog/" + Posts.data.data.posts[0].slug
OOleg Isonen
I wrote it above, use collection to iterate over posts, then bind each post. This is how your overview page works as well
AAntonioJr
OK not sure what I did but it seems to be fixed now. Now I’m looking to do the same on the Blog Hub page using the Collection component

Thanks for your help again!
AAntonioJr
Oleg, the blog overview seems to be different. I’m able to bring in one blog but it seems to be duplicating across new content cards and I am using the post item query. Is there something I’m missing for this?
OOleg Isonen
you really gotta watch the video we made on hygraph, these things were demonstrated there
AAntonioJr
That’s what I’m confused about. That section is breezed through and I followed that query and got nothing. I followed the query shared in the template and that worked but it’s not translating from the collection component
OOleg Isonen
  1. fetch data - Resource
  2. bind array from that data on the collection
  3. bind the item from that array inside the collection
AAntonioJr
I did just that. I’m using collectionitem query in the individual posts
AAntonioJr
So I actually had this correct the entire time. The issue is the way I designed it where I have the same article repeating +9x and then it does the same for the next article. How would I handle with wanting a different design for the most recent blog and the next 4 blogs and then maintain a standard design for everything else.
OOleg Isonen
E.g. using expressions to set a css variable via html embed to a certain value
Add a reply
Sign up and join the conversation on Discord