# Creating a Blog with Gatsby

**URL:** <https://forum.builder.io/t/creating-a-blog-with-gatsby/1872>\
**Category:** Technical Questions\
**Tags:** visual-editor, gatsby, react\
**Created:** [March 7, 2022, 4:39pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872 "2022-03-07T16:39:14Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![shehan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shehan/32/1005_2.png) [@shehan](https://forum.builder.io/u/shehan)\
**Post date:** [March 7, 2022, 4:39pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/1 "2022-03-07T16:39:14Z")

</div>

Hi,

**What are you trying to accomplish**  
I am trying to create a blog like feature using the Gatsby example. As the example provided in the documentation only specify the practice for Next.js. I am not sure the path I’m going is correct.

**Code stack you are integrating Builder with**  
_e.g. Gatsby, react_

**Reproducible code example**  
The setup I have so far is this.  
have a page model to generate dynamic blog articles

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/f55c1cf621bfe2d9a292b1a7e043fe10a4c844a7.png)

And I have set a template like below for this model

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d569118a85d3ec41dc97ddfd108766969dda9a09.png)

the idea is to create dynamic pages as articles with a specific template but with the ability to have custom components.

`Blog.tsx` looks like this for now

```auto
import React from 'react';
import { graphql } from 'gatsby';
import { BuilderComponent } from '@builder.io/react';
import { Helmet } from 'react-helmet';

const Blog = ({ data }: any) => {
  const content = data?.allBuilderModels.blogArticle;
  console.log('--- blog data from page ---', content)

  return (
    <>
      <Helmet>
        <title>{'blog template'}</title>
        <meta name="description" content={'blog template description'} />
      </Helmet>
      <h2>Blog article here</h2>
      <BuilderComponent content={content} model="blogArticle" />
    </>
  )
}

export default Blog;

export const BlogTemplateQuery = graphql`
  query ($path: String!) {
    allBuilderModels {
      blogArticle(target: { urlPath: $path }, limit: 1, options: { cachebust: true }) {
        content
      }
    }
  }
`

```

So in order to list down these blog articles I am trying to have a **custom component**. Which has a query like below

```auto
export const query = graphql`
  query {
    allBuilderModels {
      blogArticle {
        id
        data {
          author
          date
          title
        }
      }
    }
  }
`

```

But even though when I add this custom component to a `Page` model type page. Results give me **undefined**. Here is how I read the query

```auto
const content = props.data?.allBuilderModels.blogArticle;

```

Please let me know if im doing anything wrong here.

Thank in advance.

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [March 9, 2022, 4:53pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/2 "2022-03-09T16:53:04Z")

</div>

Hey @shehan,

