Gatsby Plugin page creator with graphql query

[samjeffress]

Hi all 👋 ,

I'd like to know if it's possible to build a template / plugin for creating pages that includes page queries (not static queries)

We're using contentful to allow users to create their own pages in multiple parts of our site - we have multiple gatsby apps that are responsible for different parts of the site.

We wanted to build a plugin that each app could configure to handle queries and rendering of pages within the app This is how we're adding the plugin to gatsby-config.js of an app:

  {
      resolve: "@mycompany/gatsby-plugin-page-builder",
      options: {
        pathRegex: new RegExp("/my-site/")
      }
    }

The issue we're getting is:

warn The GraphQL query in the non-page component "/packages/libs/gatsby-plugin-page-builder/src/page-builder.tsx" will not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

The gatsby-node.js part of the plugin is responsible for querying for the content id's

import type { CreatePagesArgs, PluginOptions } from "gatsby"

import path from "path"

interface BasicQueryResult {
  node: {
    path: string
    id: string
  }
}
interface ContentfulPageBuilderResponse {
  data: {
    allContentfulPageBuilder: {
      edges: Array<BasicQueryResult>
    }
  }
}

interface PageBuilderPluginOptions extends PluginOptions {
  pathRegex?: RegExp
}

export const createPages = async (
  { graphql, actions }: CreatePagesArgs,
  pluginOptions: PageBuilderPluginOptions
) => {
  try {
    const { pathRegex } = pluginOptions
    if (!pathRegex) {
      return Promise.reject(
        new Error(
          "pathRegex is required for page builder so we can understand which pages to build in each app"
        )
      )
    }
    const { createPage } = actions
    const pageBuilderTemplate = path.resolve(
      path.join(__dirname, "page-builder.tsx")
    )

    const result = (await graphql(`
      {
        allContentfulPageBuilder(
          filter: { path: { regex: ${pathRegex.toString()} } }
        ) {
          edges {
            node {
              path
              id
              
            }
          }
        }
      }
    `)) as ContentfulPageBuilderResponse
    result.data?.allContentfulPageBuilder.edges.forEach(({ node }) => {
      createPage({
        path: (node.path),
        component: pageBuilderTemplate,
        context: {
          id: node.id
        }
      })
    })
    return Promise.resolve()
  } catch (error) {
    return Promise.reject(error)
  }
}

And the jsx template

import { ContentfulPage } from "@mycompany/react-components"
import { PageProps, graphql } from "gatsby"
import React from "react"
import { contentTypes } from "@mycompany/gatsby-common"

interface PageBuildPageProps {
  site: contentTypes.Site
  pageBuilder: contentTypes.PageBuilder
}

const ContentfulPageBuilder = ({
  data: { pageBuilder, site }
}: PageProps<PageBuildPageProps>) => {
  const { path, metadata, theme } = pageBuilder
  return (
    <ContentfulPage
      hideContactDetails={false}
      hideUsefulLinks={false}
      path={path}
      theme={theme}
      seoMetadata={metadata}
      siteMetadata={site.siteMetadata}
      header={{ showNav: true }}
      sections={[]}
      }
    />
  )
}

export default ContentfulPageBuilder

export const query = graphql`
  query ($id: String) {
    site {
      siteMetadata {
        title
        siteUrl
      }
    }
    pageBuilder: contentfulPageBuilder(id: { eq: $id }) {
      ...ContentfulPageBuilderFragment
    }
  }
`

We're currently running Gatsby 4

Thanks