Skip to content
Branch: master
Find file History

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
.eslintrc
.gitignore
.prettierrc
LICENSE
README.md
gatsby-config.js
package-lock.json
package.json
tsconfig.json

README.md

Using Builder.io with Gatsby

A demo for integrating Builder.io with Gatsby using our GraphQL API and our @builder.io/gatsby plugin

This demo demonstrates creating dynamic pages in Builder.io on new URLs and generating them with Gatsby, as well as rendering specific parts of your site with Builder.io content via GraphQL queries (e.g. for pages, components, etc)

See:

🚀 Quick start

  1. Sign up for Builder.io Then replace the demo API key in gatsby-config.js with your public API key, which you can find in builder.io/account/organization

  2. Clone this demo.

    git clone git@github.com:BuilderIO/builder.git
    cd builder/examples/gatsby
    npm install
    npm run dev
  3. Connect Builder.io to your localhost Now that you have the development server running on localhost, point the Builder.io entry to it by assigning the preview URL to be http://localhost:3000

Screen Shot 2020-02-18 at 9 48 51 AM

When you deploy this to a live or staging environment, you can change the preview URL for your model globally from builder.io/models (see more about models here and preview urls here)

This example create pages dynamically based on the url you add to your entries on Builder.io, if you want to create a page manually, do not include the model in your tempaltes config as above, add a file under the pages folder and query all the entries your page needs from Builder.io, for example:

import React from 'react';
import { graphql } from 'gatsby';
import { BuilderComponent } from '@builder.io/react';


export default class ExamplePage extends React.Component<any> {
  render() {
    const { header, page } = this.props.data.allBuilderModels;
    return (
      <div>
        {/* next line assumes you have a header model in builder.io, alternatively you use your own <Header /> component here */}
        <BuilderComponent model="header" content={header[0].content} />
        {/* Render other things in your code as you choose */}
        <BuilderComponent model="page" content={page[0].content} />
      </div>
    );
  }
}

// See https://builder.io/c/docs/graphql-api for more info on our
// GraphQL API and our explorer
export const pageQuery = graphql`
  query {
    allBuilderModels {
      # (optional) custom "header" component model
      header(limit: 1, options: { cachebust: true }) {
        content
      }
      # Manually grab the example content matching "/"
      # For Gatsby content, we always want to make sure we are getting fresh content
      example(limit: 1, target: { urlPath: "/" }, options: { cachebust: true }) {
        content
      }
    }
  }
`;
You can’t perform that action at this time.