diff --git a/packages/svelte-query-devtools/src/Devtools.svelte b/packages/svelte-query-devtools/src/Devtools.svelte index 912337e2fb..1e94ee4343 100644 --- a/packages/svelte-query-devtools/src/Devtools.svelte +++ b/packages/svelte-query-devtools/src/Devtools.svelte @@ -7,6 +7,7 @@ DevToolsErrorType, DevtoolsButtonPosition, DevtoolsPosition, + TanstackQueryDevtools, } from '@tanstack/query-devtools' interface DevtoolsOptions { @@ -50,13 +51,14 @@ }: DevtoolsOptions = $props() let ref: HTMLDivElement + let devtools: TanstackQueryDevtools | undefined if (DEV && BROWSER) { onMount(() => { import('@tanstack/query-devtools').then((m) => { const QueryDevtools = m.TanstackQueryDevtools - const devtools = new QueryDevtools({ + devtools = new QueryDevtools({ client, queryFlavor: 'Svelte Query', version: '5', @@ -69,8 +71,24 @@ }) devtools.mount(ref) - return () => devtools.unmount() }) + return () => devtools?.unmount() + }) + + $effect(() => { + devtools?.setButtonPosition(buttonPosition) + }) + + $effect(() => { + devtools?.setPosition(position) + }) + + $effect(() => { + devtools?.setInitialIsOpen(initialIsOpen) + }) + + $effect(() => { + devtools?.setErrorTypes(errorTypes) }) } diff --git a/packages/svelte-query/src/types.ts b/packages/svelte-query/src/types.ts index db4ebebc42..42d2c751a0 100644 --- a/packages/svelte-query/src/types.ts +++ b/packages/svelte-query/src/types.ts @@ -145,6 +145,7 @@ type Override = { : TTargetA[AKey] } +/** Options for useMutationState */ export type MutationStateOptions = { filters?: MutationFilters select?: (