Now I am trying to access the same endpoint but from a plugin I have created and I am not being able to fetch the payload too.
Basically I am trying to translate a booking engine to bubble that I feel way more confortable using code rather than adding “one million” steps all over the app.
Therefore, I would ask you a help to understand why I am not even being able to make a simple fetch from a plugin actions.
All the parameters are being sent, the endpoint was tested using plain postman but I am not being able to fetch a simple payload to send to another endpoint.
Is there any secret or what am I doing wrong?
Here is the action function:
function(properties, context) {
/*
These are the values that will be placed by the user
within the workflow and inserted within the url to be
fetched and return the availability payload.
*/
const apiUserKey = properties.api_user_key;
const apiAppKey = properties.api_app_key
const supplierName = properties.supplier_shortname;
const itemId = properties.item_id;
const date = properties.date;
const endpointUrl = `https://<endpoint removed due to privacy>/${supplierName}/items/${itemId}/minimal/availabilities/date/${date}/?api-app=${apiAppKey}&api-user=${apiUserKey}`;
let responsePayload;
fetch(endpointUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
responsePayload = data;
console.log('Response:', responsePayload);
})
.catch(error => {
console.error('Error:', error);
});
return {
"finalResult": responsePayload
};
}
Is this a client side action or a server side action?
Client side action can’t return data at the moment.
Server side actions have a new update api where you can use async/await syntaxt, but it doesn’t look like you are using it. You are returning an object where a property is undefined because the function will return before the async fetch.
It’s still your initial problem: you are not returning the data. Either await the fetch request and return the data in an object or return the fetch promise (that needs to resolve to an object with your data inside)
function(properties, context) {
/*
These are the values that will be placed by the user
within the workflow and inserted within the url to be
fetched and return the availability payload.
*/
const apiUserKey = properties.api_user_key;
const apiAppKey = properties.api_app_key;
const supplierName = properties.supplier_shortname;
const itemId = properties.item_id;
const date = properties.date;
const endpointUrl = `<urkl removed>/${supplierName}/items/${itemId}/minimal/availabilities/date/${date}/?api-app=${apiAppKey}&api-user=${apiUserKey}`;
let responsePayload;
(async function () {
try {
const response = await fetch(endpointUrl);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
responsePayload = data;
return { finalResult: responsePayload.json()};
console.log('Response:', JSON.stringify(responsePayload));
} catch (error) {
console.error('Error:', error);
} finally {
// Return the response, even if there is an error
return { finalResult: responsePayload.json()};
}
})();
}
it feels like you are randomly copy pasting code and mixing unrelated patterns without a clear understanding of what you are doing.
You may want to read again some guide about async javascript and how to use fetch
and even in node you are logging the result, not returning it.
Server side actions are functions, and they expect a returned value.
If you want to try it in node wrap your code in a function, this will be your “ssa” function. Then try to log the result from the function that calls your “ssa” function.
Nothing specific to bubble here.
it’s an immediately invoked function expression, so it is called and executed, and then nothing because it doesn’t return anything to the main function
