Relay: "Ideal" code splitting with Relay

[taion]

I don't know if this is the right place for this.

One thing that seems difficult – as in I can't figure out how to do it – right now is doing code splitting in an ideal way with Relay.

Typically code splitting happens along module boundaries. However, ideally it would be good to load data from a remote API server concurrently with loading the JS code for "dumb" components.

However, there isn't really a straightforward way to get this working with e.g. System.import with Relay because the data requirements are colocated.

To be more concrete, I think what I want to do is to not split out the queries and fragments, and instead only split out the actual React components. Doing this would be tricky, though – maybe something to stub out the actual components and only keep the Relay container definitions?

[rterysen-openroad]

Do you mean the concept similar to a styleguide? Ability to pull in react components to only behave as the view and have no knowlegde of relay or have to care about data outside there props?

[taion]

The opposite, actually – I think I want to be able to _just_ pull in the code that defines the data dependencies for a component (and its children), while code splitting away the actual rendering code for those components (via e.g. System.import), so I can concurrently load the data and the rendering code.

[josephsavona]

If I understand correctly the use case is as follows: given that you're about to transition to some view, download all the data and code necessary to render it.

In current Relay one option to support this is as you described. Download just enough code to construct the query, then fetch the query and the remaining code in parallel. This could work, and it's likely possible to implement this via a custom build script.

Our goal is to support a different and hopefully more efficient alternative: fetching both the data and code in parallel. This requires knowing statically what query a view will send. We're working on an update to Relay core that is able to extract Relay queries at build time. This would allow higher-level tools to associate a specific query with a route, for example, and know what data to fetch without downloading any code. We'll discuss this more over the coming weeks in a blog post and some meetup/conference talks.

[taion]

Awesome. That's exactly what I'm looking for.

The context here is the React Router exposes a hook (getComponent) to load the component corresponding to a React Router route on-demand. However, this is suboptimal for working with Relay, because I can't make the query until after I've received the code for the split out component, whereas ideally I'd like to do both at the same time.

Is there a meta-issue related to that update? Does it make sense to keep this issue open?

[taion]

Oops, I misread – I was actually trying to describe something like what you had. Keep the code required to build the query in the "main" bundle, so I can concurrently fetch the data and the code for the split-out bundle.

In other words, two parallel network requests, rather than a single "small" network request followed by 2 larger network requests.

[josephsavona]

@taion see #1369 (Relay 2 meta task) - one of the things that static queries enables is to prefetch the data for a route without having to download and execute the code for that route. Given that the framework will provide core support for prefetching, we'd be happy to support you and the community in integrating prefetching into popular bundling tools.

[taion]

This just works with Relay Modern now. 👍

[gorfadvijay]

@taion hey do you have any update how can i do code spiltting in relay and found router

[sibelius]

@gorfadvijay check this example https://github.com/relayjs/relay-examples/tree/master/issue-tracker

with new relay hooks api

[taion]

@taion hey do you have any update how can i do code spiltting in relay and found router

If you're currently using Found with the current non-experimental functionality, all you have to do is replace Component={MyComponent} with something like getComponent={() => import('./MyComponent.js').then(m => m.default)}, and Webpack will deal with the rest.