Help

Save the date! Join us on October 16 for our Product Ops launch event. Register here.

Axios vs JavaScript SDK in React

Topic Labels: API
2509 1
cancel
Showing results for 
Search instead for 
Did you mean: 
daniel_villegas
4 - Data Explorer
4 - Data Explorer

Hi friends. I am a new developer and have started using Airtable as a database for personal project with React, and I wanted to ask what are your thoughts on fetching data from Airtable’s API in my client-side application. Do you think it’s better to fetch the data using Axios or use the base().select() pattern from Airtable library?

For React specific:
I don’t understand how to return the data with the Airtable method

const useCharacters = () => {
  const base = new Airtable({ apiKey }).base(baseId);

// returns undefined
  return base("Characters")
    .select({
      view: "Main View",
    })
    .eachPage(
      function page(records, fetchNextPage) {
        records.forEach(function (record) {
          return record.fields
        });
        fetchNextPage();
      },
      function done(err) {
        if (err) {
          console.error(err);
          return;
        }
      }
    );
};
1 Reply 1
acco
6 - Interface Innovator
6 - Interface Innovator

Hey @daniel_villegas , welcome!

I don’t believe .eachPage returns anything. Instead, it just iterates through each page. So you’ll have to store the data somewhere, like this:

const data = [];

 base("Characters")
    .select({
      view: "Main View",
    })
    .eachPage(
      function page(records, fetchNextPage) {
        records.forEach(function (record) {
          data.push(record.fields)
        });
        fetchNextPage();
      },
      function done(err) {
        if (err) {
          console.error(err);
          return;
        }
      }
    );

  return data;

Does that difference make sense?

Now, for a personal/side project, connecting directly to Airtable from React is fine. But keep in mind your Airtable API token will be available to anyone who loads your React app (as the API token is stored right there, in your app’s code.) So they’ll be able to do anything to your base. If you’re sharing with strangers or publishing this project to the public web, you’ll want to move calls to Airtable to a back-end. (If you use eg Next.js + React, there’s a way to write API functions in Next that are hosted on the back-end)

Cheers,
Anthony