diff --git a/package.json b/package.json
index b4b4152..fc4ffab 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"react": "^17.0.2",
"react-datetime": "^3.0.4",
"react-dom": "^17.0.2",
+ "react-query": "^3.34.12",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-virtualized-auto-sizer": "^1.0.5",
diff --git a/src/App.tsx b/src/App.tsx
index 92d6389..219ecac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,21 +7,28 @@ import {
Route,
Redirect,
} from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
import Home from "./pages/Home";
import theme from "./theme";
+const queryClient = new QueryClient();
+
export const App: React.FC = () => (
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/components/GraphWrapper/graphWrapper.test.tsx b/src/components/GraphWrapper/graphWrapper.test.tsx
index ae58cd1..8a39168 100644
--- a/src/components/GraphWrapper/graphWrapper.test.tsx
+++ b/src/components/GraphWrapper/graphWrapper.test.tsx
@@ -12,8 +12,11 @@ import { queryEntities } from "../../services/queryEntity";
import constants from "../../utils/constants";
import { useGlobalStore } from "../../store/global";
-const { defaultStartTimestamp, defaultStepValue, defaultEndTimestamp } =
- constants;
+const {
+ defaultStartTimestamp,
+ defaultStepValue,
+ defaultEndTimestamp,
+} = constants;
const TestComponent = () => {
const { changeRoute } = useGlobalStore();
diff --git a/src/components/GraphWrapper/index.tsx b/src/components/GraphWrapper/index.tsx
index fea4ba4..dc62896 100644
--- a/src/components/GraphWrapper/index.tsx
+++ b/src/components/GraphWrapper/index.tsx
@@ -20,10 +20,16 @@ interface PageProps {
const GraphWrapper: React.FC = (props: PageProps) => {
const { selectedRoutePath } = props;
- const { selectedStartTimestamp, selectedEndTimestamp, selectedStepValue } =
- useTimeQuerierStore();
+ const {
+ selectedStartTimestamp,
+ selectedEndTimestamp,
+ selectedStepValue,
+ } = useTimeQuerierStore();
- const { data, error, status } = useFetch>(
+ const { data, error, isLoading, isFetching, isError } = useFetch<
+ apiResponse
+ >(
+ "graph",
queryEntities(
selectedRoutePath,
selectedStartTimestamp,
@@ -32,7 +38,7 @@ const GraphWrapper: React.FC = (props: PageProps) => {
)
);
- if (error) {
+ if (isError) {
return (
= (props: PageProps) => {
>
- {error}
+ {error?.response?.data}
An unexpected error occurred while processing the graph.
@@ -57,7 +63,7 @@ const GraphWrapper: React.FC = (props: PageProps) => {
);
}
- if (status === "fetching" || status === "init")
+ if (isLoading || isFetching)
return (
@@ -90,7 +96,7 @@ const GraphWrapper: React.FC = (props: PageProps) => {
return (
-
+
);
diff --git a/src/components/MachineSelector/index.tsx b/src/components/MachineSelector/index.tsx
index 9b1acce..42c61df 100644
--- a/src/components/MachineSelector/index.tsx
+++ b/src/components/MachineSelector/index.tsx
@@ -13,36 +13,38 @@ import { apiResponse, machineResponse } from "../../utils/types";
const MachineSelector: React.FC = () => {
const { selectedMachine, changeSelectedMachine } = useGlobalStore();
- const { data, error, status } = useFetch>(
- getActiveMachines()
- );
- const machines = data ? data.data.machines : [];
+ const { data, error, isFetching, isLoading, isError, isFetched } = useFetch<
+ apiResponse
+ >("machines", getActiveMachines());
+
+ const machines = data ? data.data.data.machines : [];
useEffect(() => {
if (machines.length) changeSelectedMachine(machines[0]);
}, [data]);
- if (error) {
+ if (isError) {
return (
- {error}
+ {error?.response?.data}
);
}
- if (status === "fetching" || status === "init") {
+ if (isFetching || isLoading) {
return (
);
}
+
return (