❤
npm
Sign UpSign In

mobx-server-wait

0.1.3 • Public • Published

mobx-server-wait

Render universally with server wait mobx actions.

Think of the scenario where you want to do some work in a promise. Once the work is complete, render the webpage.

Install

npm install --save mobx-server-wait

Usage in store.js:

import { observable, extendObservable, action } from 'mobx';
import serverWait, { fillServerWait } from 'mobx-server-wait';
import fetch from 'isomorphic-fetch';
 
class Store {
 
  constructor(state = {}) {
    extendObservable(this, state);
    fillServerWait(state, 'serverWaitKeyToUse');
  }
 
  @observable
  planets = {
    isLoading: false,
    data: [],
  };
 
  @serverWait
  fetchPlanets() {
    this.planets.isLoading = true;
    const data = fetch('https://swapi.co/api/planets')
    .then(res => res.json());
    .then(action(data => {
      this.planets.isLoading = false;
      this.planets.data = data.results;
    }));
  }
}

Usage in server.js:

import express from 'express';
import { serverWaitRender } from 'mobx-server-wait';
import store from './store.js';
 
 
// Assuming you've created your server with express
app.get('*', (req, res, next) => {
 
  const store = new Store();
 
  const root = (
    <Provider planets={store}>
      <App />
    </Provider>
  );
 
  const render = (html, store) => res.send(`
    <!doctype html>
    <html>
      <body>
        <div id="root">${html}</div>
        <script>window.__STATE__ = ${store};</script>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
 
  const storeKey = 'serverWaitKeyToUse';
 
  serverWaitRender({ store, storeKey, root, render, onError: next });
});

Options for @serverWait

{
  // Maximum wait time for individual action
  maxWait: <Number> || -1,
 
  // Retry rejected promise actions on the client
  retryRejected: <Boolean> || false,
}

Options for serverWaitRender

{
  // Maximum waiting time until the server calls the render method.
  maxWait: <Number> || 1250,
 
  // Attach debugger like debug: (...args) => console.log(...args);
  debug: <Function> || undefined,
 
  // React component as root
  root: <React.Component> || undefined,
 
  // Handled errors
  onError: <Function> || undefined,
 
  // The mobx root store
  store: <Object> || {},
 
  // Render method
  render: <Function> || (html, state) => {},
 
  // Unique key to store promises map
  storeKey: <String> || 'serverWaitPromieses',
}

Licence

MIT

Dependencies (6)

Dev Dependencies (6)

Package Sidebar

Install

npm i mobx-server-wait

Repository

github.com/ueno-llc/mobx-server-wait

Homepage

github.com/ueno-llc/mobx-server-wait

Weekly Downloads

10

Version

0.1.3

License

MIT

Last publish

Collaborators

  • magnearun
  • olafursverrir
  • birkir
  • ueno-personal
Try on RunKit
Report malware