import { QueryClient, isServer} from "@tanstack/react-query"

function makeQueryClient(){
	return new QueryClient({
		defaultOptions:{
			queries:{
			staleTime: 60 * 1000
		},
	}
	})
}

let browserQueryClient: QueryClient | undefined = undefined;

export function getQueryClient(){
	if(isServer){
		return makeQueryClient()
	}else{
		if(!browserQueryClient) browserQueryClient = makeQueryClient()
		return  browserQueryClient
	}
}

Note: On the server, it returns a new instance of the query client. However, if we're not on the server, if you're on the browser, we use the same client in every component.

Provider:

"use client"
import {QueryClientProvider} from "@tanstack/react-query"
import {getQueryClient} from "./getQueryClient"

export function ReactQueryProvider({children}){
	const queryClient = getQueryClient()
	return(
		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
	)
}

**"use client"**
import {useQuery} from "@tanstack/react-query"
import {getPosts} from "@/services/get-post"

export async function Post(){
const queryClient = getQueryClient()

await {data}= useQuery({
  queryKey:["posts"],
  queryFn:getPosts
})

return(
  <div state={dehydrate(queryClient)}>
    <h1>post</h1>
    {
      data.map(post=>(
        <div>
          <h2>{post.name}</h2>
        </div>
      ))
    }
  </div>
)}