Gatsby: Is there any support for using Relay within Gatsby?

[xtina-starr]

At Artsy in our component library we use Relay to power some of our components. I found that Gatsby is influenced by Relay and re-uses some of its tooling at build time, however, I’m wondering if it’s possible to re-use these Relay components within Gatsby as-is? I searched through the issues and googled a bit, but could not find the answer to this specific question.

[m-allanson]

I don't know enough about Relay to give you a definitive answer - but I think Gatsby's use of it is completely internal. For data-fetching from the client you'd need to set up Relay however you normally do it. I know a few folks have used Apollo with Gatsby, so there might be some useful references in the issues or the Gatsby Starters page.

To fetch your build-time data you could potentially write a Gatsby source plugin that makes use of your existing Relay config. I'm not exactly sure what that'd look like though.

@KyleAMathews might have more thoughts, although he's travelling this week so might not see this issue.

In summary - I don't know of anyone that's used Gatsby with components that already use Relay, but am interested to hear how you get on!

[orta]

I can confirm that it's possible to use relay with Gatsby, and with TypeScript etc - https://github.com/orta/peril-systems-gatsby includes an example or two, but isn't comprehensive (and is an experiment I decided to stop with once I figured out what I wanted )

[calcsam]

Thanks @orta -- closing this issue!

[AndrewIngram]

It's not as simple as it looks (and the example shared by @orta) doesn't appear to touch the challenging parts of the integration. The following is based on a cursory investigation, so I may have made some errors.

The core problem is that the Relay compiler and babel plugins both look for strings tagged with graphql. Gatsby has its own concept of page queries, and page filenames generally have to match the desired URLs. Meanwhile, Relay has a requirement that queries/fragments/mutations are all named after the module they're in. This brings us to problem number 1, the Relay compiler will complain about the format of most of Gatsby's use of GraphQL.

The second problem is a little simpler, which is that the Relay babel plugin will replace all of these tagged strings with references to generated files, which will break Gatsby -- because there are no longer any strings.

It might be possible to work around these issues, but so far it's not looking trivial.