Handling nested API calls with axios in Vue.js for Airtable linked records

Other Questions Airtable
1

I’m working on a Vue.js app that fetches data from Airtable using axios. My current setup works fine for getting basic table data, but I’m running into issues with linked records. In my main table, I have a field called “COMPANY” that connects to another table with details like “COMPANY_NAME” and “BUSINESS_TYPE”. When I try to access the nested data from the linked table, I get errors or undefined values. I think I need to make multiple API calls, maybe using axios.all(), but I’m not sure how to structure it properly. Has anyone dealt with this before?

const app = new Vue({
  el: '#main-app',
  data: {
    greeting: 'Hello from Vue',
    records: []
  },
  mounted() {
    this.fetchRecords();
  },
  methods: {
    fetchRecords() {
      const baseId = 'appXYZ123456789';
      const apiToken = 'keyABC987654321';
      
      axios.get(`https://api.airtable.com/v0/${baseId}/PROJECTS?api_key=${apiToken}`, {
        headers: { Authorization: `Bearer ${apiToken}` }
      })
      .then(response => {
        this.records = response.data.records;
      })
      .catch(err => {
        console.error(err);
      });
    }
  }
});

<div id="main-app">
  <h1>{{greeting}}</h1>
  <div v-for="(record, idx) in records" :key="idx">
    <div class="record-card">
      <p><strong>Start Date:</strong> {{ record.fields['START_DATE'] }}</p>
      <p><strong>Description:</strong> {{ record.fields['DESCRIPTION'] }}</p>
      <p><strong>Priority:</strong> {{ record.fields['PRIORITY'] }}</p>
      <p><strong>Company:</strong> {{ record.fields['COMPANY'] }}</p>
      <!-- This line causes issues -->
      <p><strong>Company Name:</strong> {{ record.fields['COMPANY']['COMPANY_NAME'] }}</p>
    </div>
  </div>
</div>
2

yeah, airtable linked records just show ids at first. try adding ?expand[]=COMPANY to your api call. then you’ll get the real company details instead of just the id. that should solve the problem!

3

Had the same issue building a project management dashboard. Airtable’s linked records just give you arrays of IDs at first, not the actual data you want to show. You can use the expand parameter like others mentioned, but heads up - it’ll bloat your responses if you’ve got tons of linked records. What worked better for me was making separate API calls for company data and mapping them in my Vue component. Store the company records in their own data property, then use a computed property to match up the IDs and grab the company names. This way you get better control over caching and won’t hit the API multiple times for projects under the same company.

4

Airtable’s linked records return arrays of IDs instead of actual values. The expand parameter works but kills performance since it grabs all linked data whether you need it or not. Here’s what I do instead - use Promise.all() to batch fetch just the company records you need. Pull the unique company IDs from your project records first, then hit your COMPANY table filtering by those specific IDs. Way more efficient and you control the data structure. Create a lookup object that maps company IDs to their details, then reference it in your template. No nested API calls needed.