How to get blog posts on blog index in netlify cms preview template?

Netlify CMS
1

I’m trying to create a preview template inside of Netlify CMS for my blog landing page. On that page, I have a list of the recent entries. On the front-end, I’m just using a gatsby useStaticQuery to grab all of the published posts. However, the useStaticQuery is failing in the preview template.

I’ve disabled it for now… but then I wasn’t sure how to preform a similar action within the preview template to fetch the data from the CMS. Is this possible?

So, essentially, I want to just get the last 6 blog posts that exist in Netlify CMS from a standalone blog-index preview template.

2

Hi @kara-todd,

Could you explain what exactly you mean by Preview template? Is it the editorial workflow you’re talking about?

3

hi @hrishikesh

The Preview template I mean is when I use the CMS.registerPreviewTemplate() function. So, for exmaple, I have a file with the following:


import CMS from "netlify-cms-app";

import BlogIndexPreview from "./BlogIndexPreview";
import BlogPostPreview from "./BlogPostPreview";

CMS.registerPreviewTemplate("blog", BlogIndexPreview);
CMS.registerPreviewTemplate("blog-post", BlogPostPreview);

When I preview the blog index entry in the CMS I would like it to also pull in the latest blog post entries. I also use this environment locally and with different branches for various PR’s etc. So, I’d like to pull from the local Netlify CMS redux store if possible rather than calling out to an external API.

Right now my BlogIndexPreview looks like this:

import React from "react";
import Layout from "app/components/layout";

const BlogIndexPreview = (entry) => {
  const data = entry.getIn(["data"]).toJS();
  const recentPosts = [];

  return (
  <Layout>
    <div>
      <h2>{data.blogTitle}</h2>
      <p>{data.blogDesc}</p>
    </div>
    {recentPosts.slice(0, 6).map((post) => <BlogPost {...post} />)}
  </Layout>
)
};

export default BlogIndexPreview;

I’m not sure how to get the actual data for recentPosts here.

4

Hi @kara-todd,

I’m afraid, just to confirm if I’ve got it correctly: You wish to display a lit of your blog posts inside the preview in CMS? If yes, something like this doesn’t appear to be supported by the CMS (yet). CMS relies on your Git repo to fetch files and doesn’t really have any store of its own. So actually running your template login inside CMS might not work.

5

Thanks @hrishikesh. Sorry for the really long delay here.

Yes, that is what I was intending. I was hoping to use some kind of internal store, but I’ll have to see if I can mock this somehow. The issue I’m having is I often run different deploy branches. (e.g. qa, staging, etc.) and the content can be different on each one. This is a Gatsby.js site so it also can be difficult to access data in preview mode. I’ll have to see if I can mock the queries somehow or use an alternate API.

Thanks for the reply.