DataView: Paginating external sources

[onbjerg]

Hi,

For Apiary we want to use the DataView component to display a list of orgs on mainnet. However, it is not possible to set the number of pages that exist; this property is calculated on the number of entries passed to the component itself.

I'd like to request that the DataView component also works for cases where you want to paginate from a source where you don't have all the entries on hand at the same time.

[bpierre]

Yes!

What would you think having a special object that could be passed to entries?

<DataView
  entries={{
    total: 328,
    fetch: async function({

      // The page index.
      page,

      // The entries range (e.g. [0, 10] or [10, 20] if we exclude the end),
      // which can be useful depending on how the data is fetched.
      range,

      // The number of entries per page, which can be useful too.
      entriesPerPage,
    }) {
      const data = await fetchMyData(page)

      // DataView would have a loading state until the promise completes.
      // If it fails, we could have an error state with a retry button.
      return entries
    }
  }}
/>

[onbjerg]

Yeah, that looks good! However I'm not sure if moving data fetching in to a hook would be better practice, since I'm just catching up with that concept.

Would it minimise complexity if we just passed the total number of entries to the DataView component and then used onPageChange? 🤔