Add React-Query

app/root.tsx

@@ -6,10 +6,11 @@ import {
   Scripts,
   ScrollRestoration,
 } from "react-router";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React, { useState } from "react";
 
 import type { Route } from "./+types/root";
 import "./app.css";
-import React from "react";
 
 export const links: Route.LinksFunction = () => [];
 
@@ -32,7 +33,22 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-  return <Outlet/>;
+  const [queryClient] = useState(
+    () => 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,
+        }
+      }
+    })
+  );
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Outlet/>
+    </QueryClientProvider>
+  );
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {

eslint.config.js

@@ -3,11 +3,13 @@ import eslint from '@eslint/js';
 import tseslint from 'typescript-eslint';
 import eslintPluginReact from "eslint-plugin-react";
 import eslintPluginReactHooks from "eslint-plugin-react-hooks";
+import eslintPluginQuery from "@tanstack/eslint-plugin-query";
 
 // noinspection JSCheckFunctionSignatures
 export default defineConfig([
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
+  ...eslintPluginQuery.configs['flat/recommended'],
   {
     settings: {
       react: {
@@ -31,5 +33,4 @@ export default defineConfig([
   eslintPluginReact.configs.flat.recommended,
   eslintPluginReact.configs.flat['jsx-runtime'],
   eslintPluginReactHooks.configs['recommended-latest'],
-
 ]);

package.json

@@ -13,6 +13,7 @@
     "@react-router/fs-routes": "^7.4.1",
     "@react-router/node": "^7.4.1",
     "@react-router/serve": "^7.4.1",
+    "@tanstack/react-query": "^5.71.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "isbot": "^5.1.25",
@@ -27,6 +28,7 @@
     "@eslint/js": "^9.23.0",
     "@react-router/dev": "^7.4.1",
     "@tailwindcss/vite": "^4.1.1",
+    "@tanstack/eslint-plugin-query": "^5.71.5",
     "@types/node": "^20.17.30",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@react-router/serve':
         specifier: ^7.4.1
         version: 7.4.1(react-router@7.4.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(typescript@5.8.2)
+      '@tanstack/react-query':
+        specifier: ^5.71.5
+        version: 5.71.5(react@19.1.0)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -57,6 +60,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.1
         version: 4.1.1(vite@5.4.17(@types/node@20.17.30)(lightningcss@1.29.2))
+      '@tanstack/eslint-plugin-query':
+        specifier: ^5.71.5
+        version: 5.71.5(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2)
       '@types/node':
         specifier: ^20.17.30
         version: 20.17.30
@@ -1078,6 +1084,19 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6
 
+  '@tanstack/eslint-plugin-query@5.71.5':
+    resolution: {integrity: sha512-6EDWMUQc35HEYtZrX4yRP7vBXjUhNLwO0JwLzkV14lNpTlpnPbNUltvgh+cUJBh3awpOuUNNuxTL96BG3azLmw==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  '@tanstack/query-core@5.71.5':
+    resolution: {integrity: sha512-XOQ5SyjCdwhxyLksGKWSL5poqyEXYPDnsrZAzJm2LgrMm4Yh6VOrfC+IFosXreDw9HNqC11YAMY3HlfHjNzuaA==}
+
+  '@tanstack/react-query@5.71.5':
+    resolution: {integrity: sha512-WpxZWy4fDASjY+iAaXB+aY+LC95PQ34W6EWVkjJ0hdzWWbczFnr9nHvHkVDpwdR18I1NO8igNGQJFrLrgyzI8Q==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
@@ -4029,6 +4048,21 @@ snapshots:
       tailwindcss: 4.1.1
       vite: 5.4.17(@types/node@20.17.30)(lightningcss@1.29.2)
 
+  '@tanstack/eslint-plugin-query@5.71.5(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2)':
+    dependencies:
+      '@typescript-eslint/utils': 8.29.0(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2)
+      eslint: 9.23.0(jiti@2.4.2)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@tanstack/query-core@5.71.5': {}
+
+  '@tanstack/react-query@5.71.5(react@19.1.0)':
+    dependencies:
+      '@tanstack/query-core': 5.71.5
+      react: 19.1.0
+
   '@types/cookie@0.6.0': {}
 
   '@types/d3-hierarchy@1.1.11': {}