Sammyt/install react query (#301)

* chore: install react query * feature: add query client in loader * chore: install eslint react query * refactor: rename config -> loaderData * feature: use query loader for config * feature: use react query for config * feature: add query on commit list and add a loader in nodes
data-drift · Jan 12, 2024 · 5e30a45 · 5e30a45
1 parent 234138d
commit 5e30a45
Show file tree

Hide file tree

Showing 12 changed files with 231 additions and 206 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@emotion/styled": "^11.11.0",
+    "@tanstack/react-query": "^5.17.9",
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -39,6 +40,7 @@
     "@storybook/react": "^7.4.6",
     "@storybook/react-vite": "^7.4.6",
     "@storybook/testing-library": "^0.2.2",
+    "@tanstack/eslint-plugin-query": "^5.17.7",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,15 +1,16 @@
 import "./App.css";
 import { RouterProvider } from "react-router-dom";
-import { router } from "./router";
+import { router, queryClient } from "./router";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import { QueryClientProvider } from "@tanstack/react-query";
 
 function App() {
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
       <ToastContainer />
-    </>
+    </QueryClientProvider>
   );
 }
 

diff --git a/frontend/src/components/Lineage/Lineage.tsx b/frontend/src/components/Lineage/Lineage.tsx
@@ -7,12 +7,16 @@ import type { LineageEvent } from "./MetricNode";
 import styled from "@emotion/styled";
 
 const CustomMetricNode: ComponentType<
-  NodeProps<{ label: string; events: LineageEvent[] }>
+  NodeProps<{ label: string; events: LineageEvent[]; eventsLoading: boolean }>
 > = ({ data, sourcePosition, targetPosition }) => {
   return (
     <div>
       {targetPosition && <Handle type="target" position={targetPosition} />}
-      <MetricNode metricName={data.label} events={data.events} />
+      <MetricNode
+        metricName={data.label}
+        events={data.events}
+        eventsLoading={data.eventsLoading}
+      />
 
       {sourcePosition && <Handle type="source" position={sourcePosition} />}
     </div>
@@ -33,7 +37,7 @@ const StyledContainer = styled.div`
   }
 `;
 
-function Lineage({ nodes: nodes, edges }: LineageProps) {
+function Lineage({ nodes, edges }: LineageProps) {
   const nodeTypes = useMemo(() => ({ metricNode: CustomMetricNode }), []);
 
   return (

diff --git a/frontend/src/components/Lineage/MetricNode.tsx b/frontend/src/components/Lineage/MetricNode.tsx
@@ -78,11 +78,13 @@ export type LineageEvent = {
 type MetricNodeProps = {
   metricName: string;
   events?: LineageEvent[];
+  eventsLoading?: boolean;
 };
 
 export const MetricNode = ({
   metricName = "",
   events = [],
+  eventsLoading,
 }: MetricNodeProps) => {
   const [expandedEvent, setExpandedEvent] = useState<
     LineageEvent["type"] | null
@@ -104,7 +106,9 @@ export const MetricNode = ({
   return (
     <StyledMetricNode>
       <strong>{metricName}</strong>
-      {events.length > 0 ? (
+      {eventsLoading ? (
+        <small>Loading</small>
+      ) : events.length > 0 ? (
         <ul>
           {events.map((event, index) => (
             <li key={index}>

diff --git a/frontend/src/pages/DisplayCommit/DisplayCommit.tsx b/frontend/src/pages/DisplayCommit/DisplayCommit.tsx
@@ -1,6 +1,6 @@
 import { parsePatch } from "../../services/patch.mapper";
 import { Params, useLoaderData, defer } from "react-router";
-import { getConfig, getPatchAndHeader } from "../../services/data-drift";
+import { getPatchAndHeader } from "../../services/data-drift";
 import styled from "@emotion/styled";
 import { DiffTable } from "./DiffTable";
 import { toast } from "react-toastify";
@@ -37,7 +37,6 @@ const getPatchFromApi = async ({ owner, repo, commitSHA }: CommitParam) => {
       repo,
       commitSHA,
     }),
-    getConfig({ owner, repo }),
   ]);
 
   if (patchToLarge) {

diff --git a/frontend/src/pages/DriftList.tsx b/frontend/src/pages/DriftList.tsx
@@ -1,8 +1,9 @@
 import { Params, useLoaderData } from "react-router";
-import { DDConfig, getCommitList, getConfig } from "../services/data-drift";
+import { DDConfig, configQuery, getCommitList } from "../services/data-drift";
 import { CommitList } from "../components/Commits/CommitList";
 import DriftCard from "../components/Commits/DriftCard";
 import styled from "@emotion/styled";
+import { QueryClient } from "@tanstack/react-query";
 
 function assertParamsIsDefined(
   params: Params<"owner" | "repo">
@@ -34,41 +35,44 @@ function queryParamsAreDefined(params: Record<string, string>): params is {
   return "periodKey" in params && "filepath" in params && "driftDate" in params;
 }
 
-const loader = async ({ params }: { params: Params<"owner" | "repo"> }) => {
-  assertParamsIsDefined(params);
-  const [result, config] = await Promise.all([
-    getCommitList(params),
-    getConfig(params),
-  ]);
-  const urlParams = Object.fromEntries(
-    new URLSearchParams(window.location.search)
-  );
-  if (queryParamsAreDefined(urlParams)) {
-    const urlParamsWithParent = {
-      ...urlParams,
-      parentData: extractParentsFromConfig(config, urlParams.filepath),
-    };
+const loader =
+  (queryClient: QueryClient) =>
+  async ({ params }: { params: Params<"owner" | "repo"> }) => {
+    assertParamsIsDefined(params);
+    const [result] = await Promise.all([getCommitList(params)]);
+    const query = configQuery(params);
+    const maybeConfig = queryClient.getQueryData<DDConfig>(query.queryKey);
+    const config =
+      maybeConfig !== undefined
+        ? maybeConfig
+        : await queryClient.fetchQuery(query);
+    const urlParams = Object.fromEntries(
+      new URLSearchParams(window.location.search)
+    );
+    if (queryParamsAreDefined(urlParams)) {
+      const urlParamsWithParent = {
+        ...urlParams,
+        parentData: extractParentsFromConfig(config, urlParams.filepath),
+      };
+      return {
+        data: result.data,
+        params,
+        urlParams: urlParamsWithParent,
+      };
+    }
     return {
       data: result.data,
       params,
-      config,
-      urlParams: urlParamsWithParent,
+      urlParams: {
+        periodKey: "",
+        filepath: "",
+        driftDate: "",
+        parentData: [],
+      },
     };
-  }
-  return {
-    data: result.data,
-    params,
-    config,
-    urlParams: {
-      periodKey: "",
-      filepath: "",
-      driftDate: "",
-      parentData: [],
-    },
   };
-};
 
-type LoaderData = Awaited<ReturnType<typeof loader>>;
+type LoaderData = Awaited<ReturnType<ReturnType<typeof loader>>>;
 
 const DriftListContainer = styled.div`
   display: flex;