Integrate builder.io with Gatsby

Technical Questions
1

Im trying to integrate builder.io in my existing gatsby app.

We use storyblok to create all our old pages (inside gatsby-node) and decided to use builder.io for all our new pages.

Im getting erros:

“@builder.io/gatsby” threw an error while running the createSchemaCustomization lifecycle:

Failed to load query batch:

Names must match /[1][_a-zA-Z0-9]$/ but “0” does not.
Names must match /[2][_a-zA-Z0-9]$/ but “1” does not.
Names must match /[3][_a-zA-Z0-9]$/ but “2” does not.
Names must match /[4][_a-zA-Z0-9]$/ but “3” does not.
Names must match /[5][_a-zA-Z0-9]$/ but “4” does not.
Names must match /[6][_a-zA-Z0-9]$/ but “5” does not.
Names must match /[7][_a-zA-Z0-9]$/ but “6” does not.
Names must match /[8][_a-zA-Z0-9]$/ but “7” does not.
Names must match /[9][_a-zA-Z0-9]$/ but “8” does not.
Names must match /[10][_a-zA-Z0-9]$/ but “9” does not.
Names must match /[11][_a-zA-Z0-9]*$/ but “10” does not.

There was an error in your GraphQL query:

Cannot query field “allBuilderModels” on type “Query”.

How to resolve it?

Thanks

  1. _a-zA-Z ↩︎

  2. _a-zA-Z ↩︎

  3. _a-zA-Z ↩︎

  4. _a-zA-Z ↩︎

  5. _a-zA-Z ↩︎

  6. _a-zA-Z ↩︎

  7. _a-zA-Z ↩︎

  8. _a-zA-Z ↩︎

  9. _a-zA-Z ↩︎

  10. _a-zA-Z ↩︎

  11. _a-zA-Z ↩︎

2

Hi @yuval222,

Can you tell us how you have integrated builder with gatsby, also if you could share the code for PageLayout would be much appreciated? thank you!

3

Hey @manish-sharma,

Thank you for the quick response.

Ive integrate builder by the following steps:

  1. Installed builder plugin for Gatsby and the react sdk.
  2. Inside my Gatsby-config under plugins add the following:
{
      resolve: '@builder.io/gatsby',
      options: {
        publicAPIKey: API_KEY,
        templates: {
          page: path.resolve('src/templates/page.jsx'),
        },
      },
    },
  1. under templates folder created a page file:
const PageTemplate = ({ data }) => {
  const models = data?.allBuilderModels;
  const page = models.page?.content;

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

export default PageTemplate;

export const pageQuery = graphql`
  query($path: String!) {
    allBuilderModels {
      onePage(target: { urlPath: $path }) {
        content
      }
    }
  }
`;

In the Builder platform, I created a page model and a test-page…

4

Hi @yuval222,

export const pageQuery = graphql`
  query($path: String!) {
    allBuilderModels {
      one-page(
        target: { urlPath: $path }
        options: { cachebust: true, includeRefs: true }
      ) {
        content
      }
    }
  }
`;

My guess is with the model name onePage, which doesn’t look like the standard name that the builder uses, that could be one-page if you could please reconfirm that. Thank you!

If the above doesn’t work then could you please help us with the builder content link?

Screenshot 2023-01-10 at 7.56.24 PM
Screenshot 2023-01-10 at 7.56.24 PM2878×1512 311 KB

5

Hey @manish-sharma

Builder content link

6

Hi @yuval222,

I don’t see any model with the name onePage, there are 3 models currently i.e., page, symbols and landing-page on your builder space. Can you please check your graphql query again?

7

@manish-sharma you right.

ive change it back to page and updated our query as following:

export const pageQuery = graphql`
  query($path: String!) {
    allBuilderModels {
      page(target: { urlPath: $path }, options: { cachebust: true, includeRefs: true }) {
        content
      }
    }
  }
`;

It’s still not working

8

Hi @yuval222,

Can you tell us what is the error are you getting now?

9

Hi @manish-sharma

As before, there are the same errors.

10

Hi @yuval222,

To me it seems to be integration issue which is difficult to debug, I recommend you check out our gatsby starter for reference