Builder’s Gatsby plugin main use case is to make data from Builder available in Gatsby’s graphql layer. It also offers a shortcut for creating pages from builder when you pass the templates map, but this support is limited to page models that do not share the same URL prefix, otherwise they’ll overwrite each others urls. Once you have more than one page template you’d also want to handle the preview area logic. This is done by overriding the 404 logic, since your publishers will need to work on new URLs that’s not included in the build.
You can do this by overriding the 404 page with your own, by defining src/pages/404.js , which will work when you do a full build. This should include a preview area for Builder content which will handle the previewing for unpublished content entries.
// Add this before trying to retun 404 Not Found page
// editing model is the name of the model being edited in builder
const model = builder.editingModel;
if (model === 'pageATemplate' ) {
return <PageATemplate />;
}
if (model === 'pageBTemplate' ) {
return <PageBTemplate />;
}
Tip:
Adding 404.js will only override the 404 on a full build. To see it while in development mode you’d want to override the custom 404 development page that Gatsby adds. Builder’s Gatsby plugin offers a convenient option custom404Dev for that.
{
resolve: '@builder.io/gatsby',
options: {
publicAPIKey: process.env.BUILDER_API_KEY,
/* to allow live preview editing on localhost*/
custom404Dev: path.resolve('./src/pages/404.js'),
templates: {
/* Render every `page` model as a new page using the /page.tsx template
/* based on the URL provided in Builder.io
*/
page: path.resolve('./src/templates/page.js'),
},
},
}