Fetching blog posts via api

[Babak]

Hello,

I'm trying to fetch my blog posts via api so I can make infinite scroll effect on the article page (I want when user scroll at the end of the article, it shows the next article automatically)

I studied this article and follow the steps

https://developers.hubspot.com/docs/api/cms/blog-post

The API is working and I can see the data, but when I want to fetch it like this:

fetch('https://api.hubapi.com/cms/v3/blogs/posts?hapikey=....')
.then(response => response.json())
.then(data => console.log(data));

It said:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

I know this is because of CORS policy, but I am trying to fetch the data from my own hubspot blog and it seems hubapi.com is not in the allowlist and even with "/" I couldn't access to api.

fetch('/cms/v3/blogs/posts?hapikey=....')

Do you have any idea how I can fetch the blog posts via api in my hubspot panel?

[Babak · Accepted solution]

@dennisedson  Thank you Denis, yes you are right, since I'm not using nodejs and it's a built-in module in hubspot it's better if I avoid using API.

@stefen Thank you Stefen, I tried using content.next_post_slug    but since it just retrieve URL/Title/Image I've stop putting more time on it.

But I solved my problem in another way, I will put it here so in case in future anyone need it:

I used  blog_recent_posts function, then add pagination for it with help of part of this code , then I used Infinite Scroll js library, and problem solved. 

However, in my case, showing the most recent article on scroll was ok too, but if someone wants to retrieve exactly the next article probably he/she needs to stick to Stefen's plan. 

[stefen]

@Babak @dennisedson you could use the  content.next_post_slug HubL variable in your blog post template then use intersection observer and fetch to get the content from the next page and load it when scrolled to the bottom of the page.

You may want to use jQuery's Load function instead of the vanilla fetch function because it has the ability to load page fragments instead of the entire page: https://api.jquery.com/load/

[dennisedson]

@stefen , what is your typical strategy for this?

Also, @Babak , be careful with that hapikey.  You don't want that exposed on your front end and I tend to want to avoid it altogether these days.