diff --git a/docs/svelte/overview.md b/docs/svelte/overview.md
index 14fb67c81a..03d840dae6 100644
--- a/docs/svelte/overview.md
+++ b/docs/svelte/overview.md
@@ -71,4 +71,4 @@ Svelte Query offers useful functions and components that will make managing serv
 Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of.
 
 - Many of the functions in Svelte Query return a Svelte store. To access values on these stores reactively, you need to prefix the store with a `$`. You can learn more about Svelte stores [here](https://svelte.dev/tutorial/writable-stores).
-- If your query or mutation depends on variables, you must assign it reactively. You can read more about this [here](./reactivity).
+- If your query or mutation depends on variables, you must use a store for the options. You can read more about this [here](./reactivity).
diff --git a/docs/svelte/reactivity.md b/docs/svelte/reactivity.md
index 6c7f8875e4..6d7b3fdc33 100644
--- a/docs/svelte/reactivity.md
+++ b/docs/svelte/reactivity.md
@@ -3,12 +3,12 @@ id: reactivity
 title: Reactivity
 ---
 
-Svelte uses a compiler to build your code which optimises rendering. By default, variables will run once, unless they are referenced in your markup. To make a different variable or function reactive, you need to use [reactive declarations](https://svelte.dev/tutorial/reactive-declarations). This also applies to Svelte Query.
+Svelte uses a compiler to build your code which optimises rendering. By default, variables will run once, unless they are referenced in your markup. To be able to react to changes in options you need to use [stores](https://svelte.dev/tutorial/writable-stores).
 
 In the below example, the `refetchInterval` option is set from the variable `intervalMs`, which is edited by the input field. However, as the query is not told it should react to changes in `intervalMs`, `refetchInterval` will not change when the input value changes.
 
 ```markdown
-<script lang="ts">
+<script>
   import { createQuery } from '@tanstack/svelte-query'
 
   let intervalMs = 1000
@@ -25,22 +25,25 @@ In the below example, the `refetchInterval` option is set from the variable `int
 <input bind:value={intervalMs} type="number" />
 ```
 
-To solve this, you can prefix the query with `$: ` to tell the compiler it should be reactive.
+To solve this, create a store for the options and use it as input for the query. Update the options store when the value changes and the query will react to the change.
 
 ```markdown
-<script lang="ts">
+<script>
   import { createQuery } from '@tanstack/svelte-query'
 
-  let intervalMs = 1000
-
   const endpoint = 'http://localhost:5173/api/data'
 
-  $: query = createQuery({
+  const queryOptions = writable({
     queryKey: ['refetch'],
     queryFn: async () => await fetch(endpoint).then((r) => r.json()),
-    refetchInterval: intervalMs,
+    refetchInterval: 1000,
   })
+  const query = createQuery(queryOptions)
+
+  function updateRefetchInterval(event) {
+    $queryOptions.refetchInterval = event.target.valueAsNumber
+  }
 </script>
 
-<input bind:value={intervalMs} type="number" />
+<input type="number" on:input={updateRefetchInterval} />
 ```
diff --git a/packages/svelte-query/src/__tests__/CreateQueries.svelte b/packages/svelte-query/src/__tests__/CreateQueries.svelte
index 8cfb4d407f..4b70f1ab55 100644
--- a/packages/svelte-query/src/__tests__/CreateQueries.svelte
+++ b/packages/svelte-query/src/__tests__/CreateQueries.svelte
@@ -3,7 +3,7 @@
   import { setQueryClientContext } from '../context'
   import type { QueriesOptions } from '../createQueries'
 
-  export let options: { queries: readonly [...QueriesOptions<any>] }
+  export let options: { queries: [...QueriesOptions<any>] }
 
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
diff --git a/packages/svelte-query/src/__tests__/CreateQuery.svelte b/packages/svelte-query/src/__tests__/CreateQuery.svelte
index 76378b740b..2f3ae51db2 100644
--- a/packages/svelte-query/src/__tests__/CreateQuery.svelte
+++ b/packages/svelte-query/src/__tests__/CreateQuery.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-  import { createQuery, QueryClient, type CreateQueryOptions } from '../index'
+  import {
+    createQuery,
+    QueryClient,
+    type CreateQueryOptions,
+    type WritableOrVal,
+  } from '../index'
   import { setQueryClientContext } from '../context'
 
-  export let options: CreateQueryOptions<any>
+  export let options: WritableOrVal<CreateQueryOptions<any>>
 
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
@@ -17,3 +22,9 @@
 {:else if $query.isSuccess}
   <p>Success</p>
 {/if}
+
+<ul>
+  {#each $query.data ?? [] as entry}
+    <li>id: {entry.id}</li>
+  {/each}
+</ul>
diff --git a/packages/svelte-query/src/__tests__/createQuery.test.ts b/packages/svelte-query/src/__tests__/createQuery.test.ts
index ce438d6135..77b4c508be 100644
--- a/packages/svelte-query/src/__tests__/createQuery.test.ts
+++ b/packages/svelte-query/src/__tests__/createQuery.test.ts
@@ -1,7 +1,9 @@
 import { describe, it, expect } from 'vitest'
 import { render, waitFor } from '@testing-library/svelte'
+import { writable } from 'svelte/store'
 import CreateQuery from './CreateQuery.svelte'
 import { sleep } from './utils'
+import type { CreateQueryOptions, WritableOrVal } from '../types'
 
 describe('createQuery', () => {
   it('Render and wait for success', async () => {
@@ -25,4 +27,38 @@ describe('createQuery', () => {
       expect(rendered.getByText('Success')).toBeInTheDocument()
     })
   })
+
+  it('should keep previous data when returned as placeholder data', async () => {
+    const options: WritableOrVal<CreateQueryOptions> = writable({
+      queryKey: ['test', [1]],
+      queryFn: async ({ queryKey }) => {
+        await sleep(50)
+        const ids = queryKey[1]
+        if (!ids || !Array.isArray(ids)) return []
+        return ids.map((id) => ({ id }))
+      },
+      placeholderData: (previousData: { id: number }[]) => previousData,
+    })
+    const rendered = render(CreateQuery, { props: { options } })
+
+    expect(rendered.queryByText('id: 1')).not.toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).not.toBeInTheDocument()
+
+    await sleep(100)
+
+    expect(rendered.queryByText('id: 1')).toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).not.toBeInTheDocument()
+
+    options.update((o) => ({ ...o, queryKey: ['test', [1, 2]] }))
+
+    await sleep(0)
+
+    expect(rendered.queryByText('id: 1')).toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).not.toBeInTheDocument()
+
+    await sleep(100)
+
+    expect(rendered.queryByText('id: 1')).toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).toBeInTheDocument()
+  })
 })
diff --git a/packages/svelte-query/src/createBaseQuery.ts b/packages/svelte-query/src/createBaseQuery.ts
index 9aa81df71f..64f1d9d1fd 100644
--- a/packages/svelte-query/src/createBaseQuery.ts
+++ b/packages/svelte-query/src/createBaseQuery.ts
@@ -1,8 +1,13 @@
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'
-import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types'
+import type {
+  CreateBaseQueryOptions,
+  CreateBaseQueryResult,
+  WritableOrVal,
+} from './types'
 import { useQueryClient } from './useQueryClient'
-import { derived, readable } from 'svelte/store'
+import { derived, get, readable, writable } from 'svelte/store'
+import { isWritable } from './utils'
 
 export function createBaseQuery<
   TQueryFnData,
@@ -11,52 +16,54 @@ export function createBaseQuery<
   TQueryData,
   TQueryKey extends QueryKey,
 >(
-  options: CreateBaseQueryOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryData,
-    TQueryKey
+  options: WritableOrVal<
+    CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
   >,
   Observer: typeof QueryObserver,
   queryClient?: QueryClient,
 ): CreateBaseQueryResult<TData, TError> {
   const client = useQueryClient(queryClient)
-  const defaultedOptions = client.defaultQueryOptions(options)
-  defaultedOptions._optimisticResults = 'optimistic'
 
-  let observer = new Observer<
+  const optionsStore = isWritable(options) ? options : writable(options)
+
+  const defaultedOptionsStore = derived(optionsStore, ($options) => {
+    const defaultedOptions = client.defaultQueryOptions($options)
+    defaultedOptions._optimisticResults = 'optimistic'
+
+    // Include callbacks in batch renders
+    if (defaultedOptions.onError) {
+      defaultedOptions.onError = notifyManager.batchCalls(
+        defaultedOptions.onError,
+      )
+    }
+
+    if (defaultedOptions.onSuccess) {
+      defaultedOptions.onSuccess = notifyManager.batchCalls(
+        defaultedOptions.onSuccess,
+      )
+    }
+
+    if (defaultedOptions.onSettled) {
+      defaultedOptions.onSettled = notifyManager.batchCalls(
+        defaultedOptions.onSettled,
+      )
+    }
+
+    return defaultedOptions
+  })
+
+  const observer = new Observer<
     TQueryFnData,
     TError,
     TData,
     TQueryData,
     TQueryKey
-  >(client, defaultedOptions)
-
-  // Include callbacks in batch renders
-  if (defaultedOptions.onError) {
-    defaultedOptions.onError = notifyManager.batchCalls(
-      defaultedOptions.onError,
-    )
-  }
-
-  if (defaultedOptions.onSuccess) {
-    defaultedOptions.onSuccess = notifyManager.batchCalls(
-      defaultedOptions.onSuccess,
-    )
-  }
-
-  if (defaultedOptions.onSettled) {
-    defaultedOptions.onSettled = notifyManager.batchCalls(
-      defaultedOptions.onSettled,
-    )
-  }
+  >(client, get(defaultedOptionsStore))
 
-  readable(observer).subscribe(($observer) => {
-    observer = $observer
+  defaultedOptionsStore.subscribe(($defaultedOptions) => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.
-    observer.setOptions(defaultedOptions, { listeners: false })
+    observer.setOptions($defaultedOptions, { listeners: false })
   })
 
   const result = readable(observer.getCurrentResult(), (set) => {
@@ -64,8 +71,8 @@ export function createBaseQuery<
   })
 
   const { subscribe } = derived(result, ($result) => {
-    $result = observer.getOptimisticResult(defaultedOptions)
-    return !defaultedOptions.notifyOnChangeProps
+    $result = observer.getOptimisticResult(get(defaultedOptionsStore))
+    return !get(defaultedOptionsStore).notifyOnChangeProps
       ? observer.trackResult($result)
       : $result
   })
diff --git a/packages/svelte-query/src/createInfiniteQuery.ts b/packages/svelte-query/src/createInfiniteQuery.ts
index 2aaca7c84d..39a8ddf3bd 100644
--- a/packages/svelte-query/src/createInfiniteQuery.ts
+++ b/packages/svelte-query/src/createInfiniteQuery.ts
@@ -9,6 +9,7 @@ import { InfiniteQueryObserver } from '@tanstack/query-core'
 import type {
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
+  WritableOrVal,
 } from './types'
 import { createBaseQuery } from './createBaseQuery'
 
@@ -19,13 +20,15 @@ export function createInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: CreateInfiniteQueryOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryFnData,
-    TQueryKey,
-    TPageParam
+  options: WritableOrVal<
+    CreateInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey,
+      TPageParam
+    >
   >,
   queryClient?: QueryClient,
 ): CreateInfiniteQueryResult<TData, TError> {
diff --git a/packages/svelte-query/src/createMutation.ts b/packages/svelte-query/src/createMutation.ts
index 736f5afa0b..14762e288e 100644
--- a/packages/svelte-query/src/createMutation.ts
+++ b/packages/svelte-query/src/createMutation.ts
@@ -1,12 +1,14 @@
-import { readable, derived } from 'svelte/store'
+import { readable, derived, writable, get } from 'svelte/store'
 import type { QueryClient, RegisteredError } from '@tanstack/query-core'
 import { MutationObserver, notifyManager } from '@tanstack/query-core'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
   CreateMutationResult,
+  WritableOrVal,
 } from './types'
 import { useQueryClient } from './useQueryClient'
+import { isWritable } from './utils'
 
 export function createMutation<
   TData = unknown,
@@ -14,22 +16,26 @@ export function createMutation<
   TVariables = void,
   TContext = unknown,
 >(
-  options: CreateMutationOptions<TData, TError, TVariables, TContext>,
+  options: WritableOrVal<
+    CreateMutationOptions<TData, TError, TVariables, TContext>
+  >,
   queryClient?: QueryClient,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
   const client = useQueryClient(queryClient)
-  let observer = new MutationObserver<TData, TError, TVariables, TContext>(
+
+  const optionsStore = isWritable(options) ? options : writable(options)
+
+  const observer = new MutationObserver<TData, TError, TVariables, TContext>(
     client,
-    options,
+    get(optionsStore),
   )
   let mutate: CreateMutateFunction<TData, TError, TVariables, TContext>
 
-  readable(observer).subscribe(($observer) => {
-    observer = $observer
+  optionsStore.subscribe(($options) => {
     mutate = (variables, mutateOptions) => {
       observer.mutate(variables, mutateOptions).catch(noop)
     }
-    observer.setOptions(options)
+    observer.setOptions($options)
   })
 
   const result = readable(observer.getCurrentResult(), (set) => {
diff --git a/packages/svelte-query/src/createQueries.ts b/packages/svelte-query/src/createQueries.ts
index da168538e9..777851be11 100644
--- a/packages/svelte-query/src/createQueries.ts
+++ b/packages/svelte-query/src/createQueries.ts
@@ -8,10 +8,11 @@ import type {
 } from '@tanstack/query-core'
 
 import { notifyManager, QueriesObserver } from '@tanstack/query-core'
-import { readable, type Readable } from 'svelte/store'
+import { derived, get, readable, writable, type Readable } from 'svelte/store'
 
-import type { CreateQueryOptions } from './types'
+import type { CreateQueryOptions, WritableOrVal } from './types'
 import { useQueryClient } from './useQueryClient'
+import { isWritable } from './utils'
 
 // This defines the `CreateQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
 // `placeholderData` function does not have a parameter
@@ -155,34 +156,33 @@ export function createQueries<T extends any[]>({
   queries,
   queryClient,
 }: {
-  queries: readonly [...QueriesOptions<T>]
+  queries: WritableOrVal<[...QueriesOptions<T>]>
   queryClient?: QueryClient
 }): CreateQueriesResult<T> {
   const client = useQueryClient(queryClient)
   // const isRestoring = useIsRestoring()
 
-  function getDefaultQuery(newQueries: readonly [...QueriesOptions<T>]) {
-    return newQueries.map((options) => {
+  const queriesStore = isWritable(queries) ? queries : writable(queries)
+
+  const defaultedQueriesStore = derived(queriesStore, ($queries) => {
+    return $queries.map((options) => {
       const defaultedOptions = client.defaultQueryOptions(options)
       // Make sure the results are already in fetching state before subscribing or updating options
       defaultedOptions._optimisticResults = 'optimistic'
 
       return defaultedOptions
     })
-  }
-
-  const defaultedQueries = getDefaultQuery(queries)
-  let observer = new QueriesObserver(client, defaultedQueries)
+  })
+  const observer = new QueriesObserver(client, get(defaultedQueriesStore))
 
-  readable(observer).subscribe(($observer) => {
-    observer = $observer
+  defaultedQueriesStore.subscribe(($defaultedQueries) => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.
-    observer.setQueries(defaultedQueries, { listeners: false })
+    observer.setQueries($defaultedQueries, { listeners: false })
   })
 
   const { subscribe } = readable(
-    observer.getOptimisticResult(defaultedQueries) as any,
+    observer.getOptimisticResult(get(defaultedQueriesStore)) as any,
     (set) => {
       return observer.subscribe(notifyManager.batchCalls(set))
     },
diff --git a/packages/svelte-query/src/createQuery.ts b/packages/svelte-query/src/createQuery.ts
index f491e77f11..6f3f9fb42f 100644
--- a/packages/svelte-query/src/createQuery.ts
+++ b/packages/svelte-query/src/createQuery.ts
@@ -9,6 +9,7 @@ import type {
   DefinedCreateQueryResult,
   CreateQueryOptions,
   CreateQueryResult,
+  WritableOrVal,
 } from './types'
 
 type UndefinedInitialDataOptions<
@@ -35,7 +36,9 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: WritableOrVal<
+    UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+  >,
   queryClient?: QueryClient,
 ): CreateQueryResult<TData, TError>
 
@@ -45,7 +48,9 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: WritableOrVal<
+    DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+  >,
   queryClient?: QueryClient,
 ): DefinedCreateQueryResult<TData, TError>
 
@@ -55,7 +60,9 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: WritableOrVal<
+    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+  >,
   queryClient?: QueryClient,
 ) {
   return createBaseQuery(options, QueryObserver, queryClient)
diff --git a/packages/svelte-query/src/types.ts b/packages/svelte-query/src/types.ts
index c885a764cb..0eea0e34e9 100644
--- a/packages/svelte-query/src/types.ts
+++ b/packages/svelte-query/src/types.ts
@@ -11,7 +11,9 @@ import type {
   RegisteredError,
 } from '@tanstack/query-core'
 import type { QueryClient } from '@tanstack/query-core'
-import type { Readable } from 'svelte/store'
+import type { Readable, Writable } from 'svelte/store'
+
+export type WritableOrVal<T> = T | Writable<T>
 
 export interface ContextOptions {
   /**
diff --git a/packages/svelte-query/src/utils.ts b/packages/svelte-query/src/utils.ts
new file mode 100644
index 0000000000..8ce19a7f43
--- /dev/null
+++ b/packages/svelte-query/src/utils.ts
@@ -0,0 +1,8 @@
+import type { Writable } from 'svelte/store'
+import type { WritableOrVal } from './types'
+
+export function isWritable<T extends object>(
+  obj: WritableOrVal<T>,
+): obj is Writable<T> {
+  return 'subscribe' in obj && 'set' in obj && 'update' in obj
+}
diff --git a/packages/svelte-query/tsconfig.json b/packages/svelte-query/tsconfig.json
index d7bfd5a72f..fdaea3ed13 100644
--- a/packages/svelte-query/tsconfig.json
+++ b/packages/svelte-query/tsconfig.json
@@ -28,7 +28,7 @@
     "target": "esnext",
     "tsBuildInfoFile": "./build/.tsbuildinfo"
   },
-  "include": ["src"],
+  "include": ["src", "src/**/*.svelte"],
   "references": [
     { "path": "../query-core" }
   ]