JavaScript call to Netlify Function?

Support
1

Hii,

I’m experimenting with Netlify Functions, I’m trying to do an API call through a Netlify Function by submitting a form. But how do I do this?

The function is working as expected, but I’m unable to pass data to the function to use in the API call.
Also, how can this, if the function is receiving data?

Gr,

Andy

2

I’m struggling to understand which side you’re having an issue with.

To pass data with your request you could use fetch:

Within the function you would retrieve the data from the request object, see:

3

Hi @nathanmartin,

Ok, I might understand the struggling.

I’ll try again, I know how the fetching/posting data works in JavaScript, so JavaScript itself isn’t the problem for this.
Receiving data through the request ok, but how can I test this during development? Since it’s server sided, it won’t log in the browser’s console or I can’t debug in the frontend.

Hope that’s more clear!

Gr,

Andy

4

@andylemaire As I understand it with the Netlify CLI you can simulate running your functions locally, and log to your terminal.

See:
https://cli.netlify.com/functions-dev#serving-functions-locally

5

@nathanmartin there’s the problem. I know how to run/execute a function and indeed I can see the log then, but I don’t see any logging when I call the function from the frontend. Then there’s no logging…

6

If you’re looking for the function logs for execution on Netlify, not when simulated on your localhost, then you’d be looking for this documentation:

7

Thanks, but I am looking for logging on my localhost… :smiley:

8

@andylemaire Then you want what I posted in the message prior.

In all cases you won’t see the logs from your functions in the browser console because your functions aren’t executing in the browser.

You will see them where the function is running, so either in your terminal when you’re running the simulated function via the Netlify CLI, or in the Netlify proffered logs when executing in the cloud.

9

@nathanmartin thanks a lot for your help so far, I’m starting to get there but not 100%.

Now my next question is, how do I access the request data? I mean, normally I’d do something like req.body but that doesn’t return the correct value.

While when I just print the request req I see this:

NetlifyRequest [Request] {
  [Symbol(realm)]: {
    settingsObject: { baseUrl: undefined, origin: [Getter], policyContainer: [Object] }
  },
  [Symbol(state)]: {
    method: 'POST',
    localURLsOnly: false,
    unsafeRequest: false,
    body: {
      stream: undefined,
      source: '{"email_address":"test@test.com"}',
      length: ...
    },
...

So I’m struggling to get to the email address in the Netlify function.

10

@andylemaire, Netlify docs cover most of what you’ve asked (if not, let us know and we can fix it). But the new API basically uses the Web Standard Reuest object: Request - Web APIs | MDN (mozilla.org), so accessing the body should be req.body or even req.json() (there are more methods, please refer to the MDN docs).

When you say “not the correct value”, you might be getting a stream as request bodies are a stream by default.

11

Yes I do get a stream, that’s what my problem is.

12

@andylemaire I’m not sure if you saw, but that’s as per the documentation:

image

As @hrishikesh mentioned, you probably want req.json() or one of the other available methods:

image
image973×776 147 KB

13

Then I missed something in the docs, but it helped. So thanks a lot guys!