CODEWITHSUNDEEP
javascriptgraphqlgatsby
Aaron Kessler
Aaron Kessler

Reputation: 41

Gatby console warning There are conflicting field types in your data.' when using createPage twice on the same query

I've made an query with createPages and using the result.data with createPage twice:

  1. for each page node
  2. for listpages which contains multiple excerpts per page, build out of the page nodes.

Now I'm getting a warning that says,

warn There are conflicting field types in your data. If you have explicitly defined a type for those fields, you can safely ignore this warning message. Otherwise, Gatsby will omit those fields from the GraphQL schema.

So, my question is,

This is my stripped down gatby-node.js file

const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)

// Gatsby API “createPages”.
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const result = await graphql(`
    {
      allWordpressPost {
        edges {
          node {
            id
            path
            status
            template
            format
            title
            content
            excerpt
            date
          }
        }
      }
    }
  `)

  // Check for any errors
  if (result.errors) {
    throw new Error(result.errors)
  }

  // Access query results via object destructuring
  const { allWordpressPost } = result.data

  // create pages for each post node.
  const postTemplate = path.resolve(`./src/templates/Post.js`)
  allWordpressPost.edges.forEach(edge => {
    createPage({
      path: `/post${edge.node.path}`,
      component: slash(postTemplate),
      context: { data: edge.node },
    })
  })

  //create summary pages for post nodes.
  const blogTemplate = path.resolve(`./src/templates/Blog.js`)
  const posts = allWordpressPost.edges //All posts
  const postPerPage = 3 //Post excerpts per page
  const pages = Math.ceil(posts.length / postPerPage) // Number of pages needed
  Array.from({ length: pages }).forEach((edge, index) => {
    createPage({
      path: index === 0 ? "/blog/" : `/blog/${index + 1}`, //route based on index
      component: slash(blogTemplate),
      context: {
        data: posts.slice(
          index * postPerPage,
          index * postPerPage + postPerPage
        ),
        pages,
        currentPage: index + 1,
      },
    })
  })
}

Upvotes: 3

Views: 693

Answers (1)

Aaron Kessler
Aaron Kessler

Reputation: 41

I solved it. I used the same key (data: posts.slice( //...) on both context objects (blog posts and the paginated blog summary) and changed one to something different (content: posts.slice( //...).

Upvotes: 1

Related Questions