Gatsby integration failed: API KEY is null

Bugs
1

Builder content link
e.g. Builder.io: Drag and drop Visual CMS

Detailed steps to reproduce the bug
follow the quickstart step-by-step

Screenshots or video link
*

Screen Shot 2566-02-02 at 20.00.41
Screen Shot 2566-02-02 at 20.00.411011×437 61.4 KB

Screen Shot 2566-02-02 at 20.01.18
Screen Shot 2566-02-02 at 20.01.181068×829 106 KB

Code stack you are integrating Builder with
Gatsby

Reproducible code example
here are my dependency
“dependencies”: {
“@builder.io/gatsby”: “^3.0.3”,
“@builder.io/react”: “^2.0.13”,
“@mdx-js/react”: “^2.2.1”,
“babel-plugin-styled-components”: “^2.0.7”,
“gatsby”: “^5.5.0”,
“gatsby-plugin-google-gtag”: “^5.5.0”,
“gatsby-plugin-image”: “^3.5.0”,
“gatsby-plugin-manifest”: “^5.5.0”,
“gatsby-plugin-mdx”: “^5.5.0”,
“gatsby-plugin-sharp”: “^5.5.0”,
“gatsby-plugin-styled-components”: “^6.5.0”,
“gatsby-source-filesystem”: “^5.5.0”,
“gatsby-transformer-sharp”: “^5.5.0”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“styled-components”: “^5.3.6”
}

2

Hi @sunncyn,

Welcome to the builder.io forum.

We are not able to reproduce this error, could you also help us with your page.jsx code?

3

Hi @sunncyn,

Just checking to see if this is still an issue for you?

4

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
      }
    }
  }
`;
5

Hi @lms,

Welcome to the builder.io forum.

We tried to reproduce this error following our quickstart guide but could not reproduce it.

Few troubleshooting steps you can try:

  1. Deleting the node_modules file and then run npm i command, or
  2. Try creating a new gatsby project following our quickstart guide again

If the above doesn’t help, then kindly share reproducible repo for us to look into this further. Thank you!

Screenshot 2023-02-21 at 6.11.59 PM
Screenshot 2023-02-21 at 6.11.59 PM2872×1554 487 KB

6

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
      }
    }
  }
`;
7

Thank you for your fast response though, I really appreciate it! We are looking for a new cms and I appreciate the timely response.

8

Hi @lms,

Glad that you were able to find the solution. We will share the feedback regarding the quickstart guide. Thank you!

9

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.

10

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

11

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…

@lms you need this code:

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

builder.init('your_api_key')

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

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

export default MyComponent;      

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

Hi @joebentaylor,

We really appreciate you bringing this to our attention, we will have the doc updated as soon as possible. Thank you!

13

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