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
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:
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
@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!
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.
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.
@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?
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.
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.