Hello,
I’m working on implementing a “Load More” functionality directly within a RedwoodJS Cell component. My goal is to allow users to fetch additional data upon clicking a “Load More” button, and then append these new results to the already displayed list of items, effectively accumulating the results without navigating away or reloading the entire dataset.
Here’s the challenge:
I am fairly new to Redwood and Graphql. I understand that Redwood Cells encapsulate the data fetching lifecycle and don’t directly expose functions like fetchMore
as you might find in Apollo Client’s useQuery
hook. Given this, I’m seeking guidance on the best way to achieve the following within a Cell:
- Trigger Additional Fetches: My thought was to just call a “fetchMore” like method from within the cell from a button and merge data together manually. But I don’t think “fetchMore” is exposed.
const loadMore = async () => {
const newOffset = offset + offsetIncrement
const { data, error } = fetchMore({ // not available
variables: {
startDate,
endDate,
direction,
limit: limit,
offset: newOffset,
},
})
if (error) {
console.error('Error loading more', error)
}
// TODO: merge data
setNumberOfLoads(numberOfLoads + 1)
setTotal(total + data.length)
setOffset(newOffset)
}
- Best Practices: Are there any recommended patterns or practices within the RedwoodJS framework for achieving this kind of functionality while maintaining the benefits of using Cells?
I have looked at a few posts like :
But I don’t understand the approaches mentioned there.
Any examples, suggestions, or insights on how to approach this would be greatly appreciated.