Add support for React Suspense

[chompy18]

Although Suspense isn't officially ready for data fetching, some libraries already take advantage of this feature (react-hooks-fetch, built-in React.lazy...).

Why

Data loading is quite painful to handle at the time, especially when you have multiple queries.

const { data: data1, loading: loading1 } = useAxios(config1);
const { data: data2, loading: loading2 } = useAxios(config2);
if (loading 1 || loading2 || ...) {
  // here goes some repetitive code
}

Code handling data loading is also very repetitive.

Solution

How about adding a boolean suspend experimental option (which defaults to false) that would make useAxios throw the axios request promise to trigger the Suspense api?

const { data } = useAxios(config, { suspend: true });
// if we reach this line, data is populated and safe to use

The benefits of triggering Suspense are:

code becomes cleaner and simpler by allowing to write it as if everything is synchronous repetitive code to handle loading can be reduced to the usage of a component

Question is: what is the roadmap about Suspense support ? Would it be possible to have an experimental implementation in a near future? or wait for the Suspense api to be officially ready for data fetching?

Thanks

[simoneb]

Interesting idea which I've never investigated. I'll look into what it would take to add suspense support. Thanks for bringing it up!

[sefininio]

I'd be happy to lend a hand!

[simoneb]

PRs are always welcome!

[simoneb]

I started doing some experiments with Suspense for data fetching but I'm not too positive that that pattern fits very well in how axios-hooks works.

Aside from being still experimental, the pattern assumes that data loading begins before you even start rendering the component, and from within the component you simply get a promise that resolves or rejects in various ways, making Suspense work. This is fundamentally different from how axios-hooks currently works, as it uses a useEffect hook to start data loading when the component renders.

This is not to say that it's impossible to integrate it with Suspense, but early experiments don't look too promising, or in other words, I came nowhere close to making it work.

[sefininio]

Maybe try to get inspiration from relay or apollo-client implementation? From what I gathered from suspense docs, relay already supports it even at this work-in-progress stage, and also apollo-client (apollographql/apollo-feature-requests#162 (comment))

[chompy18]

Looks like react-i18next also supports it: https://react.i18next.com/latest/using-with-hooks#using-the-usetranslation-hook

[simoneb]

Thanks for sharing the link. Our case here is slightly different though because translations are a perfect use case for Suspense. You load once and you're done. Here we have to handle reloading, caching, manual fetching and so on, and I think that's the part that makes the integration more complex. But I'll look into it!