How to implement HydrationBoundary for Route Groups in Nextjs 14

[hadikman]

Hi
Thank you for your help in advance 🙏🏼

I have this app structure:

I want to add HydrationBoundary into root layout to have a single QueryClient but I have two root layouts:
(prodcuts)/layout.js
(rest-routes)/layout.js

If I implement HydrationBoundary for each on I would have two QueryClient, right? so if I mutate one of them, the other one won't change and I'll lose consistency between the app states (the app is an online shop and I'm dealing with orders, cart, etc.).
But I want to have a single QueryClient that is reused across all components.

How can I achieve this?

Thanks again

[TkDodo]

can you create a unified root layout above the two layouts and do it there?

[hadikman]

In this way, I would have an extra segment route like this:
example.com/extra/products
example.com/extra/rest-routes

Even I tried nested groups and it didn't work:
(root)
-- (products)
-- (rest-routes)

This wouldn't be nice. Is there no other solution?

[TkDodo]

looking at this example in the nextjs documentation, you can have a root layout.js followed by a couple of route groups. But really, you're asking pure next-js questions and I'm not suited to answer those

[hadikman]

Yes, it works. Thank you @TkDodo
I changed the the app structure:
layout.js
-- (products)
---- layout.js
---- ...
-- (rest-routes)
---- layout.js
---- ...

But adding page.js didn't work (page.js in root has conflict with page.js under (rest-routes)):
layout.js
page.js ❌
-- (products)
---- /products
------ layout.js
------ page.js
---- layout.js
---- ...
-- (rest-routes)
---- layout.js
---- page.js ❌
---- ...