This external sources are service that need API key or token sent as header. How can I do this using Glide? I’ve been looking all over the forums for an answer and all I see is “can’t be done”. Is that so?
Thanks in advanced for your help!
Hi @globalint and welcome to the community.
You can call external services by using webhooks.
So do you want to use these external sources to load data to your app? If it’s the case, is it something you do everyday or only once?
I wish to use an app I have that generates seo reports for every web design project. I can see it being used everyday for different project. I’m toying with the fetch javascript function, but I’m stuck.
I also use the webshook to execute and I can write the results I need (at least partially) to a Google sheet, so I could connect it to the app and have it relate using the project id column.
What exactly are you trying to use the fetch function for? Do you want to send data to a service where you can generate a SEO report?
Is it the Sheet you’re connecting to said app/page? If it’s the same Sheet is there a reason you don’t use functions you already have like add row/set column?
Hi ThinhDinh,
Thanks for taking the time to sort this out with me.
I’m trying to use the API from this service (smartseoreport.com) in which I can call the API using a Token which I have to send using Headers. Using this API I generate SEO report for a website.
That’s where I first stareted to investigate how to perform a simple API call, just to find out that I can only use public APIs, otherwise I have to use code or a webhook. Now, I started using javascript with the fetch function to see if I could generate the report and an report ID back from smartseoreport.com or (as an alternative) create a webhook so I could send the it to Pabbly, let Pabbly execute the aPI call for me, write to a Google sheet and retrive my information from that sheet.
I hope I make sense.
I assume you will have to send some pieces of info to this API?
Using JavaScript to do it from the app is not an ideal way, since it might trigger the payload to send more times than you want it to.
If you’re indeed sending info to the API, I would advise using Make. Send a payload to a Make webhook, then add a HTTP module to send those pieces of info to your API.
Once the API gives back a report ID (I assume it does, based on your comment), then you can write that ID straight to your database instead of having to go to Pabbly.
Hola!
I will try to give you another way to solve your request:
Do you need to make a GET or POST request?
Unfortunately, the Fetch JSON plugin does not support POST requests but using a JS code you can do it depending on parameters you are using.
If you need a GET request, your JS code can be something like this:
var Response = await fetch('https://yesno.wtf/api')
const Result= await Response.json();
return Result.answer + "|" + Result.forced + "|" + Result.image
but pay attention to Thinh’s advice:
Using JavaScript to do it from the app is not an ideal way, since it might trigger the payload to send more times than you want it to.
The plan B to avoid the above problem is to create a button to fire the API call manually, otherwise, you will face this problem, a headache 
Are you using a cURL command? If so, share the cURL command to evaluate how can it be converted to a JS code or better, use this online tool to convert it automatically.
Saludos!
2 Likes
@ThinhDinh Yes, that is basically what I’m doing. I’m not using Make 'cause I already have a Pabbly account and it works just fine, but is a lot of work creating all the calls to create the report, update an existing one, etc. But I think this may be a better choice: to work everything from outside and just send the basic information using the webhook. Ideally I wanted the return data to write directly to the Glide table, but I’m writing it to a Google sheet, which I already attached to my app. So I guess, I can work with this. I just wanted a more straightforward solution.
Hi @gvalero My first option was to use a javascript to generate the call but I would have create more calls and validate each one.
This is what I was using:
fetch("https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com", {
"method": "POST",
"headers": {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Bearer abc123abc123abc123abc123abc123abc123abc123abc123"
}
})
.then((res) => res.text())
.then(console.log.bind(console))
.catch(console.error.bind(console));
But it returns nothing when I run it using a button to “Fetch a report” for me.
I generated this code using https://paw.cloud/. Very good.
Ok, I understand better. Here there are 2 points to keep in mind:
1)- This kind of syntax isn’t supported by JS plugin… I have lived this pain before 
fetch("https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com", {
"method": "POST",
"headers": {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Bearer abc123abc123abc123abc123abc123abc123abc123abc123"
}
})
.then((res) => res.text())
.then(console.log.bind(console))
.catch(console.error.bind(console));
The right syntax must be something like:
var data= await fetch('https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer abc123abc123abc123abc123abc123abc123abc123abc123'
},
});
const json = await data.text();
return json
The reason? … Glide’s JS plugin doesn’t support the Promise.prototype.then() method nor console.log() function… I mean, these statements:
.then((res) => res.text())
.then(console.log.bind(console))
.catch(console.error.bind(console));
2)- If we run my JS code version in Glide, we receive an error message caused by a CORS policy so, we need to use a CORS proxy instead and change a bit your URL.
Your new URL is now:
https://corsanywhere.herokuapp.com/https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com
where https://corsanywhere.herokuapp.com is our CORS proxy and the final JS code is this:
var data= await fetch('https://corsanywhere.herokuapp.com/https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer abc123abc123abc123abc123abc123abc123abc123abc123'
},
});
const json = await data.text();
return json
Finally, we got the right results and enjoy the fireworks! 
David time ago warned about the problem with Bearer authorization if the Fetch JSON plugin is used but now, I can confirm with your case that using the JavaScript plugin we can get good results working with Bearer authorization. It’s a great news @Tim_Gestels
BTW @globalint … I didn’t know your cool tool to create reports, it looks very useful! 
Saludos y feliz día!
1 Like
None of this is true. You have to await the fetch(...).then(...) expression. You do not understand the code you are writing–it is not a matter of Glide not supporting it.
none? Please help me understand this then! 
I don’t want to bother you but this case is important for me and some “stranger things” are beyond my current JS knowledge.
Some example can be useful.
Gracias!
@gvalero Thanks for all the testing and feedback!
@david I would be interesting to see a code sample to get to the expected result. I could not find a solved similar case in the community.
Thank you all!!!
Hi again,
I think we have a semantic problem and where to find the result in a Glide column
This @globalint 's code will work in Glide but the result is not shown in any column:
fetch("https://smartseoreport.com/api/v1/reports?url=https%3A%2F%exampledomain.com", {
"method": "POST",
"headers": {
"Content-Type": "application/x-www-form-urlencoded",
"Authorization": "Bearer abc123abc123abc123abc123abc123abc123abc123abc123"
}
})
.then((res) => res.text())
.then(console.log.bind(console))
.catch(console.error.bind(console));
To see the result, we have to use browser’s developer console. In Google Chrome, we will see data here (Console section):
and this is what David tries to say (I think… sorry if I’m wrong).
The problem is that we want to get results in a column so, we have to use return statement to see results in a column instead of console.log() function because of using it with .then(…) nothing works.
That is the point and the doubt to clarify.