Isomorphic queries with useSuspenseQuery
This is borderline a Next question, but you all would probably know just as well if not better.
Streaming works incredibly well with ReactQueryStreamedHydration and useSuspenseQuery. That said, the isomorphic queries run by useSuspenseQuery raises an interesting problem. Any production system will need some sort of authentication token sent with the data requests.
With fetches from the browser, those headers / cookies will be sent along automatically (assuming you have credentials: include). But for fetches coming from the server, Next will require you to add whatever headers you need, presumably the cookie at the very least.
How do you all recommend this be managed? next/headers cannot be imported into client bundles. One solution I can imagine would be to grab the current headers, put them into context, and read that context inside of whatever (client) component you have useSuspenseQuery in. Detect if you're in a browser, and if so, just set credentials: include. Or if you're on the server (ie initial SSR on the client component), use the server headers you just put onto context.
Is there an easier way I'm missing?
Streaming works incredibly well with ReactQueryStreamedHydration and useSuspenseQuery. That said, the isomorphic queries run by useSuspenseQuery raises an interesting problem. Any production system will need some sort of authentication token sent with the data requests.
With fetches from the browser, those headers / cookies will be sent along automatically (assuming you have credentials: include). But for fetches coming from the server, Next will require you to add whatever headers you need, presumably the cookie at the very least.
How do you all recommend this be managed? next/headers cannot be imported into client bundles. One solution I can imagine would be to grab the current headers, put them into context, and read that context inside of whatever (client) component you have useSuspenseQuery in. Detect if you're in a browser, and if so, just set credentials: include. Or if you're on the server (ie initial SSR on the client component), use the server headers you just put onto context.
Is there an easier way I'm missing?
