New useSubscription hook with Suspense and preloading

packages
1

Hi, I just published a small package because I thought more people could be interested. I put it on NPM because with Atmosphere I got a duplicate React versions error, and the typings didn’t work. If someone can help me with that, I would appreciate it :slight_smile:

Package: meteor-subscribe-suspense
Github repo: https://github.com/rijk/meteor-subscribe-suspense

What it basically allows you to do is the following:

function Board({ id }) {
  useSubscription( 'board', id )
  // No need for ready checks; when you get here the subscription is ready
  return <div>Board {id}</div>
}

And then ‘catch’ the loading state in a parent component (similar to how Error Boundaries work):

function App() {
  return (
    <Suspense fallback={<b>Loading…</b>}>
      <Board id={123} />
    </Suspense>
  )
}

In addition, because we have to keep a cache for Suspense anyway, we can add cool things like preloading:

<NavLink
  to={`/board/${board.id}`}
  onMouseEnter={() => {
    subscriptions.preload( 'board', board.id )
  }}
>
  {board.name}
</NavLink>

Checkout the readme for more details and examples, and feel free to check out the code. It’s relatively small as most of the Suspense related work is done by use-asset.

Let me know what you think!

10 Likes
2

This is excellent! The code you create is so clean and light. Anything that helps me see clearly what is going on in a data component is a real benefit. Are you planning on writing any tests in the next few months?

3

Thank you! I always like light building blocks as well, that’s what I also like about use-asset. Less surface area for bugs :slight_smile:

Are you planning on writing any tests in the next few months?

For now I haven’t spend time on tests, this hook is part of a larger rewrite of my app, so my focus is still on that. But if enough people are interested, that is definitely in the planning.

2 Likes
4

Neat ! :slight_smile:

That’s a very useful package !

2 Likes