How to approach cross dependencies between data types?

[leandertolksdorf]

Assume you have two endpoints, for example:

• /items sending: [{ "id" : 1, "name" : "MacBook" }]
• /carts sending: [{ "id" : 1, "itemIds" : [ 1 ] }]

We create useItems() like: const useItems = () => useSWR("/items")
and useCarts() like:

const useCarts = () => {
  const items = useItems();
  const carts = useSWR("/carts");
  
  const expandedCarts = carts.map(cart => ({ 
    ...cart, 
    items: cart.itemIds.map(itemId => items.find(item => item.id === itemId))
  }))

  return { ...carts, data: expandedCarts }
}

Let someone now mutate the item with id 1, for example changing the name.
useItem() gives us the correct data after revalidation, but useCarts still has the old data.

What's the best way to handle such common cases of dependent data?