Does TanStack (React) Query work with the Next.js App router (React Server Components)

[FleetAdmiralJakob]

Can I query my data in Server Components with TanStack Query?

[TkDodo]

https://tanstack.com/query/v4/docs/react/guides/ssr#using-the-app-directory-in-nextjs-13

[FleetAdmiralJakob]

Hey @TkDodo, Tanstack Query will not work in React Server Components?

[umrzoq-toshkentov]

Yes because it depends on Provider and as written React official docs, React Server component does not support React hooks

[ikonicity-airban]

Well,
I also had this trouble today and started questioning if I should forego the use of react query altogether,
I called my superior to seek some insight and suggested we switch to Client Component implementation across the entire application, I was still not satisfied, so I hit the docs. 🚀📄📜

Advanced Server Rendering

[k4l3b4]

Hey @TkDodo how are you, i was wondering whether i could use SSR prefetch in the Advanced Server Rendering example in the RootLayout it self, or if their is any work around to use tanstack on the rootLayout, thanks in advance and for all your work!

Currently reading the example code and i noticed:

function getQueryClient() {
  if (isServer) {
    // Server: always make a new query client
    return makeQueryClient()

so in theory i should be able to use makeQueryClient() on the RootLayout and use prefetching hooks as normal which would look like:

export default function RootLayout({ children }: PropsWithChildren) {
  const { initDataRaw } = retrieveLaunchParams();
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
      },
    },
  })

  const data = queryClient.prefetchQuery({
    queryKey: ['current_user'],
    queryFn: () => validateUser({ value: initDataRaw! }),
  })