RPC React

Installation

yarn add fusion-plugin-rpc-react

Example

// src/main.js
import React from 'react';
import App from 'fusion-react';
import RPC from 'fusion-plugin-rpc-react';
import Root from './root';
import handlers from './rpc';

export default () => {
  const app = new App(<Root />);
  app.plugin(RPC, {handlers});
  return app;
}

// src/rpc.js
export default __NODE__ ? {
  getGreeting() {
    // normally you would make a database call or a web service request
    // and return a promise instead of returning data synchronously
    return {data: 'hello'}
  }
} : null;

// src/root.js
import {withRPC} from 'fusion-plugin-rpc-react';

const Root = class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: '',
    };
  }
  componentDidMount() {
    const {getGreeting} = this.props.rpc;
    getGreeting().then(({data}) => {
      this.setState({
        loading: false,
        data,
      });
    });
  }
  render() {
    if (this.state.loading) {
      return <div>Loading...</div>;
    }
    return <div>{this.state.data}</div>;
  }
}

export default withRPC(Example);

Registering the plugin

// src/main.js
import React from 'react';
import App from 'fusion-react';
import RPC from 'fusion-plugin-rpc-react';
import Root from './root';
import handlers from './rpc';

export default () => {
  const app = new App(<Root />);
  app.plugin(RPC, {handlers});
  return app;
}

Handlers

The handlers option should be an object with methods:

// src/rpc.js
export default {
  getGreeting() {
    return {data: 'hello'}
  }
};

Normally methods should call a database API or a micro-service on the server

// src/rpc.js
const db = ... // setup a database
export default __NODE__ ? {
  getUser(id) {
    return db.find('users', id); // query the database
  }
} : null

The methods don't need to exist on the client; the client-side plugin is automatically hydrated with the correct methods.

Higher order component

The withRPC HOC exposes a prop called rpc, which has the same methods as handlers. Calling those methods initiate an HTTP request to the appropriate endpoint, runs the corresponding server-side method and returns a promise with the result.

// src/root.js
import {withRPC} from 'fusion-plugin-rpc-react';

const Root = class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {data: ''},
    };
  }
  componentDidMount() {
    const {getGreeting} = this.props.rpc;
    getGreeting().then(({data}) => {
      this.setState({data});
    });
  }
  render() {
    return <div>{this.state.data}</div>;
  }
}

export default withRPC(Example);