https://edu.duthanhduoc.com/learn/Next.Js-Super?lessonId=508

[utterances-bot]

Khu vực học tập | Được Edu

Được chỉ cung cấp các khóa học lập trình online chất lượng, nói không với khóa lởm!

https://edu.duthanhduoc.com/learn/Next.Js-Super?lessonId=508

[vannghia122003]

a Được cho e hỏi là trước a có nói Fetch API nó tích hợp cache sẵn rồi mà sao mình vẫn cần cài Tanstack Query ạ

[duthanhduoc]

a Được cho e hỏi là trước a có nói Fetch API nó tích hợp cache sẵn rồi mà sao mình vẫn cần cài Tanstack Query ạ

Tanstack Query anh dùng để fetching ở client component á em, fetch API cache chỉ khi em dùng server component thôi.

Chưa kể Tanstack Query khai báo giúp anh các state pending tiện lợi nữa

[mycvlnn]

A Được ơi. Ngày trước em có tích hợp với Tanstack query với Nextjs thì họ làm kiểu này. Em đang không hiểu lắm a có thể giải thích kỹ hơn về trường hợp này không?

// Document: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr

'use client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import React from 'react'
// import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

interface IProps {
  children: React.ReactNode
}

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

let browserQueryClient: QueryClient | undefined = undefined

function getQueryClient() {
  if (typeof window === 'undefined') {
    // Server: always make a new query client
    return makeQueryClient()
  } else {
    // Browser: make a new query client if we don't already have one
    // This is very important so we don't re-make a new client if React
    // suspends during the initial render. This may not be needed if we
    // have a suspense boundary BELOW the creation of the query client
    if (!browserQueryClient) browserQueryClient = makeQueryClient()
    return browserQueryClient
  }
}

const Provider: React.FC<IProps> = ({ children }) => {
  // NOTE: Avoid useState when initializing the query client if you don't
  //       have a suspense boundary between this and the code that may
  //       suspend because React will throw away the client on the initial
  //       render if it suspends and there is no boundary
  const queryClient = getQueryClient()

  // const [queryClient] = useState(getQueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
      {children}
    </QueryClientProvider>
  )
}

export default React.memo(Provider)