How to deal with suspend?

I am mostly curious what was the initial motivation to have suspend = true by default already. There is a lack of information on how to actually use suspense for data fetching considering that it’s planned for late 2019.

I just got burned by this badly when I forgot to set it false for one component deep down in the tree. I do have a Suspense way up in a tree to handle React.lazy. Suddenly when a query was rerun due to variables changing, everything got unmounted and fallback to top-level Suspense. It took me a while and some debugging to realize the culprit.

Do you have some actual examples of how to integrate it with react-apollo-hooks? Is it someone using it successfully already or is it everyone switching it off?

Let’s consider a pretty simple scenario. A component that has useQuery and renders some markup with data from that query. Now with loading prop the decision what to show is done deeper in the tree. However, with suspension in play, it has to be done at top levels? I just cannot wrap my head around this for some reason.

[darrentorpey]

Just wanted to say this was a helpful, high-quality conversation and I appreciate the change (@trojanowski) to make Suspense opt-in. It lowers the barriers to entry and will allow more people to start using this library with far less trouble and confusion. 👍

[gaearon]

FWIW lack of features like this is part of the reasons we don’t recommend anyone to start using Suspense for data fetching now. (The feature you’re asking for is essentially a render prop API for switching between fallback and main content. It’s planned but not ready yet.)

It doesn’t hurt to experiment with it but I think we should be clear that Suspense data fetching story (and patterns around it essential to creating good UX) is not ready for prime time.