Bundling Relay fragments with packages published to NPM

[willruggiano]

I've been searching all over for mentions of doing something like this but alas have not been able to find much of anything.

The idea is very simple. I have a package that contains some React components that internally use Relay. This package is published to NPM as its own library. I have another package that consumes the library as a dependency and uses the provided components as building blocks for a larger application. However, when I include a fragment defined in the library package in a query defined in the application package relay-compiler emits an error indicating that the included fragment is "undefined"... presumably it cannot locate this "third party" fragment.

Is something like this possible?

[sibelius]

it is possible, just include this path in your relay config

[willruggiano]

"include" it... how? Use a multi-project config? In which case is it a normal source or a generatedSource?

[striedinger]

We recently attempted this and the only way we got it to work was to run your code transpilation thru the relay plugin (babel or swc). Just make sure the consuming app uses the same compiler config and environment setup.

[willruggiano]

Yeah, we ended up opting for a slightly different dx: "install" the component and provider code directly into the app via cli. Stole that idea for @shadcn/ui :)

I don't know what it was, maybe how I was bundling the shared library... but I could not get the relay-compiler to find the files. I tried several different relay configs; multi-project, generatedSources, etc etc to no avail lol