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.