I have to add a react component to a Meteor app (react in a blaze component) (Meteor Guide), to make it simple the component is a button that should trigger the events to send the input to a different server. If I try to make the HTTP call from the client but I get the cross-origin error. Therefore I need to make the API call from the meteor server.
The flow of the request should be this:
Button clicked -> trigger template events -> Meteor.call(‘HTTPRequest’, POST, url, data) -> save response in Meteor Mongo db and send to the react redux store
The problem I encountered is that I don’t find a way to trigger the event from the react application.
Client-side:
The following file are frontend.
React App:
import React from 'react';
const App = () => {
return <button onClick={...trigger the event...}> Run </button>
};
export default App;
Meteor file test.html:
<template name="test">
<div>{{> React component=App onClick=onClick}}</div>
</template>
Meteor test.js
import App from './App.js';
Template.test.helpers({
App() {
return App;
},
});
Template.test.events({
'click send-code': (url, data) => {
Meteor.call('HTTPRequest', 'POST', url, data);
},
});
Server-side:
runner.js
import { HTTP } from 'meteor/http';
Meteor.methods({
'HTTPRequest'(method, url, data) {
return new Promise((resolve, reject) => {
try {
HTTP.call(method, url, data || {}, (error, result) => {
if (error) {
reject(error);
return;
}
resolve(result);
});
} catch (e) {
reject(e);
}
});
}
});
Is there a way to call the server-side method (runner.js) directly from the react part?
If no how can I trigger the event to call the server method from react?
How can I pass data from react component to the API call and save it back?
Thank you!