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

[Bill_French]

Tiago_Formosinho_San:

I think that should be fine as it is working well for the get

That looks okay but you might try using a table name instead of a view name. I say this only because I’m unsure about Axios requirements - best to eliminate this as a potential cause.

Since you’re getting a 401 are you absolutely sure that the API key of the user with access to the base granted read and write authority? This is unlikely to be the issue, but I always like to ask the obvious because that would cause the behavior you are experiencing - read/GET works, write/POST fails.

[Tiago_Formosinh · Accepted solution]

JonathanBowen:

‘Content-Type’: ‘application/json’

Thank you! I think the order was the thing that was wrong!

const data = {
      "records": [
        {
          "fields": {
            "Name": name,
            "Email": email,
          }
        }
      ]
    }
    
    let url = "https://api.airtable.com/v0/" + app_id + "/" + view
    let axiosConfig = { headers: { Authorization: "Bearer " + app_key , 'Content-Type': 'application/json' } }
    axios
      .post(
        url,
        data,
        axiosConfig
      )
      .then(resp => console.log(resp))
      .catch(error => console.log(error))

Like this works!
Thank you so much for the help!
Really appreciate!

[snow_jhon]

Since you’re getting a 401 are you absolutely sure that the API key of the user with access to the base granted read and write authority? This is unlikely to be the issue, but I always like to ask the obvious because that would cause the behavior you are experiencing - read/GET works, write/POST fails.

[Tiago_Formosinh]

@snow_jhon, nope the issue was that my axiosConfig was incomplete. ‘Content-Type’: ‘application/json’ needs to be there.

[Tiago_Formosinh]

By the way, the reason I was trying to implement this was because I wanted to put a contact from in my blog. I actually wrote about it on this post https://tiagofsanchez.netlify.com/2019-10-06-blog-series-building-a-contact-form-with-airtable/ it anyone is keen to have a read.
Again, thank you for the help.

[Boston_Jones]

As a developer you get to create a database with a very nice to use interface.

[Michael_Preston]

I can confirm this was the exact problem and solution I had as well.

I think my issue was not wrapping the headers inside a property like you did:

    let axiosConfig = { headers: { Authorization: "Bearer " + app_key , 'Content-Type': 'application/json' } }

Mine was:

const headers = {
            'Authorization': `Bearer <apiKey>`,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        };

        axios.post(url, data, headers).then((result) => {
            Log(result)
            let raw = formatRecords(result?.data?.records);
            state.value.record = raw;
            Log("state.value.records", state.value.records);
        }).catch(error => {
            loading.value = false;
            error.value = error;
        })

This makes sense, if axios was looking for a “headers” prop, but found no such prop.