Axios vs JavaScript SDK in React

[daniel_villegas]

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;
        }
      }
    );
};

[acco]

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