This looks nice for a single query, but, like basically all the previous discussion around this, he skips over the case where you might need to kickoff fetching of dependent data.
So in your loader, you would have to fetch the data, transform it, extract a key for the second query and then prefetch that.
...and in your component you would have to do the exact thing again, except you probably have to write the transformation logic twice, because hooks don't compose well with promises.
Of course you might say that dependent queries are a bad practice anyways, but in the real world this happens quite a lot.
To be clear, Suspense was always bad at this. To my knowledge, there was never a good way to combine SWR and lazy fetching with Suspense. You may or may not have been lucky, if your queries mapped well to the component tree.
I would like to see a solution from either React-Router or Tanstack-Query, but both of them prefer discussing the problem away.
So in your loader, you would have to fetch the data, transform it, extract a key for the second query and then prefetch that.
...and in your component you would have to do the exact thing again, except you probably have to write the transformation logic twice, because hooks don't compose well with promises.
Of course you might say that dependent queries are a bad practice anyways, but in the real world this happens quite a lot.
To be clear, Suspense was always bad at this. To my knowledge, there was never a good way to combine SWR and lazy fetching with Suspense. You may or may not have been lucky, if your queries mapped well to the component tree.
I would like to see a solution from either React-Router or Tanstack-Query, but both of them prefer discussing the problem away.