Hi there, I am not sure if this is the right place to do this but I am still having this error after following the quickstart instructions for gatsby as well.
Below is my page.jsx file:
It seems like it’s not reading the api key in the gatsby-config file though.
I can see the data in graphql, so it looks like gatsby can read the api key, just that one npm module is not able to read it?
import * as React from "react";
import { graphql } from "gatsby";
import { BuilderComponent } from "@builder.io/react";
// Your template populates your Gatsby pages with your Builder page content.
function PageTemplate({ data }) {
const models = data?.allBuilderModels;
const page = models.page?.content;
return <BuilderComponent name="page" content={page} />;
}
export default PageTemplate;
// pageQuery is a GraphQL query that
// fetches each page's content from Builder.
// Your content is rendered within the
// PageTemplate using BuilderComponent, provided by Builder's SDK.
export const pageQuery = graphql`
query ($path: String!) {
allBuilderModels {
onePage(target: { urlPath: $path }) {
content
}
}
}
`;
Deleting and installing npm modules didn’t work. It turns out data.allBuilderModels.page is actually an array, your example shows to access it as an object.
I’m pretty sure I followed your directions step by step in the quickstart so I’m not sure how I could have changed it to an array. I would suggest changing your quickstart guide.
This worked for me on the “page.tsx” file:
import * as React from "react";
import { graphql } from "gatsby";
import { BuilderComponent } from "@builder.io/react";
// Your template populates your Gatsby pages with your Builder page content.
function PageTemplate({ data }) {
const models = data?.allBuilderModels;
const page = models.page[0].content;
console.log(models, page);
return <BuilderComponent name="page" content={page} />;
}
export default PageTemplate;
// pageQuery is a GraphQL query that
// fetches each page's content from Builder.
// Your content is rendered within the
// PageTemplate using BuilderComponent, provided by Builder's SDK.
export const pageQuery = graphql`
query ($path: String!) {
allBuilderModels {
page(
target: { urlPath: $path }
options: { cachebust: true, includeRefs: true }
) {
content
}
}
}
`;
Actually that didn’t work. I had to add in builder.init with my api key on the page.tsx file I found that elsewhere on your site but I think it’d be helpful if it was in the quickstart guide.
Having the same issue, even if i use the code that was supplied from @lms I still have another error saying Cannot read properties of undefined (reading 'content')
This is my first time with builder following the docs exactly - im not impressed
Please make sure your docs are kept up to date properly @manish-sharma - under page settings i was given a totally different code to use in page.jsx (which also missed the react import’ and now everything works…
I have completely given up on Builder now, I finally got things working, but the documentation is so different in each area and confusing to fully understand clearly and simply
