How to build dynamic resource pages with Builder and GatsbyJS

Technical Questions
1

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

1 Like