T
TanStack•3mo ago
generous-apricot

Question on Advanced SSR Docs

Documentation: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr I'm following the TanStack Query Advanced SSR guide and noticed a potential inconsistency between the initial setup and the App Router example. In the initial setup: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#initial-setup A getQueryClient function is defined to ensure that the same QueryClient instance is reused on the Client Components, and to include default options like staleTime for Server Components: 
function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 60 * 1000,
      },
    },
  })
}

function getQueryClient() {
  if (isServer) {
    // Server: always make a new query client
    return makeQueryClient()
  } else {
    // Browser: make a new query client if we don't already have one
    if (!browserQueryClient) browserQueryClient = makeQueryClient()
    return browserQueryClient
  }
}
function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 60 * 1000,
      },
    },
  })
}

function getQueryClient() {
  if (isServer) {
    // Server: always make a new query client
    return makeQueryClient()
  } else {
    // Browser: make a new query client if we don't already have one
    if (!browserQueryClient) browserQueryClient = makeQueryClient()
    return browserQueryClient
  }
}
However, in the later prefetching example for App Router, https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#prefetching-and-dehydrating-data the QueryClient is created directly like this: 
export default async function PostsPage() {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
  })
export default async function PostsPage() {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
  })
Question: 1. In the example above, the QueryClient created does not options such as stale time right? 2. For prefetching : Should I be using queryClient = newQueryClient() as per documentation or queryClient = getQueryClient() // method created from initial setup
Advanced Server Rendering | TanStack Query React 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 before this on...
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?