Fix reactive props

TanStack · Jul 26, 2024 · 39cbe53 · 39cbe53
1 parent 9771a13
commit 39cbe53
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git 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)
     })
   }
 </script>

diff --git a/packages/svelte-query/src/types.ts b/packages/svelte-query/src/types.ts
@@ -145,6 +145,7 @@ type Override<TTargetA, TTargetB> = {
     : TTargetA[AKey]
 }
 
+/** Options for useMutationState */
 export type MutationStateOptions<TResult = MutationState> = {
   filters?: MutationFilters
   select?: (