feat: used TanStack query

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@gitbeaker/rest": "^40.0.3",
+        "@tanstack/react-query": "^5.51.1",
         "axios": "^1.7.2",
         "next": "14.2.4",
         "react": "^18",
@@ -473,6 +474,30 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.51.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.1.tgz",
+      "integrity": "sha512-fJBMQMpo8/KSsWW5ratJR5+IFr7YNJ3K2kfP9l5XObYHsgfVy1w3FJUWU4FT2fj7+JMaEg33zOcNDBo0LMwHnw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.51.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.1.tgz",
+      "integrity": "sha512-s47HKFnQ4HOJAHoIiXcpna/roMMPZJPy6fJ6p4ZNVn8+/onlLBEDd1+xc8OnDuwgvecqkZD7Z2mnSRbcWefrKw==",
+      "dependencies": {
+        "@tanstack/query-core": "5.51.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@gitbeaker/rest": "^40.0.3",
+    "@tanstack/react-query": "^5.51.1",
     "axios": "^1.7.2",
     "next": "14.2.4",
     "react": "^18",

src/app/api/ReactQueryClientProvider.tsx

+// In Next.js, this file would be called: app/providers.jsx
+'use client'
+
+// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
+import {
+    isServer,
+    QueryClient,
+    QueryClientProvider,
+} from '@tanstack/react-query'
+
+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 (isServer) {
+        // 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
+    }
+}
+
+export default function Providers({ 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()
+
+    return (
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+}

src/app/layout.tsx

-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import type {Metadata} from "next";
+import {Inter} from "next/font/google";
 import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import Providers from "@/app/api/ReactQueryClientProvider";
+const inter = Inter({subsets: ["latin"]});
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+    title: "Create Next App",
+    description: "Generated by create next app",
 };
 
 export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
+                                       children,
+                                   }: Readonly<{
+    children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
+
+    return (
+        <html lang="en">
+            <body className={inter.className}>
+            <Providers>{children}</Providers>
+            </body>
+        </html>
+    );
 }