Gatsby integration failed: API KEY is null

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
*


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”
}

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?

Hi @sunncyn,

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

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

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!

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

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

Hi @lms,

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

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…

@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

Hi @joebentaylor,

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

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