microapps / gatsby-plugin-react-i18next

Easily translate your Gatsby website into multiple languages
MIT License
122 stars 72 forks source link

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

Open wilsonvolker opened 2 years ago

wilsonvolker commented 2 years ago

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 commented 2 years ago

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
    }
    `)
    }
bebbi commented 2 years ago

@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 commented 2 years ago

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.

ItSolGood commented 2 years ago

@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.

ailequal commented 2 years ago

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