Home > Software engineering >  Gatsby-Source-Wordpress: Error when compiling. TypeError: Cannot destructure property 'fields&#
Gatsby-Source-Wordpress: Error when compiling. TypeError: Cannot destructure property 'fields&#

Time:12-01

When I go and try to run gatsby develop I get the following error:


TypeError: Cannot destructure property 'fields' of 'nodesType' as it is undefined.
    at generateNodeQueriesFromIngestibleFields (/Users/repoFolder/Work/gatsby/node_modules/gatsby-source-wordpress/src/steps/ingest-remote-schema/buil
d-queries-from-introspection/generate-queries-from-ingestable-types.js:155:13)
    at buildNodeQueries (/Users/repoFolder/Work/gatsby/node_modules/gatsby-source-wordpress/src/steps/ingest-remote-schema/build-queries-from-introspe
ction/build-node-queries.js:25:25)
    at runSteps (/Users/repoFolder/Work/gatsby/node_modules/gatsby-source-wordpress/src/utils/run-steps.ts:41:9)
    at runSteps (/Users/repoFolder/Work/gatsby/node_modules/gatsby-source-wordpress/src/utils/run-steps.ts:43:9)
    at ingestRemoteSchema (/Users/repoFolder/Work/gatsby/node_modules/gatsby-source-wordpress/src/steps/ingest-remote-schema/index.js:49:5)
    at runSteps (/Users/repoFolder/Work/gatsby/node_modules/gatsby-source-wordpress/src/utils/run-steps.ts:41:9)
    at runAPI (/Users/repoFolder/Work/gatsby/node_modules/gatsby/src/utils/api-runner-node.js:487:16)


 ERROR #gatsby-source-wordpress_112003 

 gatsby-source-wordpress 

        Encountered a critical error when running the buildNodeQueries build step.
        See above for more information.

not finished createSchemaCustomization - 3.831s
not finished [gatsby-source-wordpress] ingest WPGraphQL schema - 2.379s

I haven't made any changes, or upgraded packages and have since been working on other projects. I tried disabling the Related Posts plugin, as well as a few others in addition to upgrading the gatsby-source-wordpress plugin.

I am configuring the plugin like in my gatsby-config.js:

{
            resolve: "gatsby-source-wordpress",
            options: {
                url: `${process.env.WPGRAPHQL_URL}`,
                verbose: false,
                develop: {
                    hardCacheData: false,
                  },
                schema: {
                    perPage: 10, // currently set to 100
                    requestConcurrency: 3, // currently set to 15
                    previewRequestConcurrency: 1, // currently set to 5
                },
                type: {
                    Page: {
                        exclude: true,
                    },
                    Menu: {
                        exclude: true,
                    },
                    MenuItem: {
                        exclude: true,
                    },
                },
                debug: {
                    graphql: {
                      onlyReportCriticalErrors: true,
                    },
                },
                searchAndReplace: [
                    {
                        search: `${process.env.GATSBY_WORDPRESS_URL_PROTOCOL}://${process.env.GATSBY_WORDPRESS_URL_PATH}`,
                        replace: `${process.env.GATSBY_SITE_URL_PROTOCOL}://${process.env.GATSBY_SITE_URL_PATH}`,
                    },
                ],
                html: {
                    useGatsbyImage: true,
                },
            },
        },

and I am configuring the plugin / constructing the node ingatsby-node.jslike the following:

