How to make a POST request to Airtable

We’ve recently released the Fetch component which currently gives you the ability to make GET requests directly in the builder. POST, PUT and DELETE requests will also be possible with the Fetch component in the future, but for now, those will have to be configured in code outside of the builder.

In the meantime, we’ll show you how to make a POST request by creating a very basic to-do list app (yes this is another to-do list tutorial…groundbreaking, right? ) in Draftbit with an Airtable back-end.

Note: To follow along with this tutorial, you should:

  1. Be familiar with using the command line.
  2. Make sure you’re set up with expo-cli (if you’re not, check this out). If you need to install expo-cli now, you’ll also need to make sure you have node.js installed on your machine as well.
  3. Have a code editor installed on your machine (if you don’t have one installed yet, I’ll be using VS Code in this tutorial).

Step 1: Building the Screens

For this app, we’ll create just two screens. One screen that will show us what’s on the to-do list (List Screen) and another screen (Post Screen) where you can add a new to-do.

List Screen

On this first screen, we’ll just add Text, Fetch (with a List inside of it, and Text inside that List) and a Button Solid.

On the first Text , set:

  • Style to Headline 2
  • Text Align to Center
  • Left Margin to 16

On the second Text , set:

  • Style to Headline 6
  • Text Align to Center

On the Button Solid, set:

  • Bottom, Left and Right Margin to 16

Let’s also switch over to the Draftbit - Dark theme because why not? :new_moon_with_face:

themeswitch

We’ll go back and configure the Fetch component once we have our Airtable set up.

Post Screen

This is the screen where we’ll enter our to-dos and also make the POST request to Airtable (hence the name Post Screen)

Let’s add a KeyboardAvoidingView to the screen and put Text and a Text Field - Solid inside of it. Outside of the KeyboardAvoidingView let’s add another Fetch component and Button Solid inside of that.

On the KeyboardAvoidingView, set:

  • Keyboard Vertical Offset to 60
  • Flex Grow to 1

On the Text Field - Solid, set:

  • Field Name to toDo (this will be important later)
  • Label to To-do

On the Text, set:

  • Style to Headline2
  • Text Align to Center

On the Button Solid, set:

  • Bottom, Left and Right Margin to 16

Just like before, we’ll come back and configure the Fetch component later after we’ve set up our Airtable.

Step 2: Setting up the Airtable

In your workspace, click Add a Base and select Start from Scratch in the dropdown.

Once you’re inside the base, delete the two fields on the right by right-clicking on the field name and selecting Delete field from the dropdown. Rename the remaining field toDo and you can also rename the Table if you’d like/

add a few to-dos in the toDo field. Next, click the Help button in the top right corner and select API documentation in the dropdown.

Once you’re on the API page for your base, select the List records section under the name of your Table in the left side bar.

select the show API Key checkbox on the top right of the base.

On the right side of the page, you will see something like this:

You will use that URL and the Authorization to build the query in Draftbit so make sure you have this Airtable tab open when you go back to the builder.

*Note: you can omit ?maxRecords=3&view=Grid%20view from the URL when you paste it into Draftbit in the next step.

Step 3: Connecting Airtable to Draftbit

Note: you can also refer to our documentation to do this.

List Screen

Select the Fetch component in the Layer Tree, open the Data panel in the config panel, and click Build Query. Paste the URL from your Airtable in the Request URL input. Next, Add the Authorization under the headers section.

Click Test to ensure the data is being pulled through properly. If you see your Airtable data displayed on the Results section, click Save to close the modal.

Next, select the List in the Layer Tree. In the Field dropdown in the Data panel on the left, select records.

Now, select the Text within the List in the Layer Tree. In the Field dropdown in the Data panel on the left, select fields.toDo.

Post Screen

Add the Airtable URL and Authorization section just like you did on the List Screen, but in the dropdown next to the Request URL input switch the request to POST.

postrequest

Step 4: Connecting Screens with Navigation

Click the Navigation button at the top of the builder. Click the icon at the top right of the panel to add a Root Navigator. Select the Root Navigator and click the Network icon again to add a Stack Navigator inside of it. Select the Stack Navigator and click the Phone Screen icon to add both of your screens inside of it.

