React-apollo: Availability of getDataFromTree on client side in Version 3.x.x

[alfechner]

In my current project users can dynamically put together a structure of different components. It's serialized, saved and later reloaded for rendering on Client Side. Each component fetches it's data via Apollo Client. I want the initial loading to happen at once except specific components which take too much time to load. So I need to exclude them from the initial loading process.

Prefetching Data doesn't work well for me because of the dynamic structure. In it's current implementation it assumes that no query is pre-executed except those deliberately selected. I need a feature to pre-execute all queries except those which have been deliberately excluded.

Something like getDataFromTree looks promising. However I can only find documentation in regard to Server Side Rendering.

I'm a bit confused from this Pull Request and this Issue. For me it's no clear if getDataFromTree is (and remains) supported on client side.

Can somebody clarify please? :)

[flippidippi]

I'm seeing this too. I have a repo that shows it happening. If you go directly to the index page, all the data is loaded correctly on the server and no loading state is shown on the client. However if you go directly to /other page and click a link to route to the index page, the page loads in a loading state then the data is retrieved.

https://github.com/flippidippi/next-apollo-app

Before react-apollos v3, it would load the data first, then route to the next page.

[jhampton]

@alfechner Let me ask some questions here to clarify:

• You're not using SSR, correct? (the getDataFromTree method has been deprecated and replaced with getMarkupFromTree in the @apollo/react-ssr package)
• Are you trying to deserialize a component tree, and then limit execution of queries based on some criteria here?
• Prefetch could work, but you'd need to externalize the various queries - I could see how a custom babel plugin or codegen might help there

My thought:

• If you're in control of the components themselves (even if the user is assembling them like nested Lego® blocks), then it should be trivial to store metadata about when the query should execute when the tree is deserialized and reassembled.
• You can then delay query execution down the tree by waiting for upstream/parent loading states or props, or by triggering the second wave of queries using a separate state machine

Do I understand the problem correctly?

[flippidippi]

It sounds like we are having the same issue, like @alfechner is also having issues getting all the data at once on the client side, before the router changes the page/components.

For us, using getDataFromTree works correctly when first going to a page (using SSR). But when doing a client side route the getDataFromTree no longer gets all the data before continuing. Before 3.0, getDataFromTree on the client side would work to get all the data from the structure and we could await that before the route changed.

If I try switching it to getMarkupFromTree then the SSR also breaks, because the data is returned from SSR still in a loading state.

[alfechner]

@jhampton you're right with your assumptions. However I don't know about your second thought. I want to load everything in the tree and while doing so displaying a loading spinner. When data loading is complete I want all the components in the tree to render at once. I don't want to end up with nested loading animations all over the page.

I really wonder why everyone seems to be happy with prefetching in order to initially load data for an application. For me it seems like the most natural think that I want to have a reliable way to load all data of my initial React tree before displaying anything. Of course it makes sense to exclude i.e. very slow loading data.

As for prefetching I'd be constantly afraid to forget (under-fetch) or include unnecessary (over-fetch) queries. Of course this problem is much more severe if you deal with a highly dynamic structure. But in general the problem also applies to a more static approach.

I also believe that this would be a great feature for both, SSR and BSR.

[walbuc]

@flippidippi , @alfechner Did you find a solution for this? I'm looking for the same behavior.

[flippidippi]

For us it seems like it an issue with Next.js AppTree not updating correctly.

I'm watching https://github.com/zeit/next.js/issues/9336 and https://github.com/zeit/next.js/issues/10126.

[alfechner]

@walbuc unfortunately not. But I didn't continue to investigate to be honest.

Since nobody seems to know about it and there is still nothing related in the docs I guess this is a feature exclusively for server side rendering for now.

I hope to get some inside in why it wasn't considered for client side rendering as well at some point. Apparently I'm not the only person asking for it :)

[dimaishere]

Any updates?