move invalidate into refresh component

packages/ui-components/src/__tests__/TanstackAppTable.test.ts

@@ -150,28 +150,4 @@ test('shows refresh icon', async () => {
 	resolve();
 
 	await waitFor(() => expect(screen.getByTestId('refreshButton')).toBeInTheDocument());
-});
-
-test('refetches data when refresh button is clicked', async () => {
-	const mockRefetch = vi.fn();
-	const mockQuery = writable({
-		status: 'success',
-		fetchStatus: 'idle',
-		refetch: mockRefetch
-	});
-
-	render(TanstackAppTableTest, {
-		query: mockQuery as unknown as CreateInfiniteQueryResult<
-			InfiniteData<unknown[], unknown>,
-			Error
-		>,
-		emptyMessage: 'No rows',
-		title: 'Test Table',
-		head: 'Test head'
-	});
-
-	const refreshButton = screen.getByTestId('refreshButton');
-	await userEvent.click(refreshButton);
-
-	expect(mockRefetch).toHaveBeenCalled();
-});
+});

packages/ui-components/src/lib/components/TanstackAppTable.svelte

@@ -11,6 +11,7 @@
 	export let query: CreateInfiniteQueryResult<InfiniteData<T[], unknown>, Error>;
 	export let emptyMessage: string = 'None found';
 	export let rowHoverable = true;
+	export let queryKey: string;
 </script>
 
 <div data-testid="title" class="flex h-16 w-full items-center justify-end">
@@ -21,9 +22,7 @@
 		class="ml-2 h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
 		data-testid="refreshButton"
 		spin={$query.isLoading || $query.isFetching}
-		on:click={() => {
-			$query.refetch();
-		}}
+		{queryKey}
 	/>
 </div>
 {#if $query.data?.pages[0].length === 0}

packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte

@@ -17,6 +17,8 @@
 		Tooltip
 	} from 'flowbite-svelte';
 	import { BugOutline, PauseSolid, PlaySolid } from 'flowbite-svelte-icons';
+	import { useQueryClient } from '@tanstack/svelte-query';
+	const queryClient = useQueryClient();
 
 	export let id: string;
 	export let order: OrderSubgraph;
@@ -37,7 +39,11 @@
 	let enabled = true;
 
 	const refreshQuotes = () => {
-		$orderQuoteQuery.refetch();
+		queryClient.invalidateQueries({
+			queryKey: [QKEY_ORDER_QUOTE + id, id],
+			refetchType: 'all',
+			exact: false
+		});
 	};
 
 	$: orderQuoteQuery = createQuery<BatchOrderQuotesResponse[]>({
@@ -70,8 +76,8 @@
 			{/if}
 			<span></span>
 			<Refresh
+				queryKey={id}
 				class="h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
-				on:click={refreshQuotes}
 				spin={$orderQuoteQuery.isLoading || $orderQuoteQuery.isFetching}
 			/>
 			<PauseSolid

packages/ui-components/src/lib/components/icon/Refresh.svelte

@@ -2,6 +2,17 @@
 	import { getContext } from 'svelte';
 	import type { AriaRole } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
+	import { useQueryClient } from '@tanstack/svelte-query';
+
+	export let queryKey: string;
+	const queryClient = useQueryClient();
+	const invalidateQueries = () => {
+		queryClient.invalidateQueries({
+			queryKey: [queryKey],
+			refetchType: 'all',
+			exact: false
+		});
+	};
 
 	const ctx: { size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; role: AriaRole | undefined } =
 		getContext('iconCtx') ?? {};
@@ -19,6 +30,7 @@
 </script>
 
 <svg
+	on:click={invalidateQueries}
 	data-testid="refresh-button"
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"

packages/ui-components/src/lib/components/tables/OrderTradesListTable.svelte

@@ -57,7 +57,12 @@
 	});
 </script>
 
-<TanstackAppTable query={orderTradesQuery} emptyMessage="No trades found" rowHoverable={false}>
+<TanstackAppTable
+	query={orderTradesQuery}
+	emptyMessage="No trades found"
+	rowHoverable={false}
+	queryKey={id}
+>
 	<svelte:fragment slot="info">
 		{#if tradesCount !== undefined}
 			<div class="px-2">{tradesCount} Trades</div>