Installing builder.io in allready gatsby app

Hi,
After installing @builder.io/gatsby into a web app using Gatsby I’m getting errors:

Cannot read property ‘allBuilderModels’ of undefined

153 | const component = config.templates[modelName];
154 | invariant(fs.existsSync(component), @builder.io/gatsby requires a valid template path for each model);

155 | let entries = result.data[config.fieldName][modelName];
| ^
156 | offsets[index] = offsets[index] + entries.length;
157 |
158 | if (entries.length === config.limit) {

File: node_modules/@builder.io/gatsby/gatsby-node.js:155:30

TypeError: Cannot read property ‘allBuilderModels’ of undefined

  • gatsby-node.js:155 createPagesAsync
    [holystones]/[@builder.io]/gatsby/gatsby-node.js:155:30

  • gatsby-node.js:135 Object.exports.createPages
    [holystones]/[@builder.io]/gatsby/gatsby-node.js:135:5

  • api-runner-node.js:481 runAPI
    [holystones]/[gatsby]/src/utils/api-runner-node.js:481:16

info Total nodes: 213, SitePage nodes: 11 (use --verbose for breakdown)
failed createPages - 0.146s

Gatsby-config.js
{
resolve: ‘@builder.io/gatsby’,
options: {
publicAPIKey: process.env.publicAPIKey,
templates: {
MyPage: path.resolve(‘src/templates/MyPage.jsx’)
},
},
},

MyPage.jsx

import React from ‘react’
import { builder, BuilderComponent } from ‘@builder.io/gatsby’
import { graphql } from ‘gatsby’

builder.init(‘6ee7e23aed774a3093b12f1696b8f6ad’)

function MyPage (props) {
console.log(props.data)
const content = props.data?.allBuilderModels.MyPage[0]?.content;

return
}

export const query = graphql query($path: String!) { allBuilderModels { page( target: { urlPath: $path } limit: 1 options: { cachebust: true } ) { content } } }
export default MyPage

How to resolve it?

Thanks

This error message indicates that the path to your template is invalid and it couldn’t find the template file, double check that a files exists at the specified path (src/templates/MyPage.jsx ).

Read more here for resources on Builder + Gatsby.

success open and validate gatsby-configs - 0.148s
success load plugins - 0.359s
success onPreInit - 0.086s
success delete html and css files from previous builds - 0.011s
success initialize cache - 0.021s
success copy gatsby files - 0.163s
success onPreBootstrap - 0.040s
success createSchemaCustomization - 0.015s
success Checking for changed pages - 0.005s
success source and transform nodes - 3.702s
success building schema - 0.671s

ERROR #85923 GRAPHQL

There was an error in your GraphQL query:

Cannot query field “landingPage” on type “builder”.

If you don’t expect “landingPage” to exist on the type “builder” it is most likely a typo.
However, if you expect “landingPage” to exist there are a couple of solutions to common problems:

  • If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
  • The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
  • You want to optionally use your field “landingPage” and right now it is not used anywhere. Therefore Gatsby can’t infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field (“dummy content”)

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don’t have to add the mentioned “dummy content”. Visit our docs to learn how you can define the schema for “builder”:
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: node_modules/@builder.io/gatsby/gatsby-node.js:140:24

not finished createPages - 0.228s

Thanks.

Hi @Voyager this error means that you don’t have model named landingPage in your builder space, you can create one on the models page.

Hi Aziz

I’ve tried all name combination

Thanks

In the screenshot I don’t see a model named landingPage , I see a page model, maybe you meant to use that instead?