feat: tanstack query provider

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import {
     ColorSchemeScript,
     mantineHtmlProps,
@@ -8,10 +8,11 @@ import {
 } from "@mantine/core";
 import { theme } from "@/theme";
 import "@/app/global.css";
-import { Notifications } from "@mantine/notifications";
-import ReduxProvider from "@/providers/ReduxProvider";
 import { ModalsProvider } from "@mantine/modals";
+import { Notifications } from "@mantine/notifications";
 import { modals } from "@/modals/modals";
+import { ReactQueryProvider } from "@/providers/ReactQueryProvider";
+import ReduxProvider from "@/providers/ReduxProvider";
 
 export const metadata = {
     title: "CRM LogiDex",
@@ -53,14 +54,16 @@ export default function RootLayout({ children }: Props) {
                 <MantineProvider
                     theme={theme}
                     defaultColorScheme={"auto"}>
-                    <ReduxProvider>
-                        <ModalsProvider
-                            labels={{ confirm: "Да", cancel: "Нет" }}
-                            modals={modals}>
-                            {children}
-                        </ModalsProvider>
-                    </ReduxProvider>
-                    <Notifications position="bottom-right" />
+                    <ReactQueryProvider>
+                        <ReduxProvider>
+                            <ModalsProvider
+                                labels={{ confirm: "Да", cancel: "Нет" }}
+                                modals={modals}>
+                                {children}
+                            </ModalsProvider>
+                        </ReduxProvider>
+                        <Notifications position="bottom-right" />
+                    </ReactQueryProvider>
                 </MantineProvider>
             </body>
         </html>

src/providers/ReactQueryProvider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+type Props = {
+    children: ReactNode;
+};
+
+export function ReactQueryProvider({ children }: Props) {
+    const [queryClient] = useState(
+        () =>
+            new QueryClient({
+                defaultOptions: {
+                    queries: {
+                        staleTime: 3 * 60 * 1000,
+                    },
+                },
+            })
+    );
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            {children}
+        </QueryClientProvider>
+    );
+}