perf(react): introduce tanstack query

.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
     'plugin:import/typescript',
     'plugin:jsx-a11y/recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
     'eslint-config-prettier',
   ],
   settings: {
@@ -24,4 +25,5 @@ module.exports = {
     'react/jsx-uses-react': 'off',
     'import/no-unresolved': ['error', { ignore: ['^geojson'] }],
   },
+  "plugins": ["@tanstack/query"]
 }

package.json

@@ -23,6 +23,8 @@
   "dependencies": {
     "@fontsource/roboto": "^5.0.13",
     "@hello-pangea/dnd": "^16.6.0",
+    "@tanstack/react-query": "^5.45.1",
+    "@tanstack/react-query-devtools": "^5.45.1",
     "@tanstack/react-router": "^1.36.3",
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.9.12",
@@ -55,6 +57,7 @@
     "@playwright/test": "^1.44.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@tanstack/eslint-plugin-query": "^5.43.1",
     "@tanstack/router-devtools": "^1.36.3",
     "@tanstack/router-vite-plugin": "^1.37.0",
     "@testing-library/jest-dom": "^6.4.6",

src/routes/__root.tsx

@@ -14,6 +14,15 @@ const TanStackRouterDevtools =
       )
     : () => null
 
+const TanStackQueryDevtools =
+  process.env.NODE_ENV === 'development'
+    ? React.lazy(() =>
+        import('@tanstack/react-query-devtools').then((res) => ({
+          default: res.ReactQueryDevtools,
+        })),
+      )
+    : () => null
+
 export const Route = createRootRoute({
   component: () => (
     <Providers>
@@ -26,7 +35,8 @@ export const Route = createRootRoute({
         <Footer />
       </div>
       <Suspense>
-        <TanStackRouterDevtools position="bottom-right" />
+        <TanStackRouterDevtools position="bottom-left" />
+        <TanStackQueryDevtools position="bottom" initialIsOpen={false} />
       </Suspense>
     </Providers>
   ),

src/routes/about/-screens/AboutScreen.test.tsx

@@ -4,6 +4,7 @@ import AboutScreen from './AboutScreen'
 import React from 'react'
 import { LanguageProvider } from '../../../services/providers/language/LanguageProvider'
 import { Language } from '../../../@types/language'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const mocks = vi.hoisted(() => ({ get: vi.fn() }))
 
@@ -21,8 +22,13 @@ vi.mock('axios', async (importActual) => {
 })
 
 describe('About Page', () => {
-  const renderWithLanguage = (children: React.ReactNode, language: Language = 'en') => {
-    render(<LanguageProvider initialLanguage={language}>{children}</LanguageProvider>)
+  const queryClient = new QueryClient()
+  const renderWithProviders = (children: React.ReactNode, language: Language = 'en') => {
+    render(
+      <QueryClientProvider client={queryClient}>
+        <LanguageProvider initialLanguage={language}>{children}</LanguageProvider>
+      </QueryClientProvider>,
+    )
   }
 
   const version = 'v1.2.3'
@@ -33,21 +39,21 @@ describe('About Page', () => {
   })
 
   it('load page', () => {
-    renderWithLanguage(<AboutScreen />)
+    renderWithProviders(<AboutScreen />)
     waitFor(() => {
       expect(screen.getByText('An app dealing with GPS files.')).toBeInTheDocument()
     })
   })
 
   it('load page german page', () => {
-    renderWithLanguage(<AboutScreen />, 'de')
+    renderWithProviders(<AboutScreen />, 'de')
     waitFor(() => {
       expect(screen.getByText('Eine Anwendung zum Bearbeiten von GPS-Dateien.')).toBeInTheDocument()
     })
   })
 
   it('show version of backend', () => {
-    renderWithLanguage(<AboutScreen />)
+    renderWithProviders(<AboutScreen />)
 
     waitFor(async () => {
       expect(await screen.findByText(version)).toBeInTheDocument()