Home
Support Forums

How do I call a netlify function through the client side using a simple function invocation like NetlifyFuction()?

I have an API that want to access whenever a user clicks on a certain state on the US Map. I’d like to get the state id (ex: CA) and send it to the netlify function.
The netlify function would then get everything I need from the API and return it to the client side js file I have.
Is this possible?

1 Like

Hey Scott!

Yes indeed!

Assuming that you’re able to write whatever you need in the client-side JavaScript to handle the click, determine which state had been selected, and then make a request to suitable endpoint, then the rest of this would live in a Netlify Function.

Whenever you create a Netlify Function, Netlify will provision it for you behind the scenes and then give it a URL that you can use to invoke it. The URL is gets will be relative to the root of your site’s domain like this:

https://yoursite.com/.netlify/functions/FILE-NAME-OF-YOUR-FUNTION (without the file extension)

I think that using HTTP GET (rather than POST) would suit your use case, so perhaps the request you’d make to the Netlify function might look something like this:

https://yoursite.com/.netlify/functions/getStateInfo?state=THE-STATE-CODE

Then your Netlify Function could get the state from the querystring parameter, do whatever API lookup it needed to do, and return the data to the client-side code which requested it.

Here’s a good example of a serverless function which makes a request to an API to lookup weather information related to the lat/long data passed to it via a querystring. I bet that is close to what you’d need.

Does that answer your question?

3 Likes

Hey @philhawksworth
My search on how to invoke a Netlify function has led me to this thread.

Your answer actually helped me to set up a Netlify function that uses a parameter.

However, now I am wondering what the title of the thread says: how to actually call a Netlify function anywhere in the app? I know that using /.netlify/functions/function_name will execute it. But how to access it in the code?

In my specific case, I want to create a variable and set it equal to the output of the function, like so: “const data = …” and the dots represent the function I call with a parameter (/.netlify/functions/apicall?c=senate).

In the meantime I figured out how to call my Netlify function, however, I’m not sure this is the “correct” way of doing it:

async function apiCall(parameter) {
    const url = `/.netlify/functions/functionname?parameter=${parameter}`;
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (err) {
        console.log(err);
    }
}

That looks correct to me. Netlify functions aren’t invoked like a locally defined js function but work pretty much like API endpoints. You use axios or fetch like you have done.

1 Like

Hi @Dennis
Thank you for the feedback, I appreciate it!

I was running up against this same issue and this helped me! Thank you!

If I may add a followup question… does this mean all API calls in Netlify functions actually require 2 calls?

I need to Axios/Fetch the function endpoint, and then it Axios/Fetches the API? Just want to make srue that’s correct since it seems like a lot of extra moving parts, but maybe Fetches aren’t a big deal

In a lot of cases, yes. Unless all the logic and data the function needs is coming from the request, then it’ll need to invoke an API endpoint. It really depends on what you need.

1 Like

Sorry for the bump, but I cannot get this to work after 3 hours of trying.

Here is a JS Fiddle.

How do I return the data?

Thanks

Hi, @vcamp. That fiddle is calling https://functions.netlify.com/.netlify/functions/hello_async and parsing the response for JSON data. However, that API endpoint doesn’t return JSON data:

$ curl -s https://functions.netlify.com/.netlify/functions/hello_async
Hello, World

Also, there is a CORS error when trying to fetch that URL but not the other URL (https://jsonplaceholder.typicode.com/todos/1),

I hope this helps. If there are other questions, please reply anytime.