@John Siciliano thanks so much for your awesome video on hygraph + webstudio.
I followed the instructions and have been able to setup a posts page, and post.
everything works fine. the posts page has a list of posts.
It would help just to start from where where it left off.
To going into having just 4 blogs on the posts page. and then activating the pagination so it navigates to the next 4 blogs etc
Got it. So couple things:
- In the Marketplace, there is a Hygraph template that includes pagination (something that wasn't discussed in the video tutorial). I would reference that/ copy and paste it into your page then go to each instance within the pagination and look for bindings so you can update them to your own.
- If you have done this but don't have it working, can you share a builder link (dm if fine because API keys) and I can troubleshoot it
just sent u a friend request!
Hi,
I didn't find the template for pagination. I went to integration > Hygraph and there 4 templates but none about pagination
It should be in the posts one
I see how I can implement it in my Posts page. 50 is to big. I would like to reduce to 15.
I have to program it in my Query, right ?
Can I have some explanation, please ?
When do I create next and previous buttons ?
I would use the pagination from the marketplace and adapt it to your variables. theres too much to explain + accessibility stuff in there
When I pasted my new query (Body settings), I lost the entire layout of my blog's home page. Is there a trick to avoid this inconvenience?
PS: I saw in the Posts Hygraph template that we also needed to add bGraphQL Variables
If you went from non pagingated query to paginated query then the strucutre of the results change, so no way to prevent this. Just need to rebind them
Pagination is working now on preview but not on published website and I lost connection between blog home page and article. I am going to be mad 😬
https://team-app-a12cg.wstd.io/I notice that slug is undefined
formula needed to be calc(100% / 3 - (30px * 2/3)) instead of 1/3. It's gaps/columns.
I'd use grid now though. I used this formula before we had the advanced panel
As for 100%, there is a bug that was just fixed but not deployed yet. The bug was flex is set on Cards Wrapper, then theres the Collection, then there is Blog Card - Blog Card should have Flex Child properties but didn't because collection was in the way.
For now I just added the flex prop manually to advanced
as for pagination, the formula is broken. See it's missing the variable
Thank you @John Siciliano 🤩.
You are a magician.
Pagination works and grid is perfect.
Do you know when grid function will be release ?
So, I double-checked formula Post page and nothing is broken. Do you have any idea why I lost connection to each blog page ?
I have a 404 status and I don't understand. Maybe you already had such error. I confirm that before adding pagination to Posts page, Post page works properly. I don't know if there is a link.
I sent a message to Hygraph support too
Do you know when grid function will be release ?
No but its a high prio on the roadmap
So, I double-checked formula Post page and nothing is broken. Do you have any idea why I lost connection to each blog page ?
Idk what this is referring to. I was just looking at the pagination formula.
I see a 200. Depends on what slug you are previewing
I updated my published website then now I have an error message
All of your posts link to undefined
need to update the slug in the links there
Ah but theres still another issue. looking
jfyi your sitemap has the wrong path too
Looks like this is causing the 500 error
I don't understand why all my posts are undefined.
What do I have to set all my post correctly ?
I followed your video several times step by step.
Where is my mistake ?
I don't understand why this is weird data source is here. Initially, I set "CMS Data". Everytime, I change this weir name by the right data source, this wrong data source come back
I don't understand why my sitemap is wrong too. I followed step by step your video about how to setup the sitemap.
I added pagination according to hygraph template posts and I added new articles in hygraph.
I would like to understand what I am doing wrong
PS: I order to find my error I delete sitemap file. I will built it later once blog post will be Ok
I don't understand why I have undefined and hello-world. I have no article in hygraph named like this. I would like to delete this 2 stuffs. How can I delete them ?
I have only 3 real blog posts in the list. Why I don't see the others ?
All my posts are published, all assets and authors too
I double-checked url and query in body for Post and Posts pages. I think there is bug
I still have a 404 error after correction data source
When you see that weird data source, thats the internal id of the variable. Many times that happens when copying and pasting. If you see that, you need to replace it. What are you doing where it's coming back?
All you have to do is update the "somepath" part of the url. It's just hardcoded in the <loc> node
Those values comes from either typing them in or navigating to them. So "undefined" was from the overview blogs posts.. we clicked /posts/undefined, then it puts undefined in there. THose are just test values. If you type "asdf" then that will show up there
I see your posts working fine, including on the live site
But .slug isn't an option:
Now your posts grid all links to the proper places
After correction,I click on publish in order to save what I have done and I go to the published website to double-check if it works
Does it mean I have to rebuild sitemap file ?
I deleted the sitemap file as you told me it was wrong.
I thought I would have had the default sitemap from WS by deleting my wrong sitemap file
I forgot to update this part. Thank you
@John Siciliano Thank you so much for your help 🙏.
My major mistake was to forgot updating Binding expression for Post item and that solve at the same time the "somepath" problem in the URL, right ?
That would be great to see broken link @John Siciliano @Oleg Isonen. I didn't think there was a link problem as there was a blue cross. Is there a way to check broken links ?
agree, we should turn that plus button and/or input border red when binding is broken @TrySound you agree?
The thing is the binding is not broken. slug here is "undefined" and runtime casts it to string
Maybe we shouldn't cast undefined to a string? Because this is going to be a common scenario
Not sure what could be another option. It's valid to cast this from js perspective, but practically there is no way undefined could be a wanted value
Setting it to a "warning" state in yellow instead of red? Aka potentially broken?
That would be great to know there is something different. All my problem came from the fact I updated my query including pagination. Before update everything works perfectly thank to John's video.
The yellow point is a good idea, instead of broken that would mean to double-check this binding because it won't work as before
