How do I call a netlify lambda function from my React app?

Question

I am new to netlify and the serverless architecture. In react I would normally import an action into my component then call that action which would make a call to the server. Right now I am just trying to test my function locally and Im not sure where to import from or how exactly to call my function to see if it even works. Help would be greatly appreciated. Below is a very basic function Im trying to call to get started.

//in functions/test.js

import axios from 'axios'

exports.handler = function(event, context, callback) {
    axios.post('http://requestbin.fullcontact.com/1c50pcg1', {name: 'richard'}).then((response)=>{
      callback(null, {
        statusCode: 200,
        body: response.body
      })
    }).catch((err) => {
      console.log(err)
    })
}

Answer 1

In react I would normally import an action into my component then call that action which would make a call to the server

This is exactly what you do in a Serverless architecture where your "Server" is API Gateway. API Gateway will then proxy incoming requests to your Lambda function.

You are able to define HTTP specific methods to invoke your Lambda functions or you can also configure API Gateway to proxy ANY HTTP method to them. The routing would then need to be handled by yourself. Luckily, there are some packages that allow you to wrap a web framework (like Express) in front of your Lambda functions, so your routes could be handled by these types of frameworks.

Another option is to invoke your functions by using the JavaScript SDK and invoke your Lambda directly from the browser using its name. This approach, however, is not as flexible as you heavily rely on the function's name / ARN to invoke it, meaning any changes in your function's name or ARN (considering you're moving to a prod environment, for example) would directly affect your clients. Changes in your Lambda code could also imply that clients would need to change its implementation, which is definitely not a good practice. One other drawback is that handling the actions this way is much harder, as one button click would dictate what Lambda function to call. Your frontend could become messy very fast. Of course, there are some use cases where you'd prefer this approach over API Gateway's, but that would need to be thought out.

By using API Gateway, on the other hand, you are just making regular REST calls that will then trigger your Lambda functions. Any change in the Lambda functions will not affect the contract between clients and your REST APIs, so it ends up being much more flexible. Also, relying on HTTP methods is much easier than relying on functions' names / ARNs

Since you are already used to the React -> Server approach, I recommend you choose the API Gateway road.

You can see how to trigger Lambda functions through API Gateway in this tutorial.

If you want to invoke Lambda functions from the browser, then this tutorial may be handy.