Use-meteor - Meteor react client based on simpleddp and hooks

announce
1

Hey!
I’ve been working on a custom react app which required access to a meteor backend. Simpledpp is very nice but its not hooks. So i created use-meteor to wrap simpleddp in hooks.

You can find it here - https://github.com/gamedolphin/use-meteor

Let me know what you think and if this is useful for you! Cheers!

6 Likes
2

This is really nice API, well done, thanks for sharing.

@cloudspider you might find this of interest.

The other area that would probably be useful to explore is integrating the method calls with React Query.

3

Well done! We’ve written our own hooks in-house as well to wrap simple-ddp.

One thing I’d improve in your README is to highlight javascript syntax properly with colors, to make it easier to read :slight_smile:

1 Like
4

Hi, I test your package. It produce many re-subcriptions and re-renders.
Test code:

export function Diagram({ id, token }) {
  const filter = useCallback((m) => m.diagram === id, [id]);
  const fields = {
    diagram: 1, live: 1, options: 1, template: 1,
  };
  const readyModels = useSubscription('models', [id, token, null, { fields }]);
  const readyLinks = useSubscription('links', [id, token, null, { fields }]);
  const readyAreas = useSubscription('areas', [id, token, null, { fields }]);
  const readyLabels = useSubscription('labels', [id, token, null, { fields }]);
  const readyCharts = useSubscription('charts', [id, token, null, { fields }]);

  const modelsDocs = useCollection('models', filter);
  const linksDocs = useCollection('links', filter);
  const areasDocs = useCollection('areas', filter);
  const labelsDocs = useCollection('labels', filter);
  const chartsDocs = useCollection('charts', filter);

  const ready = readyModels && readyLinks && readyAreas && readyLabels && readyCharts;
  if (!ready) return 'loading ...';

  return (
    <Canvas id="canvas" className="container">
      <Suspense fallback={null}>
        <Physics>
          <Plane position={[0, -0.5, 0]} rotation={[Math.PI / 4, 0, Math.PI]} />
          <Environment preset="lobby" />
          { readyModels && modelsDocs.map((m) => (<Model key={m.id} {...m} />)) }
          { readyLinks && linksDocs.map((m) => (<Link key={m.id} {...m} />)) }
          { readyAreas && areasDocs.map((m) => (<Area key={m.id} {...m} />)) }
          { readyLabels && labelsDocs.map((m) => (<Label key={m.id} {...m} />)) }
          { readyCharts && chartsDocs.map((m) => (<Chart key={m.id} {...m} />)) }
        </Physics>
      </Suspense>
      <OrbitControls />
    </Canvas>
  );
}