13160116517

Committed 05 Feb 2025 02:54PM CUT coverage: 69.459% (-0.4%) from 69.865%

Build # 13160116517

Build Type

Pull #265

github

Committed by

web-flow

Commit Message

Merge a3f152627 into eb46c5b85

Pull Request Pull Request #265: fix: implement default caching options for react-query

Run Details

379 of 608 branches covered (62.34%)

Branch coverage included in aggregate %.

0 of 7 new or added lines in 2 files covered. (0.0%)

815 of 1111 relevant lines covered (73.36%)

76.57 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/react-query-provider.tsx

import { V1ListActiveWorkspacesResponse } from "@/api/generated";
import { v1ListActiveWorkspacesQueryKey } from "@/api/generated/@tanstack/react-query.gen";
import { getQueryCacheConfig } from "@/lib/react-query-utils";
import {
  QueryCacheNotifyEvent,
  QueryClient,
  QueryClientProvider as VendorQueryClientProvider,
} from "@tanstack/react-query";
import { ReactNode, useState, useEffect } from "react";

/**
 * Responsible for determining whether a queryKey attached to a queryCache event
 * is for the "list active workspaces" query.
 */
function isActiveWorkspacesQueryKey(queryKey: unknown): boolean {
  return (
    Array.isArray(queryKey) &&
    queryKey[0]._id === v1ListActiveWorkspacesQueryKey()[0]?._id
  );
}

/**
 * Responsible for extracting the incoming active workspace name from the deeply
 * nested payload attached to a queryCache event.
 */
function getWorkspaceName(event: QueryCacheNotifyEvent): string | null {
  if ("action" in event === false || "data" in event.action === false)
    return null;
  return (
    (event.action.data as V1ListActiveWorkspacesResponse | undefined | null)
      ?.workspaces[0]?.name ?? null
  );
}

export function QueryClientProvider({ children }: { children: ReactNode }) {
  const [activeWorkspaceName, setActiveWorkspaceName] = useState<string | null>(
    null,
  );

  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            ...getQueryCacheConfig("short"),
          },
        },
      }),
  );

  useEffect(() => {
    const queryCache = queryClient.getQueryCache();
    const unsubscribe = queryCache.subscribe((event) => {
      if (
        event.type === "updated" &&
        event.action.type === "success" &&
        isActiveWorkspacesQueryKey(event.query.options.queryKey)
      ) {
        const newWorkspaceName: string | null = getWorkspaceName(event);
        if (
          newWorkspaceName === activeWorkspaceName ||
          newWorkspaceName === null
        )
          return;

        setActiveWorkspaceName(newWorkspaceName);

        void queryClient.invalidateQueries({
          refetchType: "all",
          // Avoid a continuous loop
          predicate(query) {
            return !isActiveWorkspacesQueryKey(query.queryKey);
          },
        });
      }
    });

    return () => {
      return unsubscribe();
    };
  }, [activeWorkspaceName, queryClient]);

  return (
    <VendorQueryClientProvider client={queryClient}>
      {children}
    </VendorQueryClientProvider>
  );
}

1	import { V1ListActiveWorkspacesResponse } from "@/api/generated";
2	import { v1ListActiveWorkspacesQueryKey } from "@/api/generated/@tanstack/react-query.gen";
3	import { getQueryCacheConfig } from "@/lib/react-query-utils";
4	import {
5	QueryCacheNotifyEvent,
6	QueryClient,
7	QueryClientProvider as VendorQueryClientProvider,
8	} from "@tanstack/react-query";
9	import { ReactNode, useState, useEffect } from "react";
10
11	/**
12	* Responsible for determining whether a queryKey attached to a queryCache event
13	* is for the "list active workspaces" query.
14	*/
15	function isActiveWorkspacesQueryKey(queryKey: unknown): boolean {
16	return (	×
17	Array.isArray(queryKey) &&	×
18	queryKey[0]._id === v1ListActiveWorkspacesQueryKey()[0]?._id
19	);
20	}
21
22	/**
23	* Responsible for extracting the incoming active workspace name from the deeply
24	* nested payload attached to a queryCache event.
25	*/
26	function getWorkspaceName(event: QueryCacheNotifyEvent): string \| null {
27	if ("action" in event === false \|\| "data" in event.action === false)	×
28	return null;	×
29	return (	×
30	(event.action.data as V1ListActiveWorkspacesResponse \| undefined \| null)	×
31	?.workspaces[0]?.name ?? null
32	);
33	}
34
35	export function QueryClientProvider({ children }: { children: ReactNode }) {
36	const [activeWorkspaceName, setActiveWorkspaceName] = useState<string \| null>(	×
37	null,
38	);
39
NEW 40	const [queryClient] = useState(	×
41	() =>
NEW 42	new QueryClient({	×
43	defaultOptions: {
44	queries: {
45	...getQueryCacheConfig("short"),
46	},
47	},
48	}),
49	);
50
51	useEffect(() => {	×
52	const queryCache = queryClient.getQueryCache();	×
53	const unsubscribe = queryCache.subscribe((event) => {	×
54	if (	×
55	event.type === "updated" &&	×
56	event.action.type === "success" &&
57	isActiveWorkspacesQueryKey(event.query.options.queryKey)
58	) {
59	const newWorkspaceName: string \| null = getWorkspaceName(event);	×
60	if (	×
61	newWorkspaceName === activeWorkspaceName \|\|	×
62	newWorkspaceName === null
63	)
64	return;	×
65
66	setActiveWorkspaceName(newWorkspaceName);	×
67
68	void queryClient.invalidateQueries({	×
69	refetchType: "all",
70	// Avoid a continuous loop
71	predicate(query) {
72	return !isActiveWorkspacesQueryKey(query.queryKey);	×
73	},
74	});
75	}
76	});
77
78	return () => {	×
79	return unsubscribe();	×
80	};
81	}, [activeWorkspaceName, queryClient]);
82
83	return (
84	<VendorQueryClientProvider client={queryClient}>
85	{children}
86	</VendorQueryClientProvider>
87	);
88	}

stacklok / codegate-ui / 13160116517

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous