gatsby-plugin-react-i18next icon indicating copy to clipboard operation
gatsby-plugin-react-i18next copied to clipboard

`Sitepage.context` no longer available in Gatsby v4 in generating sitemap.xml

Open wilsonvolker opened this issue 2 years ago • 5 comments

As documented in Here, it said we should query the allSitePage and filter it with context schema.

 plugins: [
  {
    resolve: 'gatsby-plugin-sitemap',
    ... // skipped
      query: `
          {
            site {
              siteMetadata {
                siteUrl
              }
            }
            allSitePage(filter: {context: {i18n: {routed: {eq: false}}}}) {
              edges {
                node {
                  context {
                    i18n {
                      defaultLanguage
                      languages
                      originalPath
                    }
                  }
                  path
                }
              }
            }
          }
        `,
      ... // skipped
      }
    }
  }
];

However, as mentioned by Gatsby official: Field SitePage.context is no longer available in GraphQL queries (source). If we still try to use the existing codes to generate sitemap through gatsby-plugin-sitemap, we will result in the following error:

Error executing the GraphQL query inside gatsby-plugin-sitemap:
 Field "context" is not defined by type "SitePageFilterInput".



  GraphQLError: Field "context" is not defined by type "SitePageFilterInput".

, and

 ERROR 

Error executing the GraphQL query inside gatsby-plugin-sitemap:
 Cannot query field "context" on type "SitePage".



  GraphQLError: Cannot query field "context" on type "SitePage".
  

Although the Gatsby official said we could create Sitepage.context manually as a workaround, it does not seem to be a good practice in the long term. Would there be any suggestion fix that satisfies the long-term goal? Thanks.

wilsonvolker avatar Jul 13 '22 17:07 wilsonvolker

For those facing the same issue and wish to add back the context type as a quick workaround.

  1. Open/Create gatsby-node.js in your root directory. (<PROJECT_DIR>/gatsby-node.js)
  2. Add the following code in gatsby-node-js
/**
 * Workaround for missing sitePage.context:
 * Used for generating sitemap with `gatsby-plugin-react-i18next` and `gatsby-plugin-sitemap` plugins
 * https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/#field-sitepagecontext-is-no-longer-available-in-graphql-queries
 */
exports.createSchemaCustomization = ({ actions }) => {
    const { createTypes } = actions
    createTypes(`
    type SitePage implements Node {
      context: SitePageContext
    }
    type SitePageContext {
      i18n: i18nContext
    }
    type i18nContext {
        language: String,
        languages: [String],
        defaultLanguage: String,
        originalPath: String
        routed: Boolean
    }
  `)
}

wilsonvolker avatar Jul 13 '22 18:07 wilsonvolker

@wilsonvolker this is a great find, thanks!

This query works now, but still the sitemap config gives back this error. Have you encountered it too?

 Error: Page array from `query` wasn't found at `data.allSitePage.nodes`.
  Fix the custom query or provide a custom `resolvePages` function.
  https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/#api-reference

bebbi avatar Aug 17 '22 21:08 bebbi

Here's how I got the overall sitemap working again. I think the issue here is that people get stuck on the siteUrl error masking the real issue and don't easily reach the discussion here.

bebbi avatar Aug 18 '22 09:08 bebbi

@bebbi thank you so much! I went through the exact issues that you described and your solution worked! I don't understand why the official doc is not up to date. I just installed with all the latest versions.

ItSolGood avatar Oct 17 '22 18:10 ItSolGood

I totally agree, the documentation should be updated with this new setup from @bebbi! Thank you.

ailequal avatar Nov 01 '22 09:11 ailequal