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 ' ; 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

{ maxWait : < Number > || - 1 , retryRejected : < Boolean > || false , }

Options for serverWaitRender

{ maxWait : < Number > || 1250 , debug : < Function > || undefined , root : < React . Component > || undefined , onError : < Function > || undefined , store : < Object > || { } , render : < Function > || ( html , state ) => { } , storeKey : < String > || ' serverWaitPromieses ' , }

Licence

MIT