Created a custom wrapper for useQuery hook from react-query

eslint.config.mjs

@@ -9,6 +9,7 @@ import testingLibrary from 'eslint-plugin-testing-library'
 import globals from 'globals'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import pluginQuery from '@tanstack/eslint-plugin-query'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -19,6 +20,7 @@ const compat = new FlatCompat({
 })
 
 export default [
+  ...pluginQuery.configs['flat/recommended'],
   {
     ignores: ['src/assets/*', 'src/stories/assets/*', '.storybook/**/*']
   },

package.json

@@ -14,6 +14,7 @@
     "@mui/material": "^5.14.16",
     "@mui/x-date-pickers": "^5.0.20",
     "@reduxjs/toolkit": "^2.2.7",
+    "@tanstack/react-query": "^5.62.7",
     "@tinymce/tinymce-react": "^5.1.1",
     "allotment": "^1.19.3",
     "axios": "^1.6.0",
@@ -57,6 +58,8 @@
     "@storybook/react": "^8.2.6",
     "@storybook/react-vite": "^8.2.6",
     "@storybook/test": "^8.2.6",
+    "@tanstack/eslint-plugin-query": "^5.62.1",
+    "@tanstack/react-query-devtools": "^5.62.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^16.0.0",

src/App.tsx

@@ -2,17 +2,20 @@ import { Outlet } from 'react-router-dom'
 import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
 import { ChatProvider } from '~/context/chat-context'
 import { theme } from './styles/app-theme/custom-mui.styles'
+import QueryProvider from '~/QueryProvider'
 import PopupsProvider from './PopupsProvider'
 
 const App = () => {
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
-        <PopupsProvider>
-          <ChatProvider>
-            <Outlet />
-          </ChatProvider>
-        </PopupsProvider>
+        <QueryProvider>
+          <PopupsProvider>
+            <ChatProvider>
+              <Outlet />
+            </ChatProvider>
+          </PopupsProvider>
+        </QueryProvider>
       </ThemeProvider>
     </StyledEngineProvider>
   )

src/QueryProvider.tsx

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+import { queryClient } from '~/plugins/queryClient'
+
+type QueryProviderProps = {
+  children: ReactNode
+}
+
+const QueryProvider: FC<QueryProviderProps> = ({ children }) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools />
+      {children}
+    </QueryClientProvider>
+  )
+}
+
+export default QueryProvider

src/hooks/use-query.tsx

@@ -0,0 +1,17 @@
+import { useQuery as useReactQuery } from '@tanstack/react-query'
+
+type UseQueryProps<TData> = {
+  queryKey: string[]
+  queryFn: () => Promise<TData>
+}
+
+const useQuery = <TData,>({ queryKey, queryFn }: UseQueryProps<TData>) => {
+  const { isLoading, error, data, refetch } = useReactQuery<TData>({
+    queryKey,
+    queryFn
+  })
+
+  return { isLoading, error, data, refetch }
+}
+
+export default useQuery

src/plugins/queryClient.ts

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient()

tests/unit/hooks/use-query.spec.js

@@ -0,0 +1,18 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { vi } from 'vitest'
+
+import QueryProvider from '~/QueryProvider'
+import useQuery from '~/hooks/use-query'
+
+describe('useQuery', () => {
+  const queryKey = ['testKey']
+  const queryFn = vi.fn()
+
+  it('should return loading state initially', () => {
+    const { result } = renderHook(() => useQuery({ queryKey, queryFn }), {
+      wrapper: QueryProvider
+    })
+
+    expect(result.current.isLoading).toBe(true)
+  })
+})