add tanstack/react-query

src/app/providers/getQueryClient.ts

@@ -0,0 +1,31 @@
+import { QueryClient } from '@tanstack/react-query'
+import { cache } from 'react'
+
+const getQueryClientDefaultConfig = () => ({
+	defaultOptions: {
+		queries: {
+			staleTime: 60 * 1000,
+			refetchOnWindowFocus: false,
+			retry: 1,
+		},
+	},
+})
+
+export function makeQueryClient() {
+	return new QueryClient(getQueryClientDefaultConfig())
+}
+
+export const getQueryClient = cache(() => {
+
+	if (typeof window === 'undefined') {
+				return new QueryClient(getQueryClientDefaultConfig())
+	} else {
+		// @ts-ignore
+		if (!globalThis.__APP_QUERY_CLIENT__) {
+			// @ts-ignore
+			globalThis.__APP_QUERY_CLIENT__ = makeQueryClient()
+		}
+		// @ts-ignore
+		return globalThis.__APP_QUERY_CLIENT__
+	}
+})

src/app/providers/providers.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import {
+	isServer,
+	QueryClient,
+	QueryClientProvider,
+} from '@tanstack/react-query'
+
+export function makeQueryClient() {
+	return new QueryClient({
+		defaultOptions: {
+			queries: {
+				staleTime: 60 * 1000,
+			},
+		},
+	})
+}
+
+let browserQueryClient: QueryClient | undefined = undefined
+
+function getQueryClient() {
+	if (isServer) {
+		return makeQueryClient()
+	} else {
+		if (!browserQueryClient) browserQueryClient = makeQueryClient()
+		return browserQueryClient
+	}
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+	const queryClient = getQueryClient();
+
+	return (
+		<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+	)
+}