So I have a React Native app, making calls to my own external api via the fetch() native API. I am encountering a strange issue with my requests not being processed by fetch() correctly in only one context.
The calls are supposed to POST to /api/token_login.
Here is how I make my calls in the app:
#/src/services/post.js
import headers from './headers';
const APIURL = '******/api';
export default async (path, data, callback) => {
try {
const postData = {
method: 'POST',
credentials: 'include',
headers: new Headers(headers),
body: JSON.stringify(data)
};
const requestURL = `${APIURL}/${path}`;
const request = new Request(requestURL, postData);
const response = await fetch(request);
const res = await response.text();
if (response.ok) {
callback(null, res);
} else {
const error = res;
callback(error, null);
}
} catch (error) {
console.log('caught error: ', error);
}
};
#/src/services/auth.js
import post from './post';
export function TokenLogin(data, callback) {
post('token_login', data, callback);
}
...other functions
#/src/containers/Login.js
const data = {
user: {
auth_token: token,
},
};
return TokenLogin(data, (err, response) => {
const res = JSON.parse(response);
... do stuff
};
This function gets called on componentDidMount under certain conditions, which is the expected behavior. However, every day or so it suddenly stops sending the request to the passed in path, and sends a GET to /api/login instead. Changing the path passed into the function changes the behavior back to the expected one (i.e., passing in flurgl sends a POST request to .../api/flurgl with the body passed in correctly. Here is some debugging info:
// the logs:
=> Request method: POST url: https://*****/api/token_auth
=> Response object:
=> Response {type: "default", status: 404, ok: false, statusText: undefined, headers: Headers, …}
bodyUsed: true
headers: Headers {map: {…}}
ok: false
status: 404
statusText: undefined
type: "default"
url: "https://*******/api/login"
Related
I just changed the server from const server = "https://backend.yourguide.pk" to const server = "https://stage.yourguide.pk", and now this error is shown. How to resolve it?
getServerSideProps's code:
export async function getServerSideProps(context) {
let experience = [];
const server = 'stage.yourguide.pk';
try {
const data = await fetch(
`${server}/api/user/getallexperience?title=${context.params.experiencesTitle}`,
{
method: 'GET',
headers: { 'Content-Type': 'application/json' },
}
);
experience = await data.json();
} catch (error) {
console.log('error is ', error);
}
return {
props: {
title: context.params.experiencesTitle,
experience: experience.results,
},
};
}
error - SerializableError: Error serializing .experiences returned from getServerSideProps in "/".
Reason: undefined cannot be serialized as JSON. Please use null or omit this value.
For some reason, experience is being set to undefined, and undefined is not a valid JSON value. This can be addressed with the help of a check, like so:
export async function getServerSideProps(context) {
let experience;
const server = "stage.yourguide.pk";
try {
const data = await fetch(
`${server}/api/user/getallexperience?title=${context.params?.experiencesTitle}`,
{
method: "GET",
headers: { "Content-Type": "application/json" },
}
);
experience = await data.json();
} catch (error) {
console.log("error is ", error);
}
return {
props: {
title: context.params?.experiencesTitle || null,
experience: experience?.results || null,
},
};
}
Now, why you are getting undefined? Well, this can be because you are not using the correct endpoint, or path, or not giving the correct params, etc. Also, your error is saying .experiences while you have .experience.
Make sure you are not making any typos.
I am somehow trying to get the status (error,success) after paying through the UPI app. I already end up in the onAdditionalDetails() function but here I somehow don't have the possibility to query the status. Is there maybe something needed to get this information in the state object?
async initAdyen_newurl() {
let config = null;
config = {
...this.config.adyenConfig,
onPaymentCompleted: (result, component) => {
console.info("onPaymentCompleted");
console.info(result, component);
},
onError: (error, component) => {
console.error("onError");
console.error(error.name, error.message, error.stack, component);
},
onAdditionalDetails: (state, component) => {
const actionUrl = "hardcoded for the moment"
const obj = {
paymentMethodType: component.props.paymentMethodType,
url: actionUrl,
method: "post",
type: "redirect",
paymentData: component.props.paymentData
}
component.props.createFromAction(obj, {}).mount("#id");
},
};
AdyenCheckout(config)
.then((checkout) => {
// init stuff
})
.catch((error) => {
console.error(`url failure ${error.message}`);
});
},
I can also redirect to the next page using createFromAction(), but this just happens in both Success and Error. However, this should only happen in Success. I hope that was somehow understandable. Many Thanks
edited: i am using version 5.23.0
The flow involves an additional step (3DS) so the onAdditionalDetails handler is invoked. From there you can add an extra call to /payments/details to fetch the payment status.
The response includes the resultCode to inform the shopper of the payment status.
Here is an example:
...
onPaymentCompleted: (result, component) => {
handleServerResponse(result, component);
},
onAdditionalDetails: async (response, _component) => {
// call server
const paymentDetailsResponse = await callServer("/api/paymentDetails", response);
// obtain payment status
const result = paymentDetailsResponse.resultCode
},
onError: (error, component) => {
console.error(error.name, error.message, error.stack, component);
}
// Calls your server endpoints
async function callServer(url, data) {
const res = await fetch(url, {
method: "POST",
body: data ? JSON.stringify(data) : "",
headers: {
"Content-Type": "application/json",
},
});
In the backend perform the paymentsDetails call to obtain the Payment status from the Adyen platform:
// Check payment result
app.post("/api/paymentDetails", async (req, res) => {
try {
const response = await checkout.paymentsDetails({
details: req.body.data.details,
paymentData: req.body.data.paymentData,
});
res.json(response);
} catch (err) {
console.error(`Error: ${err.message}, error code: ${err.errorCode}`);
res.status(err.statusCode).json(err.message);
}
});
See Confirm an additional action on your server
updateTagCurrentValue: builder.mutation<any, {path: string, body: updateTagCurrentValueBody}>({
query: (args) => {
const {path, body} = args
return ({
url: `/v2/tags/${path}/values/current`,
method: 'PUT',
body: body,
})
},
transformResponse: (response) => {
return response
}
})
I am new in RTK, this mutation is working well, but I can not understand how to get a response from server? I see it in inspect network tab, I see my added data in the server, but the response comes null
const [updateTagCurrentValue, {error, isSuccess}] = useUpdateTagCurrentValueMutation()
const onSubmit: SubmitHandler = async (data) => {
let body: updateTagCurrentValueBody = {
value: {value: JSON.stringify(data)}
}
try {
let response = await updateTagCurrentValue({path: 'test', body}).unwrap();
console.log(response)
} catch (err) {
console.log(err)
}
}
I searched for solutions, and some people said add .unwrap() at the end of the call, but it didn't help. transformResponse also changes nothing, isSuccess changes from false to true after the second submission...
I am extremely stuck on a task using Express, API, Fetch.
I am using Nuxt + Shopify API endpoints to grab data such as orders like below
This is my express API Endpoint.
The results should return an array of objects ( orders )
const bodyParser = require('body-parser')
const app = require('express')()
const axios = require('axios')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.post('/getJSON', async (req, res) => {
const { customerID } = req.body
const id = Buffer.from(customerID, 'base64')
.toString('binary')
.split('gid://shopify/Customer/')
.pop()
console.log('id is', id)
const endpoint = `https://test.myshopify.com/admin/api/2020-07/customers/${id}/orders.json`
try {
const response = await axios.get(endpoint, {
headers: {
'Content-Type': 'application/json',
'X-Shopify-Access-Token': '*****************'
}
})
res.status(200).json(response.data.orders)
} catch (error) {
res.status(500).send(error)
}
})
module.exports = app
Now, in my Nuxt store.js, I am using fetch to make a post requests to that endpoint above.
async function apiPost(endpoint, { data }) {
await fetch(`/api${endpoint}/getJSON`, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
const contentType = res.headers.get('content-type')
if (contentType.startsWith('text/html')) {
return res.text()
}
if (contentType.startsWith('application/json')) {
await res.json()
}
})
}
When I console.log res.json(), it is a promise
Since it is a promise, I wanted to see what the results were anyways.
res.json().then((resp) => {
console.log('resp is', resp)
})
Turns out the rest is an array of objects.
However, I do not know how to return this object correctly, as the "ordersResponse" below is always undefined !
Below is a function calling the apiPost passing in the 'endpoint'. However, the orderResponse is undefined. I have tried solutions, but all of them end up as orderResponse being undefined.
async fetchOrders({ state, dispatch, commit }, payload) {
try {
const ordersResponse = await apiPost('/customer-orders', {
data: { customerID: state.customer.id }
})
console.log('ordersResponse', ordersResponse) // **undefined**
} catch (error) {
console.error(error)
throw error
}
},
Any help is appreciated
It looks like the apiPost function needs to make a return from within the 'application/json' if block.
if (contentType.startsWith('application/json')) {
return res.json()
}
You should then receive data back when calling it for the ordersResponse variable.
I just successfully curled here:
curl -X POST https://jenkins-url/job/MyJob/job/some-job/job/master/build --user myemail:mypassword -H 'Jenkins-Crumb: mycrumb'
now I want to use axios inside my lambda
so I have this:
const axios = require('axios')
exports.handler = async (event) => {
const url = "my-url";
try {
const res = await axios.post(url, {}, {
auth: {
username: 'user',
password: 'passowrd'
},
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Jenkins-Crumb": "my-crumb"
},
}).then(function(response) {
console.log('Authenticated');
}).catch(function(error) {
console.log('Error on Authentication');
});
console.log(res)
return {
statusCode: 200,
body: JSON.stringify(res)
}
} catch (e) {
console.log(e)
return {
statusCode: 400,
body: JSON.stringify(e)
}
}
};
but when I trigger the lambda it returns with: failed with the error "Request completed but is not OK"
not sure if I'm doing something wrong somewhere but seems to be everything is correctly mapped from CURL to axios
You have a few issues:
In your .then(...) handler, you are doing a console log, but you aren't returning anything from that function. Therefore, res is going to be undefined.
You're doing a JSON.stringify on res. res would be an axios response, not the response body. Stringifying the axios response is a bad idea, because it contains hefty object references and also circular references. You want res.data to give you the response data.
The error returned from Axios may also contain these heavy objects and circular references. In my experience, you can actually crash node when trying to serialize responses and errors from axios.
Here's how I'd modify your function:
const axios = require('axios')
exports.handler = async (event) => {
const url = "my-url";
try {
const res = await axios.post(url, {}, {
auth: {
username: 'user',
password: 'passowrd'
},
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"Jenkins-Crumb": "my-crumb"
},
});
return {
statusCode: 200,
body: JSON.stringify(res.data)
}
} catch (e) {
console.log(e)
return {
statusCode: 400,
// Don't do JSON.stringify(e).
// e.response.data will be the axios response body,
// but e.response may be undefined if the error isn't an HTTP error
body: e.stack
}
}
};