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
sessionProvider, and am trying to just use getServerAuthSession instead of 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 getServerAuthSession, 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 HydrationBoundary 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 HydrationBoundary: "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 getServerAuthSession since that seems to be the recommendation ==> server side comp
- uses react-query to fetch data ==> client componentGitHub
lineup-larry/src/pages/lineup/[id].tsx at main · Mordi490/lineup-la...
Contribute to Mordi490/lineup-larry development by creating an account on GitHub.
2 Replies
These are the docs I referred to: https://tanstack.com/query/latest/docs/react/guides/advanced-ssr#server-components--nextjs-app-router
Advanced Server Rendering | TanStack Query Docs
Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router.
You might want to read the Server Rendering & Hydration guide before this one as it teaches the basics for using React Query with SSR, and Performance & Request Waterfalls as well as Pre...
or am I silly for moving away from using sessionProvider