Home App Docs Blog Github

How to build dynamic resource pages with Builder and GatsbyJS

Sometimes we want to create the same page for all products (categories, shops or any resource), where you want all of those pages to match a specific design, by the end of the following steps you’ll have a builder section that acts as a template for your resource pages:

  • make a model in builder of type section , named for example resource-template
  • in gatsby-node.js query your API to get a list of the resources you want to generate pages for, and use createPage action from gatsby re-using the same template.
const path = require('path');

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  return queryAllResources.then(result => result.map( resource => {
      // create a page or multiple pages for each shop depending on your requirements
      createPage({
        path: `/resources/${resource.slug}`,
        component: path.resolve(`./src/templates/resource-page.jsx`),
        context: {
          // whatever you pass here will be available in resource-page context
          resource,
        },

    });
  }))
};

and in templates/resource-page.jsx you can query Builder for the section and render it

const ResourcePage = ({
  context: { resource },
  data: { allBuilderModels },
}) => {
  const content = allBuilderModels?.oneResourceTemplate?.content;
  // passing resource object to data prop allow builder users to bind dynamic values from `state.resource`
  return <BuilderComponent content={content} data={{ resource }} model="resource-template" />;
};

export default ResourcePage;

export const ResourcePageQuery = graphql`
  query resourcePage {
    allBuilderModels {
      oneResourceTemplate(
        options: { cachebust: true, noTraverse: false }
      ) {
        content
      }
    }

Now inside your builder content , you can template any element by binding to the state.resource