Trying to load more than 100 Airtable records in batches during FlatList scrolling in React Native. Check out this revised code:
const KEY = "NEW_KEY";
const DATABASE = "DatabaseId";
const TABLE = "NewTable";
const LIMIT = 10;
let currentToken = null;
async function fetchEntries() {
const res = await fetch(`https://api.airtable.com/v0/${DATABASE}/${TABLE}?pageSize=${LIMIT}&offset=${currentToken}`, {
headers: { Authorization: `Bearer ${KEY}` }
});
const result = await res.json();
currentToken = result.offset;
return result.records;
}
Where might my approach be going wrong?
The challenge might not only be with the way the offset token is handled, but also with the conditions under which each fetch is triggered. In my experience, it helps to ensure that the next device request only runs when the existing state of data shows that there are more records to fetch. You may consider verifying that the offset is appended only when it exists. It is also beneficial to incorporate detailed error handling around the fetch call, so that unexpected endpoints or network issues do not end the pagination sequence abruptly.
I have experimented with similar implementations and found that often the issue lies not with the pagination code itself but with how the token is managed between requests. One factor may be that in some cases the API returns an undefined offset once the end of records is reached. This means that you might need to add an additional check to avoid making a new request when there is no offset. Additionally, thoroughly handling error cases and ensuring that your state updates correctly can prevent unintentional duplicate requests and improve performance.