How to work with Fragment when there are data-altering functions in between components

[RareSecond]

So we are trying to go all-in on the fragments approach that is being proposed in a recent blog post by The Guild.

However, while trying to implement it, we came across an issue that we've had some issues wrapping our head around.

Say we have a child component that renders a CompletedOrder, let's say some pseudo code of the render function

CompletedOrder

return (
  <>
    <div>{order.title}</div>
    <div>{order.timestamp}</div>
  </>
);

There is also a parent that gets in all the orders, and renders based on the order status

OrderList

return (
  <>
    {orders.map(order => {
      if (order.completed) {
        return <CompletedOrder order={order} />
      }

      return <PendingOrder order={order} />
    })}
  </>
)

And then there's another parent that does the data fetching and sorts the orders per week, so it returns a Map where the keys are the weeknumbers and the values are the orders for that weeknumber.

So this initial top parent does the fetching itself.

Orders

  Imagine there's code here that does the fetching, does the mapping over the returned array of orders and passes the Map down to the OrderList component

But the big question is: how can we type the props correctly and how can we do the root query that is then composed of all the fragments.

Thanks in advance!

[KammererTob]

You should define a fragment in your CompletedOrder component (and PendingOrder component) and then use those fragments in the OrderList (either inside its own fragment or a query). So every child component needs to have its own fragment.
Type of the fragments would be Fragment<typeof CompletedOrderFragment> for example.