TTC

Theo's Typesafe Cult•2y ago

Mordi

server side auth & react query

I am migration a old project that used t3 & nextjs 12. I have removed the old t3-stuff, such as sessionProvidersessionProvider, and am trying to just use getServerAuthSessiongetServerAuthSession instead of

useSession

useSession

as it seems to be the preferred way to auth. But How do I deal with components that used auth and fetched data. I want to use getServerAuthSessiongetServerAuthSession, meaning the component has to be a server component. But I also need to fetch some data, via react-query, so the component has to be a client component.

Reading through the docs of react-query, they use HydrationBoundaryHydrationBoundary to prefetch on the server then they dehydrate and pass it as props a client component. But this gives me an error on the import of HydrationBoundaryHydrationBoundary: "Module '"@tanstack/react-query"' has no exported member 'HydrationBoundary'."

TLDR: I don't know what steps to take to migrate a pages (client) component like this: https://github.com/Mordi490/lineup-larry/blob/main/src/pages/lineup/%5Bid%5D.tsx to app router. Check out the "chore/nextjs_13_migration"-branch if you want to see the latest progress on the app router migration.

• has auth & uses auth to render the page differently, but I want to use getServerAuthSessiongetServerAuthSession since that seems to be the recommendation ==> server side comp
• uses react-query to fetch data ==> client component

GitHub

lineup-larry/src/pages/lineup/[id].tsx at main · Mordi490/lineup-la...

Contribute to Mordi490/lineup-larry development by creating an account on GitHub.