datanavigation

List Screen

Select the Button Solid in the layer tree, open the Action panel in the config panel, click the Select an action... dropdown and select Navigate. In the Select a destination... dropdown, select Post Screen.

Post Screen

Do the same with the Button Solid, except select List Screen in the Select a destination... dropdown.

For more information on the different types of navigators and navigation in general, check our documentation.

Check to make sure everything looks good in Live Preview. Once everything looks good, it’s time to take this project out of Draftbit.

Step 5: Exporting from Draftbit

:rotating_light::rotating_light::rotating_light:If you don’t have expo-cli and a code editor installed then none of this will work! :rotating_light::rotating_light::rotating_light:

Click the View Code button at the top of the builder and click the Export Project button at the bottom of the modal that appears. Once the project has been downloaded, unzip the folder.

Open your terminal and navigate (or cd) into your project’s directory. Once you’re inside the directory, run npm install to install all the necessary dependencies.

After installation is complete, you can run the command expo start. This will generate a QR code just like the one generated while using Live Preview in Draftbit. Scan it on your phone to open up your project.

Similar to working in Draftbit, any changes you make and save while editing your code will be pushed to Expo and will appear on your phone.

Once you have everything installed and running, it’s time to open up your project in your code editor and start sending data to your Airtable!

Step 6: Editing the Code

For this tutorial we’ll only need to edit the PostScreen.js file inside of the screens directory.

Bring the Button back

If you navigate to this screen while your project is open in Expo, you’ll see that the button is missing. To bring it back, delete this portion of code from PostScreen.js and save.

if (loading) {
              return null
            }

            if (error) {
              return null
            }

            if (!data) return null

Initialize the state of the Text Field

Next, in the constructor where we’re initializing state, you’ll see:

this.state = {
      theme: Object.assign(props.theme, screenTheme)
    }

add toDo: null under the theme so you end up with this:

this.state = {
      theme: Object.assign(props.theme, screenTheme),
      toDo: null
    }

If you remember while building in Draftbit we set the field name of the Text Field - Solid to toDo to save the value of the text field.

Create the request body

From now on, all the editing will be done within the Fetch component. First we’re going to tell Airtable

If you go back to the Airtable API for your base, select TO-DOS TABLE on the left hand side and then go to the Create records section. Towards the bottom of the white section you’ll see "You can also include a single record object at the top level." Go ahead and click to make the example appear.

in the Fetch component, under the fetch policy prop (marked with the arrow),

add in:

body={JSON.stringify({
            fields: {
              toDo: this.state.toDo
            }
          })}

You can read more about JSON.stringify() here.

Define what we want to happen onResponse

Directly under where we just added the request body is an onResponse prop that looks like this:

onResponse={() => this.setState({ refreshing: false })}>
          {({ fetching: loading, failed: error, doFetch: refetch, data })

The documentation for react-request (the package that provides the Fetch component) defines this prop as “A function called anytime a response is received, whether from the network or cache.”

When we press the Add To-do inside of the Fetch component we want the value of the input to be send to Airtable and we want to go back to List Screen. To achieve this, we’ll change the onResponse function to:

onResponse={() => this.props.navigation.goBack()}>
          {({ fetching: loading, failed: error, doFetch, data })

Define what we want to happen onPress

Inside the Button component is an onPress prop that currently looks like:

onPress={() => {
                    this.props.navigation.navigate("PostScreen")
                  }}

Since we’re already handling navigating back to the List Screen in the onResponse function we just changed, we’ll switch this to:

onPress={() => {
                    doFetch()
                  }}>

And that’s it! Now that we’re done editing the code it’s time to…

Step 7: Test it Out!

On your computer, open up the Airtable that you’ve linked to your app. On your app, enter a to-do in the Text Field, and add it. If you did everything correctly, you should see what you just entered immediately appear in your Airtable. In your app, if you refresh the FlatList, you should see the new to-do you added appear in the list with the rest of the to-dos.

If it’s not working for you, double check your code :mag: If you’re still running into issues, ask for help on our Community site.

1 Like