gatsby-plugin-intl | Gatsby plugin that turns your website | Search Engine Optimization library

I think your issue comes because you are not setting the resolveSiteUrl and, in this scenario, the siteUrl needs to be present. According to the docs:

I think the best solution to your question is Portals. You could easily do something like the following:

Why you are using client-only routes/wrapping everything inside the ?

I don't know what's the goal in your scenario to change the gatsby-node.js with:

First of all ,if you want your console.log to print once then inside the useEffect(present in Collections file) print your console.log. And if you want to see if your collection value is getting changed or not do it like this:

Remove your cache folder by running a gatsby clean.

I've downloaded it and it works perfectly as well as in gatsby develop and gatsby build.

Check the output path issue in:

Contentful DevRel here. 👋

There has been a breaking change in the gatsby-source-contentful in v4. It's now recommended to use raw. You can find more information in the changelog.

A recommended Gatsby query from the changelog:

They are exactly the same in terms of output but not in terms of performance and what they are. They are called stateful (class-based component) and stateless components (functional component).

Generally, if you only want to render a component, I would suggest a functional component since it has better performance and makes the code clear and more reusable, allowing you to atomize better the functionalities.

On the other hand, if you are using some programming pattern (BLoC, MVVM, etc) you may need to create classes to hold the business logic, what allows you to extend from each other.

• Class-based components make use of ES6 class and extend the Component class in React.

• Sometimes called "smart" or "stateful" components as they tend to implement logic and state.

• React lifecycle methods can be used inside class components (componentDidUpdate, componentDidMount, etc).

• You pass props down to class components and access them with this.props (this keyword).

• You need to bind/unbind events and functions.

• Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword.

• Contrary to the class-based component, these ones sometimes referred to as "dumb" or "stateless" components as they simply accept data and display them in some form; that is they are mainly responsible for rendering UI.

• React lifecycle methods (for example, componentDidMount) cannot be used in functional components. However, they allow you to use React Hooks (useState, useEffect, etc) which handles all the typical lifecycle benefits adding a cleaner, and reusable code.

• There is no render method used in functional components, the return of the function will handle it. Therefore, they mainly responsible for UI.

• Functional components can accept and use props.

• They have slightly better performance than class-based ones. But the most important thing in my opinion is that they are cleaner and much more reusable.

References:

• https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react/
• https://dev.to/danielleye/react-class-component-vs-function-component-with-hooks-13dg
• https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/
• https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541

Regarding your implementation, since gatsby-plugin-intl uses internal hooks (useIntl) the following code should work:

The fact that you're not getting a 404 page indicates that your page is being created correctly.

Is it possible the page is expecting some sort of props? In the tutorial you linked, it looks like they are passing an id prop. To pass such props you need to pass a context arg to createPage (eg. createPage({ component, path, context: { id })) ... but the code you provided doesn't have any.

Whatever the problem is, it seems likely that it's in contact-us.js, so you'll need to debug it.

gatsby-plugin-layout and gatsby-plugin-intl both make use of wrapPageElement API to create a wrapper.

Now the plugins in gatsby are executed from top down and hence you need to define gatsby-plugin-layout before gatsby-plugin-intl so that the IntlProvider provider used by gatsby-plugin-intl wraps the Layout component and it is being able to use the injectIntl HOC