tomekskuta / gatsby-starter-intl

Gatsby v2 i18n starter which makes static pages for every locale and detect your browsers lang.
https://gatsby-starter-intl.tomekskuta.pl/
MIT License
11 stars 1 forks source link

calling page context on page component #3

Open abdokouta opened 4 years ago

abdokouta commented 4 years ago

Hello, i'm trying to call page contex on class Page extends React.Component to pass it to graphql query pram so any idea how can I call it? here is the page code structure, I have created a new key called queryPrefix to add a custom key to query upon chosen lang which is mean if the language is en the queryPrefix will be en_SA so like this : { locale: 'en', urlPrefix: 'en-saudi', queryPrefix: 'en_SA', label: 'English', default: true }, and here is page code: `import { graphql } from "gatsby" import idx from "idx" import ReactGA from "react-ga" import config from "~config/index" import SEO from "~components/Base/SEO" import ProductDetail from "~components/Product/ProductDetails" import ProductTabs from "~components/Product/ProductTabs" import RelatedProducts from "~components/Product/RelatedProducts" import ImageGallery from "~components/Product/ImageGallery" import LazyLoadComponent from "~components/Base/LazyLoad/Component"

export default class Page extends React.Component { componentDidMount() { const { allMagentoProduct: product } = this.props.data ReactGA.pageview(/${product.url_key}) }

render() { sdsdsd } }

export const productQuery = graphql` query ProductByURLKey($URLKey: String!, $queryPrefix: String!) {

}`

tomekskuta commented 4 years ago

Hey @abdokouta, Thank you for the message. I hope you found the right solution. If not i think the best way to solve your problem is to use createPages method inside gatsby-node.js:

https://www.gatsbyjs.org/docs/node-apis/#createPages https://www.gatsbyjs.org/docs/creating-and-modifying-pages/

You can create template as a react component (in another place then pages/ because Gatsby creates new site automatically) and pass props to it from graphql query called in the createPages method. Gatsby documentation says we can't use dynamic params inside staticQueries (also component and hook) but we can do it in gatsby-node.js. I'm not sure you can call your query automatically for every language (for example languages.forEach or for loop) but if not then you have to pass as much params and call as much queries as you have langs in your project. Then you can create page with createPage action and pass your graphql data as a context.