next-mobx-wrapper

Mobx wrapper for Next.js

⚠️ This will work only with Next.js 6+ ⚠️

Example: examples/with-mobx-wrapper

Installation

$ yarn add next-mobx-wrapper

Usage

Step 1: Wrap withMobx into _app.js

// pages/_app.js
 
import {withMobx} from 'next-mobx-wrapper';
import {configure} from 'mobx';
import {Provider, useStaticRendering} from 'mobx-react';
 
import * as getStores from '../stores';
 
const isServer = !process.browser;
 
configure({enforceActions: 'observed'});
useStaticRendering(isServer); // NOT `true` value
 
class MyApp extends App {
  render() {
    const {Component, pageProps, store} = this.props;
 
    return (
      <Container>
        <Provider {...store}>
          <Component {...pageProps} />
        </Provider>
      </Container>
    );
  }
}
 
export default withMobx(getStores)(MyApp);

Step 2: Create the stores

• Create userStore sample:

// stores/user.js
 
import {BaseStore, getOrCreateStore} from 'next-mobx-wrapper';
import {observable, action, flow} from 'mobx';
import fetch from 'fetch';
 
class Store extends BaseStore {
  @observable userRegistry = new Map();
 
  fetchUser = flow(function*(id) {
    if (this.userRegistry.has(id)) {
      return;
    }
 
    try {
      const {data} = yield fetch(`https://api.domain.com/users/${id}`).then(
        response => response.json(),
      );
 
      this.userRegistry.set(id, data);
    } catch (error) {
      throw error;
    }
  });
 
  getUserById = id => {
    return this.userRegistry.get(id);
  };
}
 
// Make sure the store’s unique name
// AND must be same formula
// Example: getUserStore => userStore
// Example: getProductStore => productStore
export const getUserStore = getOrCreateStore('userStore', Store);

• Create the rootStore:

// stores/index.js
 
export {getCounterStore} from './counter';
export {getUserStore} from './user';

Step 3: Binding data

• Any pages

// pages/user.js
 
class User extends React.Component {
  static async getInitialProps({store: {userStore}, query}) {
    const {id} = query;
 
    await userStore.fetchUser(id);
 
    const user = userStore.getUserById(id);
 
    return {
      user,
    };
  }
 
  render() {
    const {user} = this.props;
    return <div>Username: {user.name}</div>;
  }
}
 
export default User;

• Or any components

// components/UserInfo.jsx
 
import {inject} from 'mobx-react';
 
@inject(({userStore: {getUserById}}, props) => ({
  user: getUserById(props.id),
}))
class UserInfo extends React.Component {
  render() {
    return <div>Username: {this.props.user.name}</div>;
  }
}
 
// Somewhere
<SampleThing>
  <UserInfo id={9}>
</SampleThing>

• Or with Hooks

// components/UserInfo.jsx
 
import React, {useMemo, useContext} from 'react';
import {MobXProviderContext} from 'mobx-react';
 
const UserInfo = ({id}) => {
  const {
    userStore: {getUserById},
  } = useContext(MobXProviderContext);
 
  const user = useMemo(() => getUserById(id), [id]);
 
  return <div>Username: {user.name}</div>;
};
 
export default UserInfo;

Note: Next.js 8 you need add more, if you want to use Observable Maps

//.babelrc
 
{
  "presets": [
    [
      "next/babel",
      {
        "transform-runtime": {
          "corejs": false
        }
      }
    ]
  ]
}

API

import {withMobx, BaseStore, getOrCreateStore} from 'next-mobx-wrapper';

License

MIT © Nghiep