Creating a Blog with Gatsby

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

And I have set a template like below for this model

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

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

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

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

Please let me know if im doing anything wrong here.

Thank in advance.

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 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:

1 Like

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

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

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

@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!

@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

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 ?

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?

@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.

Hey I have created a repository here github repo with an example gatsby application that reproduces this issue. Included config has the builder.io key

1 Like

@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?

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.

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

1 Like

Hey,

Thank you for the update.

BR,
Shehan

Hey any update on this?

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.

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 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.

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?