sacred-emerald

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

QueryClient

created does not options such as stale time right?
2. For prefetching :
Should I be using

queryClient = newQueryClient()

queryClient = newQueryClient()

as per documentation
or

queryClient = getQueryClient() // method created from initial setup

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...

TanStack•10mo ago

sacred-emerald

Question on Advanced SSR Docs

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
  }
}

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

QueryClient

created does not options such as stale time right?
2. For prefetching :
Should I be using

queryClient = newQueryClient()

queryClient = newQueryClient()

as per documentation
or

queryClient = getQueryClient() // method created from initial setup

queryClient = getQueryClient() // method created from initial setup

Advanced Server Rendering | TanStack Query React Docs

Question on Advanced SSR Docs

Question on Advanced SSR Docs

Similar Threads

Similar Threads

Similar Threads