Home App Docs Github

GraphQL query in Gatsby

Hi, I’m trying to integrate builder into a Gatsby site to render a page or a component into it. I’ve tried to make the code similar to the Gatsby example on Github. I can run the example in localhost and it works. But when I implement it into another Gatsby site I get the following error. The query fails for some reason I can’t figure out.

The site builds and I can access other pages and the GraphiQL. I can see the data i GraphiQL, but it is not integrated in the build.

hi @emelleby can you share the text of the page query from page.tsx?

import * as React from 'react';
import { graphql } from 'gatsby';
import { BuilderComponent, builder } from '@builder.io/react';
import { Helmet } from 'react-helmet';
import '@builder.io/widgets';
/**
 * Hero is an example of a custom component that you can use in the builder.io editor
 * https://www.builder.io/c/docs/custom-react-components
 * import '../components/Hero/Hero.builder';
 */

// TODO: enter your public API key - Done
builder.init('44b093e300534e7b9bfdfc34cb1189b5');

interface PageTemplateProps {
  data: { allBuilderModels: { page: { content: any }[] } };
}

const PageTemplate: React.SFC<PageTemplateProps> = ({ data }) => {
  const content = data.allBuilderModels.page[0]?.content;
  return (
<>
  <Helmet>
    <title>{content?.data.title}</title>
  </Helmet>

  <BuilderComponent content={content} />
</>
  );
};

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

As you can see it is the same as your example.

I am afraid I have missed some import or dependency. I have tried to triple check it all.

The query seems valid, there’s a chance it’s not getting the $path variable correctly,

I’ll double check the templates map here:

If all sounds correct, it’s worth checking if you have the latest plugin version: builder.io/gatsby@1.0.8

I have tried both the 1.0.7 alpha and the 1.0.8.

I suspect the path to, but I donæt understand why itæs working for the example and not here.

You can find all the code at github.

Thanks.

I was able to see the page with no errors by doing

rm -rf yarn.lock
yarn
yarn run start

Need to dig a bit more to see which package is causing the conflict, but the above should work.

OK. I’ll try.
The Gatsby site will build and I’ve been able to see the home page but not the builder.io pages @ /demo-page, /builder and /example

They have no data and come out blank.

I’ll feedback after I’ve tried this.

I got some other error now and nothing will build.

Exit code 7

I will try to redo everything step by step to see if I can figure it out.

After a fresh install of the Gasby starter I have got it working:-)

I don’t know what made it work but I switched to NPM from Yarn and I did

npm install path

And just the @builder.io dependencies.
I also got the latest versions of Gatsby and React.

It also seemed to be a problem with Gatsby itself and React. some sort of conflicting versions or what not.

rm -rf node-modules/
rm -rf package-lock.json
npm i
npm run start

Seems to be working now
Fingers crossed :slight_smile:

1 Like