I would like to call an API resource using meteor and React. What I would like to happen is;
load a page
have a form shown to a user
user submits form
use the form data as parameters for the API call via POST
returns the API response to React.
How do I achieve this? Am I on the right track by using Meteor.wrapAsync?
Meteor.wrapAsync wouldn't be neccesary. If you have a button in React. You should keep the fields in the state. React Forms. Then use this code in your component to call a meteor method.
onClick(e){
e.preventDefault();
const { objectToPost } = this.state;
Meteor.call("some_method", objectToPost, (err, res) => { doSmthWithFrontend });
}
The Meteor method will be called async for you and return when the call returns. In this method you can use Meteor Http to achieve what you want.
Related
I am working on an app and getting all the data from API's for different components.And when calling login api I am getting the json as response with user details. I have a component which requires some of the user details to pass to another API to fetch regarding data. Currently I am fetching data of the components by passing actual user details as a parameter to the API, and I want to make it dynamic.
Where Whenever a user will logged in, other API's should dynamically take the required parameters and fetch the json data. How can I achieve this?
Create an async function that logs the user in and on the result, call the second API conditionally with the result of the login call.
async function loginUser (params){
try {
// api call here
// if everything is successful
return {
success:true,
data: userObject
}
} catch(e){
return{
success:false,
error:e
}
}
}
const result = loginUser(params)
if(result.success){
// perform another call whcich requires userObject
}
I simply delete one data using my delete API with the icon onClick event and after that, I simply call my list API but the list is not updated I have to refresh that page or simply double click on my icon then list call updates.
When I debug my code then I notice that API call coming with the response of 304 after deleting the successful message.
This happens only in delete functionality.
Here is Code.
Icon
<i class="zmdi zmdi-delete zmdi-hc-lg" id={data._id} onClick={(e) => this.deletedata(e.target.id)} ></i>
Delete Function
deletedata = (data) => {
debugger;
this.props.DeleteCity(data);<----Delete Api Call
this.props.getcity();<----- Get Api Call
}
Note:-
1. API is made in Node on the backend side and Front side using redux-saga for API calls.
2. And please note that API is not yet Uploaded on any server I am using them in the same system with help of cross-environment setup.
It doesn't happen because it doesn't work asynchronously.
deletedata = async (data) => {
debugger;
await this.props.DeleteCity(data);<----Delete Api Call
this.props.getcity();<----- Get Api Call
}
I have a simple React component, a button and a function which calls an API endpoint. When I click the button the API inside event gets called twice. I have read many posts here on stackoverflow and tried all of them but still have same issues.
Moreover, even though I can see 2 records in db for each call, in the Google Dev tools shows only 1 xhr call which is wired.
I have already tried to pass function reference instead of function itself and even called function via () => { } but same result.
<button type="button" onClick={ this.onSubmitForm }>Save</button>
onSubmitForm = (e) => {
// e.preventDefault();
const response = axios.post('http://localhost/util/index.php/api/record', {name: 'test'} );
console.log(response) // Even this line is logged once in console ;
}
Neither your react app nor the API, it is the browser itself. Have a look at this https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
A preflight request to let the server know what HTTP method will be used when the actual request is made.
If in the Google Dev tools shows only 1 xhr call. Then it's not a front-end problem. It might be something wrong with the api function in server side. Maybe it calls the insert query twice.
Is there a way to use this.props.dispatch of the redux store inside Accounts.onEmailVerificationLink ?
I am using React and React-redux inside a Meteor app.
Upon email verification i would like to send data through this.props.dispatch
I'm trying to make this work(if it is even possible):
Accounts.onEmailVerificationLink(function(token, done){
console.log('onEmailVerificationLink token', token)
console.log('this',this)
var outerthis = this
Accounts.verifyEmail(token, function(error){
if(R.isNil(error)){
}else{
console.log('error of verifyEmail', error)
outerthis.props.dispatch(changemainmessage(error.reason))
}
})
done()
})
You need to import your store object from wherever it is defined
import store from '../config/store'
Then you can dispatch an action directly from the store object
store.dispatch(changemainmessage(error.reason));
Read more here
Also, I'd recommend using camelCase for your variables - it's way more readable and follows JavaScript convention
So changemainmessage() would be changeMainMessage()
My login application (react) and actual (react) application are in the same domain. My login application sets localStorage when user logs in successfully. In my actual application i have to check that value . if it is not there i have to redirect to login application in onload . What is the best practice to do that
You can check it in the componentDidMount life cycle method as below.
class LoggedInComponent extends Component {
componentDidMount() {
if (!localStorage.get('loggedIn')) {
window.location = "/login";
// You mentioned login app and actual app is deferent.
// So you should use window.location
// Otherwise you can use react-router's router.push('/login') function.
}
}
}
Use componentDidMount only. Because react v17 is going to deprecate the componentWillMount function.