Loading translations dynamically from REST API

[justintemps]

Here's what I'm trying to accomplish:

Rather than storing my translations in src/18n/locales/*.js, I need to get them from a third party REST API. I'm doing that via sourceNodes in /gatsby-node.js as per this example.

My difficulty is in getting the data from GraphQL to react-intl. Specifically, I can't manage to set messages in the withIntl component, since Gatsby only executes queries in page and layouts components and I was not able to export a fragment from withIntl that Gatsby could find.

I suspect that I cannot accomplish what I'm trying to do with this setup and will instead have to move some of the implementation in withIntl into a layout component that I can provide it with data from GraphQL.

However, before embarking down that road, I thought I'd see if anyone had a better idea.

Thanks very much @wiziple for the awesome starter.

[DigitalGoldfish]

In my humble opinion you are overthinking the problem doing it in the Gatsby way with GraphQL. I would
just download the translations from the REST API and store them in the /locales/*.js files. It should not be hard to do in gatsby-node.js before any of the pages are created.

[justintemps]

@DigitalGoldfish You are absolutely right. That's a much better solution.

In the end, I'm grabbing my translations from the REST API in gatsby-node.js using onPreBootstrap and saving them in the /locale/*.js files which is where they want to be. Works like a charm.

Thank you so much.