feat: add QueryProvider and related configurations for React Query integration

Author: hamidyfine

eslint.config.js

@@ -10,6 +10,7 @@
 import pluginJs from '@eslint/js';
 import stylisticPlugin from '@stylistic/eslint-plugin';
 import stylisticPluginMigrate from '@stylistic/eslint-plugin-migrate';
+import pluginQuery from '@tanstack/eslint-plugin-query';
 import pluginRouter from '@tanstack/eslint-plugin-router';
 import tsParser from '@typescript-eslint/parser';
 import importPlugin from 'eslint-plugin-import';
@@ -39,6 +40,7 @@ export default [
     reactPlugin.configs.flat['jsx-runtime'],
     pluginLingui.configs['flat/recommended'],
     ...pluginRouter.configs['flat/recommended'],
+    ...pluginQuery.configs['flat/recommended'],
     {
         files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
         languageOptions: {

package.json

@@ -42,6 +42,8 @@
     "@mantine/hooks": "^7.15.2",
     "@mantine/modals": "^7.15.2",
     "@mantine/notifications": "^7.15.2",
+    "@tanstack/react-query": "^5.62.15",
+    "@tanstack/react-query-devtools": "^5.62.15",
     "concurrently": "^9.1.0",
     "dayjs": "^1.11.13",
     "lucide-react": "^0.469.0",
@@ -58,6 +60,7 @@
     "@stylistic/eslint-plugin": "^2.12.1",
     "@stylistic/eslint-plugin-migrate": "^2.12.1",
     "@swc/jest": "^0.2.37",
+    "@tanstack/eslint-plugin-query": "^5.62.15",
     "@tanstack/eslint-plugin-router": "^1.87.6",
     "@tanstack/react-router": "^1.92.3",
     "@tanstack/router-devtools": "^1.92.3",
@@ -76,7 +79,6 @@
     "core-js": "^3.39.0",
     "cz-customizable": "^7.4.0",
     "eslint": "^9.17.0",
-    "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-import-newlines": "^1.4.0",

pnpm-lock.yaml

@@ -1 +1,2 @@
+export * from './query-client.config';
 export * from './theme.config';

src/configs/index.ts

@@ -0,0 +1,9 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const client = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+        },
+    },
+});

src/configs/query-client.config.ts

@@ -2,7 +2,7 @@ import { createRouter,RouterProvider } from '@tanstack/react-router';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { IntlProvider, ThemeProvider } from './providers';
+import { IntlProvider, QueryProvider, ThemeProvider } from './providers';
 import { routeTree } from './route-tree.gen';
 
 const router = createRouter({
@@ -24,7 +24,9 @@ if (!rootElement.innerHTML) {
         <StrictMode>
             <IntlProvider locale="en">
                 <ThemeProvider>
-                    <RouterProvider router={router} />
+                    <QueryProvider>
+                        <RouterProvider router={router} />
+                    </QueryProvider>
                 </ThemeProvider>
             </IntlProvider>
         </StrictMode>,

src/main.tsx

@@ -1,2 +1,3 @@
 export * from './intl';
+export * from './query';
 export * from './theme';

src/providers/index.ts

@@ -0,0 +1 @@
+export * from './query.provider';

src/providers/query/index.ts

@@ -0,0 +1,11 @@
+import { renderWrapper, screen } from '@/tests';
+
+describe('QueryProvider Component', () => {
+    it('should render children', async () => {
+        renderWrapper(
+            <div>Children of Theme Provider</div>,
+        );
+
+        expect(screen.getByText('Children of Theme Provider')).toBeInTheDocument();
+    });
+});

src/providers/query/query.provider.spec.tsx

@@ -0,0 +1,17 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type { PropsWithChildren } from 'react';
+
+import { client } from '@/configs';
+
+export const QueryProvider = ({ children }: PropsWithChildren) => {
+    return (
+        <QueryClientProvider client={client}>
+            {children}
+            <ReactQueryDevtools
+                buttonPosition="bottom-left"
+                initialIsOpen={false}
+            />
+        </QueryClientProvider>
+    );
+};