How to load a list of items efficiently?

[ryan-eiv]

I want to allow users to edit each item in displayed in a list. Each <Item> component has its own data fetching / mutation hitting the item endpoint /api/item/[itemId]

On load, does this mean that I'd be kicking off a bunch of api calls to /api/item/[itemId] for each item, in addition to the data I'm already getting from /api/items (to get the list of items in the first place).

Is there a more efficient way to do this? How can I leverage an API endpoint where I get all the items? For example, how can I share data from /api/items across the entire list of items?

[cajias]

I have a similar access pattern. Here is the approach I'm using:

• I have a component ItemComponent (could also be implemented as a hook) that fetches all of the entries at once calling an API similar to your /api/items. The component only returns a single element by id as defined in the props. This means that if you want to list all element, you would have to fetch a list of ids and map them to ItemComponents. This way, the caller can deal with individual items by id, but under the hood, the whole list is being fetched.
• If a single component is updated, I query the backend for the item via /api/item/[itemId] patch the /api/items cache locally
• Additions are handled the same way: if the id passed is not in the cache, try to fetch it. If it exists, patch the cache, otherwise error.

When we want to filter/reorder the list, we do so via backend apis that return a list of ids. This is important, because it means they will not cause another bulk fetch of a sub-set of the items. The cache remains the same, but some components are shown/hidden as per the list. This is how we also handle deletions: the id list doesn't contain a deleted id so we don't render the component, even though it's still part of the cached payload. If ever in doubt about cache inconsistencies, reload the whole list.

Hope this helps