How to fetch Airtable records in chunks when FlatList reaches bottom in React Native?

Other Questions Airtable
1

I’m trying to get more than 100 records from Airtable in my React Native app. The API only gives 100 records by default, so I’ve used offset. But now I want to show these records in smaller groups when the user scrolls to the bottom of the FlatList.

Here’s what I’ve done so far:

const AirtableComponent = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentOffset, setCurrentOffset] = useState(0);
  const chunkSize = 10;

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

  async function fetchData() {
    setLoading(true);
    // Airtable API call here
    const newData = await getAirtableRecords(chunkSize, currentOffset);
    setData([...data, ...newData]);
    setCurrentOffset(newData.length ? currentOffset + chunkSize : null);
    setLoading(false);
  }

  function renderItem({ item }) {
    return <RecordCard data={item.fields} />;
  }

  function loadMoreData() {
    if (!loading && currentOffset !== null) {
      fetchData();
    }
  }

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      onEndReached={loadMoreData}
      onEndReachedThreshold={0.1}
    />
  );
};

The problem is all records are loading at once instead of in chunks. What am I doing wrong? How can I make it load records in smaller batches as the user scrolls?

2

I encountered a similar issue with Airtable pagination in React Native. The problem lies in how you’re managing the offset. Instead of incrementing by a fixed chunk size, update it based on the actual number of records fetched.

Try modifying your fetchData function like this:

async function fetchData() {
  setLoading(true);
  const newData = await getAirtableRecords(chunkSize, currentOffset);
  setData(prevData => [...prevData, ...newData]);
  setCurrentOffset(prevOffset => prevOffset + newData.length);
  setLoading(false);
}

This approach ensures you’re only requesting new records each time. Also, consider implementing a check to stop fetching when you’ve reached the end of available records. This should resolve your chunking issue and provide a smoother scrolling experience.

3

I’ve dealt with this exact problem before. The key is to manage your state correctly and implement proper error handling. Here’s what worked for me:

Use a separate state for the total number of records, implement error handling in your API call, and add a check to stop fetching when all records are loaded. This strategy ensures that you’re not trying to fetch data continuously when there’s nothing left.

Here’s a snippet that demonstrates these changes:

const [totalRecords, setTotalRecords] = useState(null);

async function fetchData() {
  if (loading || (totalRecords !== null && data.length >= totalRecords)) return;

  setLoading(true);
  try {
    const { records, total } = await getAirtableRecords(chunkSize, currentOffset);
    if (totalRecords === null) setTotalRecords(total);
    setData(prevData => [...prevData, ...records]);
    setCurrentOffset(prevOffset => prevOffset + records.length);
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    setLoading(false);
  }
}

This approach should solve your chunking issue and provide a smoother user experience. Let me know if you need any clarification!

4

hey, seems ur offset update f’s messed up. try using: setCurrentOffset(prev => prev + newData.length). that way, only new records load when you scroll. lmk if it helps!