Mobx-store-model NPM

Overview

This is the best model/store library for mobx.

All your crud and lifecycle events managed for a store and for a model

Setup

You need to setup your base url before anything fires

will default to local server and port

import { Service } from 'mobx-store-model';

Service.setBaseUrl('https://jsonplaceholder.typicode.com');

In your store.ts

import { Store, Model, Loader } from 'mobx-store-model';
class Todo extends Model {
  route = 'todos';
}

class Post extends Model {
  route = 'posts';
}

class HomeStore {
  // Second param passed to store is the name used to hydrate
  todos = new Store(Todo, 'todos');
  posts = new Store(Post, 'posts');
  constructor() {
    // LIFECYCLE EVENTS
    // Fires on load from api call
    this.todos.on('after load', () => console.log('AFTER TODOS ARE LOADED'));

    // This method requries you calling store.setHydrated() after hydrating from mobx-persist
    this.todos.on('after hydrate', () => console.log('AFTER TODOS ARE hydrated'));

    // This method is fired if hydration is setup
    // Fires after hydrate and load are complete
    this.todos.on('ready', () => console.log('AFTER TODOS ARE ready'));

    // Alternatively you can check flags
    /*
      ## load flags

      - hydrated: boolean;
      - initLoaded: boolean;
      - ready: boolean;

      ## fetch flags

      - fetchingData: boolean;
      - fetchFailed: boolean;
      - fetchSuccess: boolean;
      - defaultFetchFailedMessage: string;

      ## save flags

      - savingData: boolean;
      - saveSuccess: boolean;
      - saveFailed: boolean;

      ## delete flags

      - deleteSuccess: boolean;
      - deleteFailed: boolean;
      - deleteFailedMessage: string;
    */

    setTimeout(() => this.start(), 0);
  }

  async start() {
    await this.todos.refreshData(); // Calls getData() and adds data to this.objects
    await this.posts.refreshData();

    console.log(this.todos.objects);
    // [{title: '...'}, ...]
    console.log(this.posts.objects);
    // [{title: '...'}, ...]

    // METHODS
    await this.todos.getData(); // GET /todos -- you can pass a custom route or get params if you want (DOES NOT PUT DATA ON this.objects, ONLY RETURNS DATA)
    await this.todos.create({ title: '...' }); // POST /todos
    await this.todos.delete(this.todos.objects[0].id); // DELETE /todos/{id}  -- removes from this.objects
    await this.todos.udpate(this.todos.objects[0]); // PATCH /todos/{todo.id}

    // Dealing with current
    // Current is a concept when you have multiple pages or parts of app dealing/modifying a single model
    this.todos.setCurrent(this.todos.objects[0]);
    await this.todos.saveCurrent(); // if current has id, it will call create else it will call update
    await this.todos.createCurrent(); // .create(this.current)
    await this.todos.updateCurrent(); // .update(this.current)
    await this.todos.deleteCurrent(); // .delete(this.current.id)
    this.todos.resetCurrent(); // resets current data (if modified) and resets current to blank model

    // E.X.
    // This is how you modify current
    // this.todos.current.title = 'new title';
    // this.todos.saveCurent();

    await this.todos.getById(1); // Will check objects for todo and hit end point if it can't find
    this.todos.getByIdSync(1); // Will ONLY check objects for todo
    this.todos.getMultipleById([1, 2]); // Will ONLY check objects for todos
    this.todos.search({ username: 'bob' }); // GET /todos s={username: 'bob'} -- Will ONLY work with NESTJS CRUD

    // MODEL METHODS
    const todo = this.todos.objects[0];
    todo.reset(); // if it's been modified but not saved
    await todo.save(); // if id exists will do update, otherwise will create
    await todo.create(); // POST /todos
    await todo.udpate(); // PATCH /todos/{this.id}
    await todo.delete(); // DELETE /todos/{this.id}
    await todo.refresh(); // GET /todos/{this.id}  --- overrides object with latest from db
  }
}

export const Home = new HomeStore();

// If store doesn't have a name you have to pass name as second param
Loader.registerStore(Home.todos, 'todos');
Loader.registerStore(Home.posts, 'posts');
// If store was passed name and you don't want to define multiple registers
Loader.registerStores([Home.todos, Home.posts]);
Loader.init(); // this will fire refreshData and hydrate the store

You can use mobx class as store as well

import { Store, Model, Loader } from 'mobx-store-model';
class Todo extends Model {
  route: string = 'todos';
}

class HomeStore extends Store {
  name: string = 'home';
  constructor() {
    super(Todo);
  }

  start() {
    console.log(this.objects); // [{title: '...'}]
    // All the same methods from above are available here as well
    // I.E.
    this.setCurrent(this.objects[0]);
    this.saveCurrent();
  }
}
export const TodoStore = new Todo();
Loader.registerStore(TodoStore);
Loader.init();