UML diagram caching

lib/api/useApiQuery.tsx

@@ -1,4 +1,4 @@
-import type { UseQueryOptions } from '@tanstack/react-query';
+import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 
 import type { ResourceError, ResourceName, ResourcePayload } from './resources';
@@ -7,6 +7,7 @@ import useApiFetch from './useApiFetch';
 
 export interface Params<R extends ResourceName, E = unknown, D = ResourcePayload<R>> extends ApiFetchParams<R> {
   queryOptions?: Omit<UseQueryOptions<ResourcePayload<R>, ResourceError<E>, D>, 'queryKey' | 'queryFn'>;
+  queryKey?: QueryKey;
 }
 
 export function getResourceKey<R extends ResourceName>(resource: R, { pathParams, queryParams }: Params<R> = {}) {
@@ -19,13 +20,13 @@ export function getResourceKey<R extends ResourceName>(resource: R, { pathParams
 
 export default function useApiQuery<R extends ResourceName, E = unknown, D = ResourcePayload<R>>(
   resource: R,
-  { queryOptions, pathParams, queryParams, fetchParams }: Params<R, E, D> = {},
+  { queryOptions, pathParams, queryParams, queryKey, fetchParams }: Params<R, E, D> = {},
 ) {
   const apiFetch = useApiFetch();
 
   return useQuery<ResourcePayload<R>, ResourceError<E>, D>({
     // eslint-disable-next-line @tanstack/query/exhaustive-deps
-    queryKey: getResourceKey(resource, { pathParams, queryParams }),
+    queryKey: queryKey || getResourceKey(resource, { pathParams, queryParams }),
     queryFn: async() => {
       // all errors and error typing is handled by react-query
       // so error response will never go to the data

ui/sol2uml/Sol2UmlDiagram.tsx

@@ -45,6 +45,7 @@ const Sol2UmlDiagram = ({ addressHash }: Props) => {
         sources: composeSources(contractQuery.data),
       },
     },
+    queryKey: [ 'visualize_sol2uml', addressHash ],
     queryOptions: {
       enabled: Boolean(contractQuery.data),
       refetchOnMount: false,