Use more than one fetch request in “Code by Zapier” action using Javascript

Question

I'm currently trying to make a "Code by Zapier" action for making API requests to IronWifi in order to create a user and fill it with information/details.

Currently I've been able to do this with four "Code by Zapier" actions. Each action is one fetch request.

However, I was looking to combine all four API requests into one action. It seems that when a fetch request is used that a 'callback' must be used right after. And I believe that this forces the action to stop at that moment.

Currently I've tried to write code for creating the user and then adding a first name. The code I have so far is as follows:

var headers = {
  "Authorization": "Bearer 22ef59a2eb2a6939f5bd26bb43ff8b2d4d9b24ab",
  "Content-Type": "application/json"
};

var url = "https://us-east1.ironwifi.com/api/users";

var username = inputData.name;


var data = JSON.stringify({"username":username});

//First fetch request (API hit) for creating a user in IronWifi
var user = fetch(url, {method: "POST", headers: headers, body: data}).then(function(binaryResponse) {
  return binaryResponse.json();
}).then(function(jsonResponse) {
  callback(null, {result: jsonResponse.id});
}).catch(callback);

url = url + "/" + user.result;

var firstName = inputData.first
data = JSON.stringify({"firstname":firstName});

//Second fetch request (API hit) for giving the user a first name
var nameFirst = fetch(url, {method: "PATCH", headers: headers, body: data}).then(function(binaryResponse) {
  return binaryResponse.json();
}).then(function(jsonResponse) {
  callback(null, {result: JSON.stringify(jsonResponse)});
}).catch(callback);

var output = {user: user, firstname: nameFirst};
return output;

It seems though that the second fetch request is never being executed but the first fetch request is being executed. Would there be a way to have these fetch requests execute successfully in a sequential order?

Answer 1

The source of your confusion here is that you're using a very old style of existing an asynchronous function. When callback is run, then the function exits and your second requests is never called. Instead, you should use await , a better way to write asynchronous JS code.

callback is still mentioned in the Zapier docs, but it also notes that await is available (see here ).

Try something like this:

const headers = {
  Authorization: "Bearer 22ef59a2eb2a6939f5bd26bb43ff8b2d4d9b24ab",
  "Content-Type": "application/json",
};
const url = "https://us-east1.ironwifi.com/api/users";

// User request setup
const username = inputData.name;
const userBody = JSON.stringify({ username: username });

// First fetch request (API hit) for creating a user in IronWifi
const userResponse = await fetch(url, {
  method: "POST",
  headers,
  body: userBody,
});
const userData = await userResponse.json();
// do error checking?

// Name request setup
const nameUrl = `${url}/${userData.id.result}`; // double check .id.result

const firstname = inputData.first;
const nameBody = JSON.stringify({ firstname });

// Second fetch request (API hit) for giving the user a first name
const nameResponse = await fetch(url, {
  method: "PATCH",
  headers,
  body: nameBody,
});
const nameData = await nameResponse.json();
// do error checking?

return { user, firstname };

That code probably won't work right out of the box - I have no idea what the actual responses look like. But, it should get you moving in the right direction.

---

Separately, you should reset your API key ( 22ef59... ) and audit any usage of it. If it was a valid token, anyone that read this question will have been able to use it.