Unable to get pre-view url to work for Gatsby Integration

Visual Editor Help
, ,
1

Builder content link

Builder public api key
b7d943aa11124b3c97115ee1bf0aa52a

Gatsby Builder.Io Integration
I am unable to get the pre-view link to properly load in edit mode or live mode when building the production ready files to serve with Gatsbyjs. I have already followed all the basic from the docs here Getting the Preview URL Working - Builder.io and here Editing an Previewing Your Site - Builder.io. When I check http://localhost:8000/___graphql all the built pages using a graphQL query the test page from builder does not show up.

I followed the steps toggled Reload preview on URL path change to the off position and edited the 404.js.

In the browser console it shows that it is a 404, the page is blank, but I am able to make changes in the editor when the dev server is running (gatby develop).

Pictures

builder-io03

builder-io04
builder-io04851×543 56.6 KB

builder-io05
builder-io05839×525 41.5 KB

builder-ediotr
builder-ediotr1142×341 11.9 KB

Code stack you are integrating Builder with
@Gatsby/5.12.9
“@builder.io/gatsby”: “^3.0.3”,
“@builder.io/react”: “^3.0.14”,

Gatsby-config.js

{
      resolve: '@builder.io/gatsby',
      options: {
        // Replace with your Public API Key
        publicAPIKey: "b7d943aa11124b3c97115ee1bf0aa52a",
        useCache: false,
        templates: {
          // Render every `page` model as a new page using the
          // src/templates/page.jsx template based on the URL provided in Builder.io
          page: path.resolve('src/templates/page.jsx'),
        } 
      }
    },

page.jsx

import * as React from 'react';
import { builder, BuilderComponent } from '@builder.io/react'
import { graphql } from 'gatsby'

builder.init('b7d943aa11124b3c97115ee1bf0aa52a')

const MyComponent = (props) => {
  const content = props.data?.allBuilderModels.oneMastercraft?.content;

  return <BuilderComponent
    content={content}
    model="mastercraft" />
}

export default MyComponent;      

export const query = graphql`
  query($path: String!) {
    allBuilderModels {
      oneMastercraft(
        target: { urlPath: $path }
        options: { cachebust: true }
      ) { content }
    }
  }
`

404.js

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"
import { Builder, BuilderComponent } from '@builder.io/react';

const NotFoundPage = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata.title
  if (Builder.isPreviewing || Builder.isEditing) {
    return <BuilderComponent model="mastercraft" />
  }

  return (
    <Layout location={location} title={siteTitle}>
      <Seo title="404: Not Found" />
      <h1>404: Not Found</h1>
      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
    </Layout>
  )
}

export default NotFoundPage

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`
2

Hi there,

I think the issue is stemming from your gatsby-config file. Currently its set up to render the default ‘page’ model, however you are using a custom page model called ‘mastercraft’ which isn’t configured in the gatsby-config. Try changing the plugin configuration options.templates.page to options.templates.mastercraft


 {
      resolve: '@builder.io/gatsby',
      options: {
        publicAPIKey: "b7d943aa11124b3c97115ee1bf0aa52a",
        useCache: false,
        custom404Dev: path.resolve('src/pages/404.jsx'),
        templates: {
          // Render every `mastercraft` model as a new page using the
          // src/templates/page.jsx template based on the URL provided in Builder.io
          mastercraft: path.resolve('src/templates/page.jsx'),
        } 
      }
},
1 Like
3

I missed that, thanks!

1 Like