Cache componentdigest get (#1018)

### TL;DR

Export the QueryClient instance and pass it to the PublishedComponentsLibrary to enable component caching.

### What changed?

- Exported the QueryClient instance from index.tsx to make it accessible throughout the application
- Modified the PublishedComponentsLibrary to accept a QueryClient in its constructor
- Updated the ComponentLibraryProvider to:
  - Use the QueryClient via useQueryClient hook
  - Create the componentLibraries map in a useMemo hook
  - Move the getComponentLibraryObject function inside the component and wrap it in useCallback
- Added caching for component digest fetching with a 24-hour stale time

### How to test?

1. Verify that the application loads correctly with the exported QueryClient
2. Test component loading from the published components library
3. Verify that subsequent requests for the same component digest use the cached data
4. Check that the component library provider correctly initializes with the query client

### Why make this change?

This change improves performance by caching component digest data for 24 hours, reducing redundant API calls when the same components are accessed multiple times. By injecting the QueryClient into the PublishedComponentsLibrary, we enable proper data caching and reuse across the application, which leads to a more responsive user experience and reduced server load.

Author: Mbeaulne

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   type ReactNode,
   useCallback,
@@ -89,25 +89,33 @@ const ComponentLibraryContext =
     "ComponentLibraryProvider",
   );
 
-const componentLibraries = new Map<AvailableComponentLibraries, Library>([
-  ["published_components", new PublishedComponentsLibrary()],
-]);
-
-function getComponentLibraryObject(libraryName: AvailableComponentLibraries) {
-  if (!componentLibraries.has(libraryName)) {
-    throw new Error(`Component library "${libraryName}" is not supported.`);
-  }
-
-  return componentLibraries.get(libraryName) as Library;
-}
-
 export const ComponentLibraryProvider = ({
   children,
 }: {
   children: ReactNode;
 }) => {
   const { graphSpec } = useComponentSpec();
   const { currentSearchFilter } = useForcedSearchContext();
+  const queryClient = useQueryClient();
+
+  const componentLibraries = useMemo(
+    () =>
+      new Map<AvailableComponentLibraries, Library>([
+        ["published_components", new PublishedComponentsLibrary(queryClient)],
+      ]),
+    [queryClient],
+  );
+
+  const getComponentLibraryObject = useCallback(
+    (libraryName: AvailableComponentLibraries) => {
+      if (!componentLibraries.has(libraryName)) {
+        throw new Error(`Component library "${libraryName}" is not supported.`);
+      }
+
+      return componentLibraries.get(libraryName) as Library;
+    },
+    [componentLibraries],
+  );
 
   const [componentLibrary, setComponentLibrary] = useState<ComponentLibrary>();
   const [userComponentsFolder, setUserComponentsFolder] =

src/providers/ComponentLibraryProvider/libraries/publishedComponentsLibrary.test.ts

@@ -1,3 +1,4 @@
+import { QueryClient } from "@tanstack/react-query";
 import yaml from "js-yaml";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -108,9 +109,33 @@ describe("PublishedComponentsLibrary", () => {
   });
 
   let library: PublishedComponentsLibrary;
+  let mockQueryClient: QueryClient;
 
   beforeEach(() => {
-    library = new PublishedComponentsLibrary();
+    mockQueryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+
+    // Mock the fetchQuery method
+    vi.spyOn(mockQueryClient, "fetchQuery").mockImplementation(
+      async ({ queryFn, queryKey }) => {
+        return typeof queryFn === "function"
+          ? await queryFn({
+              queryKey,
+              signal: new AbortController().signal,
+              client: mockQueryClient,
+              pageParam: undefined,
+              direction: "forward" as const,
+              meta: undefined,
+            })
+          : undefined;
+      },
+    );
+
+    library = new PublishedComponentsLibrary(mockQueryClient);
     vi.clearAllMocks();
 
     // Default fetch mock

src/providers/ComponentLibraryProvider/libraries/publishedComponentsLibrary.ts

@@ -1,3 +1,5 @@
+import type { QueryClient } from "@tanstack/react-query";
+
 import {
   getApiComponentsDigestGet,
   listApiPublishedComponentsGet,
@@ -16,7 +18,7 @@ import {
   isDiscoverableComponentReference,
 } from "@/utils/componentSpec";
 import type { ComponentReferenceWithSpec } from "@/utils/componentStore";
-import { API_URL } from "@/utils/constants";
+import { API_URL, TWENTY_FOUR_HOURS_IN_MS } from "@/utils/constants";
 
 import { isValidFilterRequest, type LibraryFilterRequest } from "../types";
 import {
@@ -57,8 +59,10 @@ class BackendLibraryError extends Error {
 
 export class PublishedComponentsLibrary implements Library {
   #knownDigests: Set<string> = new Set();
+  #queryClient: QueryClient;
 
-  constructor() {
+  constructor(queryClient: QueryClient) {
+    this.#queryClient = queryClient;
     // load known digests from storage
     // todo: prefetch components?
   }
@@ -75,10 +79,13 @@ export class PublishedComponentsLibrary implements Library {
       return true;
     }
 
-    const getComponentResult = await getApiComponentsDigestGet({
-      path: {
-        digest: component.digest,
-      },
+    const getComponentResult = await this.#queryClient.fetchQuery({
+      queryKey: ["componentDigest", component.digest],
+      queryFn: () =>
+        getApiComponentsDigestGet({
+          path: { digest: component.digest },
+        }),
+      staleTime: TWENTY_FOUR_HOURS_IN_MS,
     });
 
     if (getComponentResult.response.status !== 200) {

src/utils/constants.ts

@@ -73,3 +73,5 @@ export const KEYBOARD_SHORTCUTS = {
 
 // Container exit codes
 export const EXIT_CODE_OOM = 137; // SIGKILL (128 + 9) - Out of Memory
+
+export const TWENTY_FOUR_HOURS_IN_MS = 24 * 60 * 60 * 1000;