Apollo's getDataFromTree does not fetch data for a Loadable component's children queries

💬 Questions and Help

I’m using @loadable/component along with react-apollo. For SSR, I have used @neoziro’s SSR middleware solution in issue https://github.com/smooth-code/loadable-components/issues/30 and it works great.

However, I’m encountering an issue while trying to preload pages for client-side navigation.

When navigating, we call react-apollo’s getDataFromTree function on client side to preload all the data from GraphQL queries in the tree. getDataFromTree does not know to wait for loadable-components, though, so it immediately renders a loading screen instead of keeping the user on the initial page until all the loadable-components and their children queries have finished loading.

Here’s a more concrete example:

1. User clicks a link on the Home page to a Profile page, which starts a client-side navigation.
2. getDataFromTree begins walking the Profile page React tree and fetching data for Query components
3. Eventually, getDataFromTree tries to render a loadable-component, which immediately renders a loading component while the loadable chunk is asynchronously loaded in.
4. Once all other queries have fetched data, getDataFromTree resolves without waiting for the js chunk to load in.
5. Once the JS chunk loads in, loadable-component will render its component. Any children queries within the loadable-component now start to fetch their data.

Expected: User clicks Profile page link, Profile page loads in with all data already fetched. Actual: User clicks Profile page link, sees loading screen while Profile chunk loads in, then sees additional loading screen while Profile chunks’ Queries are loaded, then finally sees Profile page with all data.

How can I get around this problem?

My initial thought was to pass the InnerLoadableComponent’s this.promise to getDataFromTree via a wrapper component, but I don’t have access to the InnerLoadable due to Ref Forwarding.

Any other thoughts, solutions, or discussion would be greatly appreciated. Thanks!

[masihjahangiri]

Hello @jdmoody, You must run jsx = extractor.collectChunks(), then getDataFromTree(jsx). The collectChunks will take care of loading all modules.

not work for me!

[gregberge]

Yes it is what I mean.