exports.createPages = async ({ graphql, actions, reporter }) => {
    const { createPage } = actions

    const BlogPostTemplate = path.resolve("./src/templates/BlogPost.tsx")
    const BlogTagPostsTemplate = path.resolve(
        "./src/templates/BlogTagPosts.tsx"
    )
    const BlogCategoryPostsTemplate = path.resolve(
        "./src/templates/BlogCategoryPosts.tsx"
    )

    const BlogPostsResult = await graphql(`
        {
            allWpPost {
                edges {
                    node {
                        id
                        slug
                        uri
                        link
                        title
                        excerpt
                        date(formatString: "MMMM DD, YYYY")
                        modified(formatString: "MMMM DD, YYYY")
                        author {
                            node {
                                avatar {
                                    url
                                }
                                id
                                name
                                uri
                                slug
                            }
                        }
                        featuredImage {
                            node {
                                localFile {
                                    childImageSharp {
                                        gatsbyImageData(
                                            width: 1920
                                            placeholder: BLURRED
                                            formats: [AUTO, WEBP, AVIF]
                                        )
                                    }
                                }
                            }
                        }
                        categories {
                            nodes {
                                id
                                count
                                name
                                slug
                            }
                        }
                        tags {
                            nodes {
                                id
                                count
                                name
                                slug
                            }
                        }
                    }
                }
            }
        }
    `)

    if (BlogPostsResult.errors) {
        reporter.panicOnBuild("Error while running GraphQL query.")
        return
    }

    const BlogPosts = BlogPostsResult.data.allWpPost.edges

    BlogPosts.forEach((post, index) => {
        const date = post.node.date
        createPage({
            path: `/${post.node.categories.nodes[0].slug}/${moment(date).format(
                "YYYY"
            )}/${moment(date).format("MM")}/${post.node.slug}.html`,
            component: BlogPostTemplate,
            context: {
                id: post.node.id,
                slug: post.node.slug,
                uri: post.node.uri,
                previous: index === 0 ? null : BlogPosts[index - 1].node,
                next:
                    index === BlogPosts.length - 1
                        ? null
                        : BlogPosts[index   1].node,
            },
        })
    })

    createPaginatedPages({
        edges: BlogPosts,
        createPage: createPage,
        pageTemplate: "src/templates/BlogPosts.tsx",
        pageLength: 10,
        pathPrefix: "blog",
    })

    const BlogTagPosts = new Map()
    const BlogCategoryPosts = new Map()

    BlogPosts.forEach((post) => {
        const tags = post.node.tags.nodes
        if (tags && tags.length > 0) {
            tags.forEach((tag) => {
                if (BlogTagPosts.has(tag.slug)) {
                    BlogTagPosts.set(tag.slug, [
                        ...BlogTagPosts.get(tag.slug),
                        post,
                    ])
                } else {
                    BlogTagPosts.set(tag.slug, [post])
                }
                if (BlogTagPosts.has(tag.title)) {
                    BlogTagPosts.set(tag.title, [
                        ...BlogTagPosts.get(tag.title),
                        post,
                    ])
                } else {
                    BlogTagPosts.set(tag.title, [post])
                }
            })
        }
        const categories = post.node.categories.nodes
        if (categories && categories.length > 0) {
            categories.forEach((category) => {
                if (BlogCategoryPosts.has(category.slug)) {
                    BlogCategoryPosts.set(category.slug, [
                        ...BlogCategoryPosts.get(category.slug),
                        post,
                    ])
                } else {
                    BlogCategoryPosts.set(category.slug, [post])
                }
                if (BlogCategoryPosts.has(category.title)) {
                    BlogCategoryPosts.set(category.title, [
                        ...BlogCategoryPosts.get(category.title),
                        post,
                    ])
                } else {
                    BlogCategoryPosts.set(category.title, [post])
                }
            })
        }
    })

    const BlogTagSlugs = [...BlogTagPosts.keys()]
    const BlogCategorySlugs = [...BlogCategoryPosts.keys()]
    //const BlogCategoryTitles = [...BlogCategoryPosts.keys()];

    if (BlogTagSlugs.length > 0) {
        BlogTagSlugs.forEach((BlogTagSlug) => {
            createPage({
                path: `/tag/${BlogTagSlug}`,
                component: BlogTagPostsTemplate,
                context: {
                    group: BlogTagPosts.get(BlogTagSlug),
                    slug: BlogTagSlug,
                    title: BlogTagPosts.get("tag.title"),
                },
            })
        })
    }

    if (BlogCategorySlugs.length > 0) {
        BlogCategorySlugs.forEach((BlogCategorySlug) => {
            createPage({
                path: `/category/${BlogCategorySlug}`,
                component: BlogCategoryPostsTemplate,
                context: {
                    group: BlogCategoryPosts.get(BlogCategorySlug),
                    slug: BlogCategorySlug,
                    title: BlogCategoryPosts.get("category.title"),
                },
            })
        })
    }
}

Where do I start?

I have tried upgrading packages, stripping out the config option in the config file, and deleting node_modules, package-lock.json and reinstalling the packages. I do run into errors when trying a normal npm i command, but that is fixed by adding the flag -legacy-peer-deps.

CodePudding user response:

I experienced this same error on WP Graphql version 1.13.4, rolling back to version 1.12.2 fixed it for now.

CodePudding user response:

Rolling back to version 1.12.2 fixed it for me as well, but in rolling back, my media library no longer displays all of the media items from the gatsby graphql plug-in. I had to re-upload the media items that were not displaying. I highly recommend backing up your site before rolling back.

  • Related