Make a Post Request to the Airtable API with a Handler Function

Instructor: [0:01] If we head over to the index.js file, we can create a function that would handle our Airtable request. We can name this function handleAirtableData().

[0:16] This function would take in a body that you would post to our Airtable. We want a FETCH request that points to our Airtable API, and posts the body parameter, which is a key-value pair on the fields. We would define this [inaudible] function, but now we want to connect our function to our Airtable.

[0:45] We can do this using the parameters that we've previously stored in our environment variables, and also using this URL, as it contains the base ID and the Airtable table name. It also uses the API key for authentication. We would have to pass in an object into our FETCH function, so as to pass in the authentication required.

[1:10] If we paste in the link, we will have to change the API base ID to our environment variable that's already been defined in our angular.toml file. The first thing we want to change is the Airtable base ID, and because our table name is this string, we'll have to include the URL component into the URL as Airtable table name. Then, we can pass in the authentication requirements as an object.

[1:50] The first thing we want to define is the method that would be acted on this URL. We want it to be a POST method, because we're sending in data from a form into Airtable. Then, we just want to stringify the body using JSON.stringify. Now, we have to pass in a header, and add your authorization and the content type.

[2:14] The authorization would be our Airtable API key. This would be in the Bearer, and then followed by the API key. Since we've created this API key to be secret, we would not show in our angular.toml file, but we can still use it because we have put it into our Worker already. Then, we just want to return the content type of which the body would be displayed in.