Implementing Pagination to Fetch Over 100 Airtable Records with React Native's FlatList on Scroll

Other Questions Airtable
1

When using the Airtable API, the default limit is set to 100 records per request. I have tried using the offset to retrieve additional records, but my current approach results in loading all records simultaneously instead of displaying them in batches as the user scrolls to the bottom of the list. I need assistance in restructuring my code to ensure proper pagination.

Here’s my implementation:

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 [paginationOffset, setPaginationOffset] = useState(0);

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

  async function fetchRecords() {
    setLoading(true);

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

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

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

    setLoading(false);
  }
  
  function renderItem({ item }) {
    return <CardComponent image={item.fields.imageUrl} />;
  }

  function renderLoading() {
    return loading ? <LoaderComponent size="large" /> : null;
  }

  function handleScrollEnd() {
    if (!loading && paginationOffset !== undefined) {
      fetchRecords();
    }
  }

  return (
    <Container>
      <FlatList
        data={data}
        renderItem={renderItem}
        numColumns={2}
        keyExtractor={(item) => item.id}
        ListFooterComponent={renderLoading}
        onEndReached={handleScrollEnd}
        onEndReachedThreshold={0}
        initialNumToRender={recordsPerPage}
      />
    </Container>
  );
};

export default MainComponent;

I am unsure why the records are being loaded all at once instead of in stages. Any guidance on this would be appreciated.

2

It seems your issue might stem from the incorrect use of the offset property in the Airtable API. Instead of setting up the useEffect to fetch all records at once, initiate it with just the first batch and add the scroll logic for further batches. Use getPageAsync with Airtable, which can handle pagination by fetching only a page at a time. Also, make sure the logic inside fetchRecords captures the next offset since you’re currently resetting paginationOffset to 0 after every call in your code. This might be why it loads everything when re-triggering fetch without a valid offset.