How can I fetch over 100 Airtable records in batches with React Native's FlatList during scroll?

Other Questions Airtable
1

Airtable’s API limits the number of records returned to 100 by default. To retrieve more than this amount, I have implemented an offset mechanism. However, I want to display these records in incremental batches as the user scrolls to the bottom of the list. Whenever the user reaches the end, additional records should be fetched.

Here’s my current approach:

const myApiKey = "MY_API_KEY";
const myBaseId = "MyBaseId";
const myTableName = "MyTable";
const myView = "MyGridView";
const recordsPerPage = 10;
const myBase = new Airtable({ apiKey: myApiKey }).base(myBaseId);

const MainComponent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [nextOffset, setNextOffset] = useState(0);

  useEffect(() => {
    setLoading(true);
    fetchRecords();
  }, []);

  async function fetchRecords() {
    setLoading(true);

    const result = await myBase(myTableName)
      .select({ view: myView, pageSize: recordsPerPage, offset: nextOffset })
      .all();

    setData(prevData => [...prevData, ...result]);

    if (result.offset) {
      setNextOffset(result.offset);
    } else {
      setNextOffset(0);
    }

    setLoading(false);
  }

  const renderDataItem = ({ item }) => {
    return <DataCard image={item.fields.imageField} />;
  };

  const renderLoadingFooter = () => {
    return loading ? <LoaderView size="large" /> : null;
  };

  const handleScrollEnd = () => {
    if (!loading && nextOffset !== undefined) {
      fetchRecords();
    }
  };

  return (
    <View style={styles.wrapper}>
      <FlatList
        data={data}
        renderItem={renderDataItem}
        keyExtractor={(item) => item.id}
        ListFooterComponent={renderLoadingFooter}
        onEndReached={handleScrollEnd}
        onEndReachedThreshold={0.5}
      />
    </View>
  );
};

export default MainComponent;

Despite this implementation, all records seem to load simultaneously instead of in batches. Could someone assist in identifying the issue?

2

It seems like there might be some confusion between handling the offset and pagination in the API request. When fetching records from Airtable, the offset you receive from the response should be used in the next API call to continue fetching from where you left off. One potential problem could be the use of result.offset. Ensure that you are receiving and using the offset from Airtable’s response correctly. Double-check that result.offset is being properly updated with each response. Also, verify that myBase.select() method correctly uses the offset as a parameter. Ideally, when calling select, the offset value should skip the already loaded records. If the offset is undefined or null for subsequent calls, ensure it is initiated and updated based on Airtable’s last response to continuously get new records.