Post to Airtable not working, but GET is OK

[Tiago_Formosinh]

So this is what I am using to get my data from airtable

import axios from "axios"
formSubmitHandler = e => {
   
    axios
      .get(
        "https://api.airtable.com/v0/" + app_id + "/" + view,
        { headers: { Authorization: "Bearer " + app_key } },
      )
      .then(resp => console.log(resp))
      .catch(error => console.log(error))
    e.preventDefault()
  }

This works very well, however when I try to post something into the same table and now using this:

formSubmitHandler = e => {
    const { name, email } = this.state
    const data = {
      "records": [
        {
          "fields": {
            "Name": name,
            "Email": email,
          }
        }
      ]
    }
    console.log(data)
    axios
      .post(
        "https://api.airtable.com/v0/" + app_id + "/" + view,
        { headers: { Authorization: "Bearer " + app_key } },
        data
      )
      .then(resp => console.log(resp))
      .catch(error => console.log(error))
    e.preventDefault()
  }

It doesn’t work and I always get ERROR 401, and that shouldn’t be the case as I already managed to get the information out of my airtable.

Any ideas why this is happening?

Thank you,
Tiago

[JonathanBowen]

Hi @Tiago_Formosinho_San - not sure if Axios is taking care of this for you, but looking at the AT API, I think you need to set the Content-Type header in a POST request (not required in a GET).

curl -v -X POST https://api.airtable.com/v0/APP_ID/Events \
  -H "Authorization: Bearer API_KEY" \
  -H "Content-Type: application/json" \
  --data '{
  "records": [
    {
      "fields": {
        "Name": "Event 1",
        "Date": "2019-09-16"
      }
    },
    {
      "fields": {
        "Name": "Event 2",
        "Date": "2019-10-01"
      }
    }
  ]
}' 

JB

[Tiago_Formosinh]

Hi @JonathanBowen, thank you for the super prompt repy!
well, get also needs it

curl https://api.airtable.com/v0//MailingList/
  -H "Authorization: Bearer YOUR_API_KEY"
EXAMPLE RESPONSE
{
    "id": "recEx8a5ewvtGGF3u",
    "fields": {
        "Email": "tiago@tiago.test",
        "Name": "Tiago"
    },
    "createdTime": "2019-09-26T03:47:45.000Z"
}

and if I take out from my axios, it doesn’t work so I need to use it for the get.

 axios
      .get(
        "https://api.airtable.com/v0/" + app_id + "/" + view,
        { headers: { Authorization: "Bearer " + app_key } },
        {data}
      )
      .then(resp => console.log(resp))
      .catch(error => console.log(error))

[JonathanBowen]

What I was trying to say was both GET and POST need this:

-H "Authorization: Bearer API_KEY" \

But it looks like POST also needs this:

-H "Content-Type: application/json" \

Have you tried a POST with “Content-Type: application/json”?

[Tiago_Formosinh]

Yes, I have tried that as well…

axios
      .post(
        url,
        {
          headers: {
            "Authorization": "Bearer " + app_key,
            "Content-Type": "application/json"
          }
        },
        data
      )
      .then(resp => console.log(resp))
      .catch(error => console.log(error))

But it does’t work :frowning:

Any other recommendation so that I can try?

Super thank you for the help.

[Bill_French]

@Tiago_Formosinho_San,

The error you mentioned (401) suggests your troubles are security related and that has me thinking Content-Type is probably not the issue.

Tiago_Formosinho_San:

app_id + “/” + view

Describe for me what the value of view looks like? Is it URL-encoded?

[Tiago_Formosinh]

Thank @Bill.French!

const view = "MailingList"
const app_id = "MYAPPID"
const app_key = "MYAPPKEY"
const url = "https://api.airtable.com/v0/" + app_id + "/" + view;

The url would then be https://api.airtable.com/v0/MYAPPID/MailingList

Does it make sense?
I think that should be fine as it is working well for the get

[JonathanBowen]

Hi @Tiago_Formosinho_San - this worked for me:

<script type="text/javascript">

  const data = {
        "records": [
          {
            "fields": {
              "Name": "Event 7",
              "Date": "2019-10-02"
            }
          }
        ]
      };

  let axiosConfig = {
    headers: {
        'Authorization': 'Bearer YOUR_API_KEY_HERE',
        'Content-Type': 'application/json'
    }
  };
axios.post('https://api.airtable.com/v0/YOUR_APP_ID_HERE/YOUR_TABLE_NAME_HERE', data, axiosConfig)
    .then(function (response) {
      // handle success
      console.log(response);
    })
    .catch(function (error) {
      // handle error
      console.log(error);
    })
    .finally(function () {
      // always executed
    });

</script> 

Can you work this into your code?

JB

[JonathanBowen]

(forget the “finally” function - not mandatory, I think. Was just copying some Axios boilerplate)

[JonathanBowen]

Looking at your code above you’ve got:

axios.post(url, config/headers, data)

I think you need:

axios.post(url, data, config/headers)