feat: tanstack query provider

package.json

@@ -21,6 +21,7 @@
     "@reduxjs/toolkit": "^2.8.2",
     "@tabler/icons-react": "^3.34.0",
     "@tailwindcss/postcss": "^4.1.11",
+    "@tanstack/react-query": "^5.83.0",
     "axios": "^1.11.0",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.7",

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,6 +54,7 @@ export default function RootLayout({ children }: Props) {
                 <MantineProvider
                     theme={theme}
                     defaultColorScheme={"auto"}>
+                    <ReactQueryProvider>
                         <ReduxProvider>
                             <ModalsProvider
                                 labels={{ confirm: "Да", cancel: "Нет" }}
@@ -61,6 +63,7 @@ export default function RootLayout({ children }: Props) {
                             </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>
+    );
+}

yarn.lock

@@ -3640,6 +3640,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:5.83.0":
+  version: 5.83.0
+  resolution: "@tanstack/query-core@npm:5.83.0"
+  checksum: 10c0/e6dc480bc99eaca552a9ad65423788b60368cf99308681252fc7dbe42a3f2c1c978db0d3471cc3349b9112cfb4d967ace4e192a1d7e987e30c5c1ff74809c77c
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:^5.83.0":
+  version: 5.83.0
+  resolution: "@tanstack/react-query@npm:5.83.0"
+  dependencies:
+    "@tanstack/query-core": "npm:5.83.0"
+  peerDependencies:
+    react: ^18 || ^19
+  checksum: 10c0/883229f9219ca906a54d7caafd44d59b57db5dbe87e954f8a7027f460e9f8b97842dfbd0d676dc3111d577baf312c64f6c1fdd67cd1e4b0f0bf574e29670c606
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:10.4.0, @testing-library/dom@npm:^10.4.0":
   version: 10.4.0
   resolution: "@testing-library/dom@npm:10.4.0"
@@ -5920,6 +5938,7 @@ __metadata:
     "@storybook/react": "npm:^8.6.8"
     "@tabler/icons-react": "npm:^3.34.0"
     "@tailwindcss/postcss": "npm:^4.1.11"
+    "@tanstack/react-query": "npm:^5.83.0"
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/jest-dom": "npm:^6.6.3"
     "@testing-library/react": "npm:^16.3.0"