Home App Docs Github

GraphQL query in Gatsby

Technical Questions
#1

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.

image
image935×568 12.6 KB

image
image651×534 24.3 KB

#2

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

#3 
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
  }
}
  }
`;
#4

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.

#5

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

#6

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.

#7

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.

#8

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.

#9

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.

#10

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