task/wg-199-react-query-initial-setup

react/package.json

@@ -25,6 +25,7 @@
         "@reduxjs/toolkit": "^1.8.4",
         "@testing-library/react": "^13.4.0",
         "@types/leaflet.markercluster": "^1.5.1",
+        "axios": "^1.6.2",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
@@ -34,6 +35,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-leaflet": "^4.2.0",
+        "react-query": "^3.39.3",
         "react-redux": "^8.0.2",
         "react-router-dom": "^6.3.0"
     },

react/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useProjects } from './projects/useProjects';

react/src/hooks/projects/useProjects.ts

@@ -0,0 +1,14 @@
+import { UseQueryResult } from 'react-query';
+import { Project } from '../../types';
+import { useGet } from '../../requests';
+
+const useProjects = (): UseQueryResult<Project[]> => {
+  const query = useGet<Project[]>({
+    endpoint: '/projects/',
+    key: ['project'],
+    baseUrl: 'https://agave.designsafe-ci.org/geo/v2',
+  });
+  return query;
+};
+
+export default useProjects;

react/src/index.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import App from './AppRouter';
 import './index.css';
 import store from './redux/store';
 import { Provider } from 'react-redux';
 
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
     </Provider>
   </React.StrictMode>
 );

react/src/pages/MainMenu/MainMenu.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import {
-  useGetGeoapiProjectsQuery,
-  useGetGeoapiUserInfoQuery,
-} from '../../redux/api/geoapi';
+import { useProjects } from '../../hooks';
 
 function MainMenu() {
-  useGetGeoapiProjectsQuery();
-  useGetGeoapiUserInfoQuery();
-  return <h2>Main Menu</h2>;
+  const { data, isLoading, error } = useProjects();
+  return (
+    <>
+      <h2>Main Menu</h2>
+      <h5>You have {data?.length} projects. </h5>
+    </>
+  );
 }
 
 export default MainMenu;