Great question. You set up your blog article model correctly and are on the right track! It sounds like you are getting stuck trying to figure out where to register your custom component. If your component needs to use custom field data from your article perhaps a better place to define the component and run the query is in the blog article template. Since [Gatsby templates](https://www.gatsbyjs.com/docs/conceptual/building-with-components/#page-template-components) generate those pages dynamically, this is where you should query the data for a particular article.

Here is how I would set up my blog with a custom component and what my query would look like:

> <https://github.com/ancheetah/gatsby-starter-builder/blob/gatsby-blog/src/templates/BlogArticle.jsx>

---

<div class="post-metadata">

**Author:** ![shehan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shehan/32/1005_2.png) [@shehan](https://forum.builder.io/u/shehan)\
**Post date:** [March 9, 2022, 5:44pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/3 "2022-03-09T17:44:09Z")

</div>

Thank you for the response.

Yea actually what I wanted to do is create a custom component that would list down all blog articles(Page type model) dynamically.  
I was able to get the results. I was using the page query method. I had to use the component level query method in order to get the results. Now it looks like this

```auto
import React from 'react'
import { Builder } from '@builder.io/react'
import { graphql, useStaticQuery } from 'gatsby'

interface Props {
  backgroundColor: string;
}

const BlogLister = ({
  backgroundColor,
}: Props) => {
  const { allBuilderModels }: any = useStaticQuery(
    graphql`
      query {
        allBuilderModels {
          blogArticle {
            data {
              date
              title
              url
              description
              coverImage
              author
            }
          }
          author {
            data {
              authorName
              photo
            }
            id
          }
        }
      }
    `
  )

 return (
  // list of blog item components based on the above query result
 )
}

```

**New Issue**  
Now there is a new issue where even though I specify separate templates to each **Page** model that I have like this

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/ac679c8ae881bca784936dd85046eca7c45782dc.png)

whatever comes first on that object becomes the template for all **Page** model types. Its pretty weird.

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [March 9, 2022, 6:20pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/4 "2022-03-09T18:20:13Z")

</div>

@shehan glad you were able to figure it out! As for the new issue with your templates that is strange behavior but I’m not able to reproduce it on my end. If you share your public API key and the code for those page templates I can try to investigate further. Feel free to DM me if you prefer. Thanks!

---

<div class="post-metadata">

**Author:** ![shehan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shehan/32/1005_2.png) [@shehan](https://forum.builder.io/u/shehan)\
**Post date:** [March 12, 2022, 2:14pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/5 "2022-03-12T14:14:42Z")

</div>

@steve

More on the issue that I currently have.  
Its bit random sometimes when I create a page using a model type it uses the correct page template but on other times it messes it up.

It gives me a warning like this as I see now

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/633c0bfa378e7010a6b55d9ef53202d0f0e345f0.png)

This warning goes away as soon as I comment out the query inside this particular page template obviously.

Any idea what could be the issue here ?

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [March 15, 2022, 5:35pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/6 "2022-03-15T17:35:20Z")

</div>

Hey @shehan thank for sending over your API key and page templates. I am still not able to reproduce the behavior with the wrong template being used in your space. The correct template rendered despite the order in the plugin settings. Are you running `gatsby clean` each time before you run the dev server? If that doesn’t help could you please send a Github or Codesandbox that reproduces the issue?

---

<div class="post-metadata">

**Author:** ![shehan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shehan/32/1005_2.png) [@shehan](https://forum.builder.io/u/shehan)\
**Post date:** [March 22, 2022, 4:38pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/7 "2022-03-22T16:38:02Z")

</div>

@ancheetah yea I am running `clean` each time I start the server. So basically each time I restart the clean happens. Weird enough on different developer mentioned that he didn’t encounter this issue. But I keep getting it dont know the exact reason.

---

<div class="post-metadata">

**Author:** ![shehan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shehan/32/1005_2.png) [@shehan](https://forum.builder.io/u/shehan)\
**Post date:** [March 23, 2022, 4:18pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/8 "2022-03-23T16:18:23Z")

</div>

Hey I have created a repository here [github repo](https://github.com/shehan-mark/gatsby-builderio-blog-example) with an example gatsby application that reproduces this issue. Included config has the [builder.io](http://builder.io) key

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [March 29, 2022, 2:59am UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/10 "2022-03-29T02:59:53Z")

</div>

@shehan thanks so much for the Github repo. I noticed that for the space connected to that repo there was no published content for some models, just drafts. When I ran your Gatsby app, indeed the first template listed in the `gatsby-config.js` appeared to be the default rendered for all draft entries. However, if I publish an entry in each model then run the app, _I get the correct template for published content and the incorrect/“default” template for draft entries_.

This looks like it could be a bug with the gatsby plugin which prevents users from making edits to content in draft mode when multiple templates are required so I’ll report this to our engineering team. Can you confirm this is the same behavior you are experiencing?

---

<div class="post-metadata">

**Author:** ![shehan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shehan/32/1005_2.png) [@shehan](https://forum.builder.io/u/shehan)\
**Post date:** [March 29, 2022, 2:39pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/11 "2022-03-29T14:39:25Z")

</div>

Hey,

Yea it is bit random. Sometimes after many many server restarts it works as intended. Also the way you mentioned is another way to counter it.

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [April 1, 2022, 7:28pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/12 "2022-04-01T19:28:52Z")

</div>

Hey @shehan,

I’ve ticketed this in our system (reference number ENG-2447) and I’ll let you know when a fix is released. Hopefully fixing the drafts issue will resolve the inconsistent behavior you are also experiencing.

Best,  
AJ

---

<div class="post-metadata">

**Author:** ![shehan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shehan/32/1005_2.png) [@shehan](https://forum.builder.io/u/shehan)\
**Post date:** [April 2, 2022, 7:42am UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/13 "2022-04-02T07:42:26Z")

</div>

Hey,

Thank you for the update.

BR,  
Shehan

---

<div class="post-metadata">

**Author:** ![shehan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shehan/32/1005_2.png) [@shehan](https://forum.builder.io/u/shehan)\
**Post date:** [April 7, 2022, 6:14pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/14 "2022-04-07T18:14:25Z")

</div>

Hey any update on this?

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [April 11, 2022, 3:32pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/15 "2022-04-11T15:32:45Z")

</div>

Hi @shehan, thanks for your patience. Because Gatsby uses static site generation there are some limitations to the Builder Gatbsy plugin when using multiple page templates. You can take a look at this forum post for a detailed explanation and help on setting up previews.

> [@Configuring Multiple Page Models for Gatsby](https://forum.builder.io/t/configuring-multiple-page-models-for-gatsby/2020):
>
> Builder’s Gatsby [plugin](https://github.com/BuilderIO/builder/tree/main/packages/gatsby) main use case is to make data from Builder available in Gatsby’s graphql layer. It also offers a shortcut for creating pages from builder when you pass the templates map, but this support is limited to page models that do not share the same URL prefix, otherwise they’ll overwrite each others urls. Once you have more than one page template you’d also want to handle the preview area logic. This is done by overriding the 404 logic, since your publishers will need to work on …

---

<div class="post-metadata">

**Author:** ![shehan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/shehan/32/1005_2.png) [@shehan](https://forum.builder.io/u/shehan)\
**Post date:** [April 11, 2022, 7:12pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/16 "2022-04-11T19:12:04Z")

</div>

Thank you for the response. Yes I have created something similar to that to be used when serving the build and using the editor. Still the issue was there. But I did not see this `custom404Dev` option in the docs. I will give this a try.

I have a new issue though. When I serve a build version of my **gatsby/builder** application I am unable to render anything thats being added on the development serve before. I get just a blank white html page. This issue came after the new [Builder.IO](http://Builder.IO) UI update.I checked the query results all and it seems I do get the content object that I want. Again this issue only comes for the other page models than the default one given

We will need to go live soon. This is something that was working before and now it is not. It is really difficult to maintain our sites if these kind of things keeps happening.

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [April 19, 2022, 8:39pm UTC](https://forum.builder.io/t/creating-a-blog-with-gatsby/1872/17 "2022-04-19T20:39:42Z")

</div>

Hi @Shehan ! @ancheetah has been out this week so stepping in here to see if I can help…are you still having this issue?

Is the github repo shared above still good way to recreate the issue so we can investigate?