Use find async in server side using suspense

[Grubba27]

as commented in the thread from this PR #360 We should work on making server-side fetching async. In this PR, I introduce the suspense API;

The useFind with suspense was intended to be used with SSR, as the client side useFind uses a sync function so it was not needed any changes in it

[radekmie]

I spent some time now trying things out, and I think we won't be able to implement it while preserving the API surface. The problem is that as soon as we throw the promise, all hooks lose their state (i.e., .current of useRef is undefined, useMemo and useState are initialized again, etc.). That means we'd either have to make the cursors comparable (that won't work because of $where and transform) or the API has to look differently.

[Grubba27]

Hey @radekmie, I've done and found a way(hacky, I guess) to be sure to remove keys from the cached selector when it is null. And done the same for useSubscribe with suspense as well

[Grubba27]

react-meteor-data@2.7.0 is out

[rj-david]

@Grubba27, can you help point to the documentation related to Suspense?

[Addendum] I just found it: https://github.com/meteor/react-packages/tree/master/packages/react-meteor-data#suspendable-hooks

Am I right that for suspense/use*, we can transform them to a HoC using the default methods of transforming hooks to HoC to make them compatible with class-based components?

[Grubba27]

I'm trying to understand.... I had not implemented the HOC for useTracker with suspense... yet. For example, you can look with WithTracker.tsx HOC; just remember to use React.Suspense and I think is possible to be done. But I had not tested it

[CaptainN]

Any React hook can be turned in to a HoC very easily. withTracker has a bunch of stuff in it you probably don't need, for backward compat - for a simple HoC, just use useTracker or useFind (etc.) in the HoC, and wrap your component. Easy peasy:

// HOC
const withSomeTrackerStuff = (Component) => (props) => {
  const trackerStuff = useTracker(...)
  return <Component {...props} {...trackerStuff} />
}

// resulting container
const MyContainer = withSomeTrackerStuff(MyComponent);

[rj-david]

Yes, I was looking at withTracker and it seems complicated than necessary.

Thanks @CaptainN @Grubba27