skip to Main Content

I am trying to create posts & pages programmatically using GatsbyJS createPages API. In order to do this am I using gatsby-source-wordpress and the WPGraphQL plugin. All this is done from gatsby-node.

I have tried editing the names of my templates and creating other template paths etc. but nothing seems to work. Any clues on what I am missing?

My code in gatsby-node:

//Create Posts
exports.createPages = async ({ actions, graphql, reporter }) => {
  const result = await graphql(`
    {
      allWpPost {
        nodes {
          __typename
          id
          databaseId
          uri
        }
      }
    }
  `)

  if (result.errors) {
    reporter.error("There was an error fetching posts", result.errors)
  }

  const { allWpPost } = result.data

  const template = require.resolve(`./src/templates/WpPost.js`)

  if (allWpPost.nodes.length) {
    allWpPost.nodes.map(post => {
      actions.createPage({
        path: post.uri,
        component: template,
        context: post,
      })
    })
  }
}

//Create Pages
exports.createPages = async ({ actions, graphql, reporter }) => {
  const result = await graphql(`
    {
      allWpPage {
        nodes {
          __typename
          id
          databaseId
          uri
        }
      }
    }
  `)

  if (result.errors) {
    reporter.error("There was an error fetching pages", result.errors)
  }

  const { allWpPage } = result.data

  const template = require.resolve(`./src/templates/WpPage.js`)

  if (allWpPage.nodes.length) {
    allWpPage.nodes.map(page => {
      actions.createPage({
        path: page.uri,
        component: template,
        context: page,
      })
    })
  }
}

My pages are being created succesfully, but my post creation doesn’t seem to work at all. I see an error in my terminal:

The GraphQL query in the non-page component
"C:/Users/mig/Desktop/Gatsby/gsite/src/templates/WpPost.js" 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.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)   
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — https://graphql.org/learn/queries/#fragments

2

Answers


  1. Chosen as BEST ANSWER

    as mentioned by @natac in comments I had to create pages and post in the same exports.createPages function.

    Updated Gatsby-node that solved issue:

    exports.createPages = async ({ actions, graphql, reporter }) => {
      const result = await graphql(`
        {
          allWpPage {
            nodes {
              __typename
              id
              databaseId
              uri
            }
          }
        }
      `)
      if (result.errors) {
        reporter.error("There was an error fetching pages", result.errors)
      }
      const { allWpPage } = result.data
      const pageTemplate = require.resolve(`./src/templates/WpPage.js`)
      if (allWpPage.nodes.length) {
        allWpPage.nodes.map(page => {
          actions.createPage({
            path: page.uri,
            component: pageTemplate,
            context: page,
          })
        })
      }
      const result2 = await graphql(`
        {
          allWpPost {
            nodes {
              __typename
              id
              databaseId
              uri
            }
          }
        }
      `)
      if (result2.errors) {
        reporter.error("There was an error fetching posts", result.errors)
      }
      const { allWpPost } = result2.data
      const postTemplate = require.resolve(`./src/templates/WpPost.js`)
      if (allWpPost.nodes.length) {
        allWpPost.nodes.map(post => {
          actions.createPage({
            path: post.uri,
            component: postTemplate,
            context: post,
          })
        })
      }
    }
    

  2. It must work:

     exports.createPages = async ({ actions, graphql, reporter }) => {
      const result = await graphql(`
        {allWpPage {
            nodes {__typename id databaseId uri}}}`)
      if (result.errors) {
        reporter.error("There was an error fetching pages", result.errors)
      }
      const { allWpPage } = result.data
      const pageTemplate = require.resolve(`./src/templates/WpPage.js`)
      if (allWpPage.nodes.length) {allWpPage.nodes.map(page => {actions.createPage({path: page.uri,component: pageTemplate,context: page,})})}
      const result2 = await graphql(`{allWpPost {nodes {__typename id databaseId uri}}}`)
      if (result2.errors) {
        reporter.error("There was an error fetching posts", result.errors)
      }
      const { allWpPost } = result2.data
      const postTemplate = require.resolve(`./src/templates/WpPost.js`)
      if (allWpPost.nodes.length) {allWpPost.nodes.map(post => {actions.createPage({path: post.uri,component: postTemplate, context: post,})})}}
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search