Cache individual pipeline on pipelines fetch

packit · Jun 6, 2024 · 829258f · 829258f
1 parent 6c12442
commit 829258f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 39 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -138,6 +138,7 @@
     "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.4.0",
     "@storybook/types": "^7.4.0",
+    "@tanstack/react-query-devtools": "^5.40.1",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.1",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -15,6 +15,7 @@ import {
 import { routes } from "./app/routes";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React from "react";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 Sentry.init({
   // packit-service
@@ -60,6 +61,7 @@ const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
+      <ReactQueryDevtools />
     </QueryClientProvider>
   );
 };

diff --git a/frontend/src/app/Pipelines/PipelineDetail.tsx b/frontend/src/app/Pipelines/PipelineDetail.tsx
@@ -125,14 +125,6 @@ function getBuilderLabel(run: PipelineRun) {
 const PipelineDetail = () => {
   let { id } = useParams();
 
-  // Headings
-  const columns = [
-    { title: "" }, // space for forge icon
-    { title: "Trigger", transforms: [cellWidth(15)] },
-    { title: "Time Submitted", transforms: [cellWidth(10)] },
-    { title: "Jobs", transforms: [cellWidth(70)] },
-  ];
-
   const fetchData = () =>
     fetch(`${import.meta.env.VITE_API_URL}/runs/merged/${id}`).then(
       (response) => response.json(),
@@ -319,7 +311,6 @@ const PipelineDetail = () => {
           </CardBody>
         </Card>
       </PageSection>
-      <pre>{isLoading ? "{}" : JSON.stringify(data, null, 2)}</pre>
     </>
   );
 };

diff --git a/frontend/src/app/Pipelines/PipelinesTable.tsx b/frontend/src/app/Pipelines/PipelinesTable.tsx
@@ -20,7 +20,7 @@ import { StatusLabel } from "../StatusLabel/StatusLabel";
 import { Timestamp } from "../utils/Timestamp";
 import coprLogo from "../../static/copr.ico";
 import kojiLogo from "../../static/koji.ico";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
 
 interface StatusItem {
@@ -119,6 +119,8 @@ function getBuilderLabel(run: PipelineRun) {
 }
 
 const PipelinesTable = () => {
+  const queryClient = useQueryClient();
+
   // Headings
   const columns = [
     { title: "" }, // space for forge icon
@@ -131,7 +133,15 @@ const PipelinesTable = () => {
   const fetchData = ({ pageParam = 1 }) =>
     fetch(`${import.meta.env.VITE_API_URL}/runs?page=${pageParam}&per_page=20`)
       .then((response) => response.json())
-      .then((data: PipelineRun[]) => jsonToRow(data));
+      .then((data: PipelineRun[]) => {
+        data.forEach((run) =>
+          queryClient.setQueryData(["pipeline", run.merged_run_id.toString()], {
+            ...run,
+          }),
+        );
+
+        return jsonToRow(data);
+      });
 
   const { isInitialLoading, isError, fetchNextPage, data, isFetching } =
     useInfiniteQuery(["pipelines"], fetchData, {

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -3088,6 +3088,18 @@
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.33.0.tgz#7756da9a75a424e521622b1d84eb55b7a2b33715"
   integrity sha512-qYu73ptvnzRh6se2nyBIDHGBQvPY1XXl3yR769B7B6mIDD7s+EZhdlWHQ67JI6UOTFRaI7wupnTnwJ3gE0Mr/g==
 
+"@tanstack/[email protected]":
+  version "5.37.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.37.1.tgz#8dcfa1488b4f2e353be7eede6691b0ad9197183b"
+  integrity sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg==
+
+"@tanstack/react-query-devtools@^5.40.1":
+  version "5.40.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.40.1.tgz#35b29f5bb38882e53cf8f1d20b8aab840e2a416f"
+  integrity sha512-/AN2UsbuL+28/KSlBkVHq/4chHTEp4l2UWTKWixXbn4pprLQrZGmQTAKN4tYxZDuNwNZY5+Zp67pDfXj+F/UBA==
+  dependencies:
+    "@tanstack/query-devtools" "5.37.1"
+
 "@tanstack/react-query@^4.29.7":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.33.0.tgz#e927b0343a6ecaa948fee59e9ca98fe561062638"
@@ -8622,16 +8634,7 @@ strict-event-emitter@^0.4.3:
   resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz#ff347c8162b3e931e3ff5f02cfce6772c3b07eb3"
   integrity sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8709,14 +8712,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9659,7 +9655,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -9677,15 +9673,6 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"