Add react-query provider

sfbrigade · Feb 22, 2024 · 71aad06 · 71aad06
1 parent fe8efa4
commit 71aad06
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/client/src/main.jsx b/client/src/main.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from './App.jsx';
 import './index.css';
 import '@mantine/core/styles.css';
@@ -9,8 +10,10 @@ import { MantineProvider } from '@mantine/core';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <MantineProvider theme={theme}>
-      <App />
-    </MantineProvider>
+    <QueryClientProvider client={QueryClient}>
+      <MantineProvider theme={theme}>
+        <App />
+      </MantineProvider>
+    </QueryClientProvider>
   </React.StrictMode>,
 );
diff --git a/client/src/pages/index.jsx b/client/src/pages/index.jsx
@@ -1,6 +1,22 @@
 import React from 'react';
+import { useQuery } from '@tanstack/react-query';
 
 function Index() {
+  const { isFetching, error, data } = useQuery({
+    queryKey: ['users'],
+    queryFn: () =>
+      fetch('/api/v1/users').then((res) => {
+        return res.json();
+      }),
+  });
+  if (isFetching) {
+    return <main>Index is loading</main>;
+  }
+
+  if (error) {
+    return <main>Index is failed</main>;
+  }
+
   return <main>Index is working</main>;
 }