Questions about Meteor's client side collections lifecycle

react
1

I’m thinking about how to better integrate Meteor with React, and have some thoughts. Here’s what I’d like to do, which will be followed up with some questions about how Meteor’s data system currently works.

  • Build a sort of global stateful collection provider, kind of like Redux. React really needs data loading to happen asynchronously with rendering, and Meteor’s current hook implementation doesn’t make that easy. An easy solution is to just not make data available immediately, but that would suck for a lot of reasons. The better solution is to hoist the loading and management of data to a provider, and get it out of render methods entirely. Then data has high availability, and queries are available during render, and we can still make sure not to leak memory in render.
  • Build subscription and cursor hooks that integrate more tightly in to react, and follow the rules of hooks very closely. Among other things, this will manage more clearly when subs are created and destroyed, but also use Cursors in React loops, so that individual documents changes in a list won’t update entire trees in react.

My questions are about how Meteor currently handles some of this stuff. I know that we can do Meteor.subscribe() in a hook, and then briefly destroy the computation to remount it, and that doesn’t immediately remove all the data from the collection, but I’m not sure how that works. I guess I’m just looking for an overview of how Meteor’s merge-box works, particularly on the client side, and particularly how/when does it clean stuff up? Odd that I’ve never had to dig in to this - I guess that describes some of the strength of the platform, that I haven’t had to know how that works at a low level. But I do want to know now.

1 Like
2

Kind of sounds like you want mobx.

// DataStore.js
import { observable } from 'mobx';
import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';

class DataStore {
  @observable data = [];
  @observable ready = false;
  
  constructor() {
    const handle = Meteor.subscribe('data');
    Tracker.autorun(() => {
      this.ready = handle.ready();
      if(this.ready) {
        this.data = Data.find({}).fetch();
      }
    });
  }
}

export const dataStore = new DataStore()

// MyComponent.jsx
import { dataStore } from './DataStore';
import { observer } from 'mobx-react-lite';

export const MyComponent = observer(() => {
  return <div>{dataStore.data.length}</div>
});

In mobx, you have observables and observers. An observer updates when an observable changes.

I’m fairly certain there would be a way to write a library to integrate tracker into mobx, such that mobx would tracker ReactiveVars/Dicts/Cursors as observables, but I’ve never spent the time to figure it out.

3

MobX actually has the same problem tracker has, where it creates the observables based on first use - this pattern is unworkable in strict react “rules of hooks” implementations. I’m looking to do something lower level.

I also want to integrate play with ways to integrate the cursor directly, and get something super well optimized, and compatible with concurrency. No jank.