Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question on usage of wrapPageElement #10688

Closed
adamhammes opened this issue Dec 27, 2018 · 2 comments
Closed

Question on usage of wrapPageElement #10688

adamhammes opened this issue Dec 27, 2018 · 2 comments

Comments

@adamhammes
Copy link
Contributor

@adamhammes adamhammes commented Dec 27, 2018

Hi! Thank you for your work on Gatsby and taking the time to respond to my question. Sorry for not following the issue template - it didn't make a lot of sense to me in the context of asking a question.

I have a Gatsby site where I programmatically generate pages with urls such as

/fr/index.html
/en/index.html
/fr/apartments.html
/en/apartments.html
...

That is, every page starts with fr or en. I would like to use the React context API to detect the language based on the page url and provide the locale (language, messages, date functions etc.) to all the child components automatically.

Would wrapPageElement be the appropriate hook to introduce this Locale.Provider component? I wouldn't even be asking the question except for this snippet in the wrapPageElement docs:

This is useful for setting wrapper component around pages that won’t get unmounted on page change. For setting Provider components use wrapRootElement.

which confused me (what does "get unmounted on page change" mean?).

I had thought about using the wrapRootElement API but it's not obvious that I would be able to read the current url using that hook.

Thank you for your time!

@sidharthachatterjee

This comment has been minimized.

Copy link
Member

@sidharthachatterjee sidharthachatterjee commented Dec 28, 2018

Thank you for opening this @adamhammes

Yes, you can use the wrapPageElement for this. wrapRootElement lets you set the root React Element in the entire tree and makes sense to set Providers like Apollo, Redux etc

In your case, using wrapRootElement won't work because the router will be rendered within it and therefore you won't be able to access location

@adamhammes

This comment has been minimized.

Copy link
Contributor Author

@adamhammes adamhammes commented Dec 31, 2018

Thanks Sidhartha !

@adamhammes adamhammes closed this Dec 31, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.