One possible way would be to run a separate node server making just the required API calls for said module, process and emit HTML as string. This could probably be imported in the main reactjs app via an API call. Or may be use a framework like Seneca that could use the node service output similarly. Can't figure out a way to import the node service output in the main reactjs app as a component along with props. That would allow me to add some pure front-end functionality and make a higher order component out of it.
1 Answer
I ended up making a module, that could be initiated at one place and used in a component within it, which could then be imported in the main app. So in my module i have --
module.exports = {
initiate: funtion(token){
this.data = useTokenToGetData(token);
... //downstream processing
},
getData: function() {
return this.data;
}
}and --
import {getData} from 'path/to/module';
export default SomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: getData()
}
}
render(){
const {data} = this.state;
return (
<div>{data}</div>
);
}
}Then in main app, i initiate the module once ---
import {initiate} from "path/to/external/module";
export default ParentComponent extends React.Component {
constructor(props){
super(props);
initiate(props.data);
}
render(){
return (
<div>{this.props.children}</div>
);
}
}and use the component i made in the module in children ---
import SomeComponent from "path/to/module/SomeComponent"
export default const ChildComponent = (props) => {
return (
<div>
Using Somecomponent With Data Initiated previously and processed by the module
<SomeComponent />
</div>
);
} For processing that required serverside, i ended up making a node-express service for the module too. But I guess that isn't exactly a front-end microservice.
Comments
dangerouslySetInnerHTMLis the React function you could use to parse/insert into react the HTML response from your micro-service server.eval