Loading...
{/if}
-{#if $query.status === 'error'}
+{#if query.status === 'error'}
-
{$query.data.title}
-
{$query.data.opening_crawl}
+
{query.data.title}
+
{query.data.opening_crawl}
Characters
- {#each $query.data.characters as character}
+ {#each query.data.characters as character}
{@const characterUrlParts = character.split('/').filter(Boolean)}
{@const characterId = characterUrlParts[characterUrlParts.length - 1]}
diff --git a/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte b/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte
index b4827ccdf9..88c5d6b5d2 100644
--- a/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte
+++ b/examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte
@@ -1,7 +1,7 @@
-{#if $query.status === 'success'}
+{#if query.status === 'success'}
- {$query.data.name}
+ {query.data.name}
{/if}
diff --git a/examples/svelte/svelte-melt/.gitignore b/examples/svelte/svelte-melt/.gitignore
new file mode 100644
index 0000000000..6635cf5542
--- /dev/null
+++ b/examples/svelte/svelte-melt/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/examples/svelte/svelte-melt/README.md b/examples/svelte/svelte-melt/README.md
new file mode 100644
index 0000000000..5ce676612e
--- /dev/null
+++ b/examples/svelte/svelte-melt/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/examples/svelte/svelte-melt/package.json b/examples/svelte/svelte-melt/package.json
new file mode 100644
index 0000000000..65d614c43e
--- /dev/null
+++ b/examples/svelte/svelte-melt/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "svelte-melt",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite dev --port 3000",
+ "build": "vite build",
+ "preview": "vite preview",
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+ "lint": "prettier --check . && eslint .",
+ "format": "prettier --write ."
+ },
+ "dependencies": {
+ "@tanstack/query-sync-storage-persister": "^5.51.1",
+ "@tanstack/svelte-query": "^5.51.1",
+ "@tanstack/svelte-query-devtools": "^5.51.1",
+ "@tanstack/svelte-query-persist-client": "^5.51.1"
+ },
+ "devDependencies": {
+ "@sveltejs/adapter-auto": "^3.2.2",
+ "@sveltejs/kit": "^2.5.18",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
+ "svelte": "5.0.0-next.192",
+ "svelte-check": "^3.8.4",
+ "typescript": "5.3.3",
+ "vite": "^5.3.3"
+ }
+}
diff --git a/examples/svelte/svelte-melt/src/app.d.ts b/examples/svelte/svelte-melt/src/app.d.ts
new file mode 100644
index 0000000000..367926a580
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface PageState {}
+ // interface Platform {}
+ }
+}
+
+export {}
diff --git a/examples/svelte/svelte-melt/src/app.html b/examples/svelte/svelte-melt/src/app.html
new file mode 100644
index 0000000000..84ffad1665
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/app.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ %sveltekit.head%
+
+
+
%sveltekit.body%
+
+
diff --git a/examples/svelte/svelte-melt/src/routes/+layout.svelte b/examples/svelte/svelte-melt/src/routes/+layout.svelte
new file mode 100644
index 0000000000..9fdebff85f
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/+layout.svelte
@@ -0,0 +1,39 @@
+
+
+
+
+
+ {@render children()}
+
+
diff --git a/examples/svelte/svelte-melt/src/routes/+page.svelte b/examples/svelte/svelte-melt/src/routes/+page.svelte
new file mode 100644
index 0000000000..a0568538e8
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/+page.svelte
@@ -0,0 +1,31 @@
+
+
+isReTORING:{isRes()}
+
+
+
diff --git a/examples/svelte/svelte-melt/src/routes/+page.ts b/examples/svelte/svelte-melt/src/routes/+page.ts
new file mode 100644
index 0000000000..977abb90f4
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/+page.ts
@@ -0,0 +1,2 @@
+export const ssr = false
+export const csr = true
diff --git a/examples/svelte/svelte-melt/src/routes/CreateQueries.svelte b/examples/svelte/svelte-melt/src/routes/CreateQueries.svelte
new file mode 100644
index 0000000000..7b8338af55
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/CreateQueries.svelte
@@ -0,0 +1,25 @@
+
+
+{JSON.stringify(combinedQueries)}
diff --git a/examples/svelte/svelte-melt/src/routes/cacheUpdate.svelte b/examples/svelte/svelte-melt/src/routes/cacheUpdate.svelte
new file mode 100644
index 0000000000..509ba26ff2
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/cacheUpdate.svelte
@@ -0,0 +1,77 @@
+
+
+
+
+{data.fetchStatus}
+{data.isLoading}
+{data.isFetching}
+{data.isRefetching}
+
+
+{bookFilterStore.paginate.page}
+
{JSON.stringify(data.data, null, 1)}
+{#each data?.data ?? [] as item}
+
{item.title}
+{/each}
diff --git a/examples/svelte/svelte-melt/src/routes/derivedQuery.svelte b/examples/svelte/svelte-melt/src/routes/derivedQuery.svelte
new file mode 100644
index 0000000000..0775006704
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/derivedQuery.svelte
@@ -0,0 +1,68 @@
+
+
+
testing derived query with list
+
+isFetching {isFetching()}
+isMutating {isMutating()}
+
+{data.fetchStatus}
+{data.isLoading}
+{data.isFetching}
+{data.isRefetching}
+
+
+{bookFilterStore.paginate.page}
+{p.derived_state}
+{#each data?.data ?? [] as item}
+
{item.title}
+{/each}
diff --git a/examples/svelte/svelte-melt/src/routes/external.svelte.ts b/examples/svelte/svelte-melt/src/routes/external.svelte.ts
new file mode 100644
index 0000000000..5cae384af7
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/external.svelte.ts
@@ -0,0 +1,11 @@
+import { createQuery } from '@tanstack/svelte-query'
+export function useSvelteExtensionQuery(props) {
+ const enabled = $derived({
+ queryKey: ['sv-externel', props],
+ queryFn: () => {
+ return Date.now()
+ },
+ enabled: () => props.paginate.page > 0,
+ })
+ return createQuery(enabled)
+}
diff --git a/examples/svelte/svelte-melt/src/routes/external.ts b/examples/svelte/svelte-melt/src/routes/external.ts
new file mode 100644
index 0000000000..d318d314e1
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/external.ts
@@ -0,0 +1,11 @@
+import { createQuery } from '@tanstack/svelte-query'
+
+export function useQuery(props) {
+ return createQuery({
+ queryKey: ['eternal', props],
+ queryFn: () => {
+ return Date.now()
+ },
+ enabled: props.paginate.page > 0,
+ })
+}
diff --git a/examples/svelte/svelte-melt/src/routes/paginate.svelte b/examples/svelte/svelte-melt/src/routes/paginate.svelte
new file mode 100644
index 0000000000..fe632aac79
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/paginate.svelte
@@ -0,0 +1,64 @@
+
+
+
testing create query with list
+
+{data.fetchStatus}
+{data.isLoading}
+{data.isFetching}
+{data.isRefetching}
+
+
+{bookFilterStore.paginate.page}
+{#each data?.data ?? [] as item}
+
{item.title}
+{/each}
+
+
diff --git a/examples/svelte/svelte-melt/src/routes/queries.svelte b/examples/svelte/svelte-melt/src/routes/queries.svelte
new file mode 100644
index 0000000000..0139637378
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/queries.svelte
@@ -0,0 +1,769 @@
+
+
+
+
+
+
Create Queries
+
+ QueryOptions: {JSON.stringify([
+ { queryFn: () => 1, queryKey: keys },
+ { queryFn: () => 2, queryKey: ['aa'] },
+ ])}
+
+
+
+
+
Result: {JSON.stringify(data)}
+
+
Data: {JSON.stringify(data.data)}
+
+
isError: {JSON.stringify(data)}
+
+
+C
+
{JSON.stringify(dat1, null, 3)}
diff --git a/examples/svelte/svelte-melt/src/routes/store.svelte.ts b/examples/svelte/svelte-melt/src/routes/store.svelte.ts
new file mode 100644
index 0000000000..f34ebeb186
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/store.svelte.ts
@@ -0,0 +1,19 @@
+const init = {
+ paginate: {
+ page: 1,
+ asc: false,
+ orderWith: 'like_count',
+ start: 0,
+ end: 10,
+ size: 12,
+ totalSize: 20,
+ },
+ filter: {
+ tags: [],
+ category: 'fiction',
+ updated_at: 'yesterday',
+ created_at: 'last 300 days',
+ },
+ search: {},
+}
+export const bookFilterStore = $state({ ...init })
diff --git a/examples/svelte/svelte-melt/src/routes/test.svelte b/examples/svelte/svelte-melt/src/routes/test.svelte
new file mode 100644
index 0000000000..1c5afacbd2
--- /dev/null
+++ b/examples/svelte/svelte-melt/src/routes/test.svelte
@@ -0,0 +1,793 @@
+
+
+
+
+
Create Query
+
+
+ Cases for different type of query key
+
+
+ - String key:{createQueryKey}
+ - arr Key{createQueryKeyDeep}
+ - Object Key{JSON.stringify(createQueryKeyDeepArr)}
+
+
+
+
+
+
+
+
Result: {JSON.stringify(data.data, null, 3)}
+
+
Data: {JSON.stringify(data.data)}
+
+
isError: {data.isError}
+
fetchStatus: {data.fetchStatus}
+
+
+
+
+
+
+
mutation
+
+
diff --git a/examples/svelte/svelte-melt/static/favicon.png b/examples/svelte/svelte-melt/static/favicon.png
new file mode 100644
index 0000000000..825b9e65af
Binary files /dev/null and b/examples/svelte/svelte-melt/static/favicon.png differ
diff --git a/examples/svelte/svelte-melt/svelte.config.js b/examples/svelte/svelte-melt/svelte.config.js
new file mode 100644
index 0000000000..6acad8bac2
--- /dev/null
+++ b/examples/svelte/svelte-melt/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+ // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+ // for more information about preprocessors
+ preprocess: vitePreprocess(),
+
+ kit: {
+ // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+ // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+ // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+ adapter: adapter(),
+ },
+}
+
+export default config
diff --git a/examples/svelte/svelte-melt/tsconfig.json b/examples/svelte/svelte-melt/tsconfig.json
new file mode 100644
index 0000000000..34aadc0285
--- /dev/null
+++ b/examples/svelte/svelte-melt/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "extends": "./.svelte-kit/tsconfig.json",
+ "compilerOptions": {
+ "allowJs": true,
+ "checkJs": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "sourceMap": true,
+ "strict": true,
+ "moduleResolution": "bundler"
+ }
+ // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+ //
+ // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+ // from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/examples/svelte/svelte-melt/vite.config.ts b/examples/svelte/svelte-melt/vite.config.ts
new file mode 100644
index 0000000000..dd1b8b7fa1
--- /dev/null
+++ b/examples/svelte/svelte-melt/vite.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ plugins: [sveltekit()],
+})
diff --git a/integrations/svelte-vite/package.json b/integrations/svelte-vite/package.json
index c8c9e3975e..a62720d492 100644
--- a/integrations/svelte-vite/package.json
+++ b/integrations/svelte-vite/package.json
@@ -6,10 +6,10 @@
"build": "vite build"
},
"devDependencies": {
- "@sveltejs/vite-plugin-svelte": "^3.1.1",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
"@tanstack/svelte-query": "workspace:*",
"@tanstack/svelte-query-devtools": "workspace:*",
- "svelte": "^4.2.18",
+ "svelte": "5.0.0-next.192",
"vite": "^5.3.5"
}
}
diff --git a/packages/svelte-query-devtools/package.json b/packages/svelte-query-devtools/package.json
index 43c8ac12f5..eba622384f 100644
--- a/packages/svelte-query-devtools/package.json
+++ b/packages/svelte-query-devtools/package.json
@@ -43,14 +43,14 @@
},
"devDependencies": {
"@sveltejs/package": "^2.3.2",
- "@sveltejs/vite-plugin-svelte": "^3.1.1",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
"@tanstack/svelte-query": "workspace:*",
"eslint-plugin-svelte": "^2.43.0",
- "svelte": "^4.2.18",
+ "svelte": "5.0.0-next.192",
"svelte-check": "^3.8.4"
},
"peerDependencies": {
"@tanstack/svelte-query": "workspace:^",
- "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
+ "svelte": "^5.0.0-next.105"
}
}
diff --git a/packages/svelte-query-devtools/src/Devtools.svelte b/packages/svelte-query-devtools/src/Devtools.svelte
index 654a4f7f1c..b29e30d261 100644
--- a/packages/svelte-query-devtools/src/Devtools.svelte
+++ b/packages/svelte-query-devtools/src/Devtools.svelte
@@ -10,13 +10,50 @@
TanstackQueryDevtools,
} from '@tanstack/query-devtools'
- export let initialIsOpen = false
- export let buttonPosition: DevtoolsButtonPosition = 'bottom-right'
- export let position: DevtoolsPosition = 'bottom'
- export let client: QueryClient = useQueryClient()
- export let errorTypes: Array
= []
- export let styleNonce: string | undefined = undefined
- export let shadowDOMTarget: ShadowRoot | undefined = undefined
+ interface DevtoolsOptions {
+ /**
+ * Set this true if you want the dev tools to default to being open
+ */
+ initialIsOpen?: boolean
+ /**
+ * The position of the TanStack Query logo to open and close the devtools panel.
+ * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+ * Defaults to 'bottom-right'.
+ */
+ buttonPosition?: DevtoolsButtonPosition
+ /**
+ * The position of the TanStack Query devtools panel.
+ * 'top' | 'bottom' | 'left' | 'right'
+ * Defaults to 'bottom'.
+ */
+ position?: DevtoolsPosition
+ /**
+ * Custom instance of QueryClient
+ */
+ client?: QueryClient
+ /**
+ * Use this so you can define custom errors that can be shown in the devtools.
+ */
+ errorTypes?: Array
+ /**
+ * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+ */
+ styleNonce?: string
+ /**
+ * Use this so you can attach the devtool's styles to specific element in the DOM.
+ */
+ shadowDOMTarget?: ShadowRoot
+ }
+
+ let {
+ initialIsOpen = false,
+ buttonPosition = 'bottom-right',
+ position = 'bottom',
+ client = useQueryClient(),
+ errorTypes = [],
+ styleNonce = undefined,
+ shadowDOMTarget = undefined,
+ }: DevtoolsOptions = $props()
let ref: HTMLDivElement
let devtools: TanstackQueryDevtools | undefined
@@ -41,20 +78,24 @@
devtools.mount(ref)
})
+ return () => devtools?.unmount()
+ })
- return () => {
- devtools?.unmount()
- }
+ $effect(() => {
+ devtools?.setButtonPosition(buttonPosition)
})
- }
- $: {
- if (devtools) {
- devtools.setButtonPosition(buttonPosition)
- devtools.setPosition(position)
- devtools.setInitialIsOpen(initialIsOpen)
- devtools.setErrorTypes(errorTypes)
- }
+ $effect(() => {
+ devtools?.setPosition(position)
+ })
+
+ $effect(() => {
+ devtools?.setInitialIsOpen(initialIsOpen)
+ })
+
+ $effect(() => {
+ devtools?.setErrorTypes(errorTypes)
+ })
}
diff --git a/packages/svelte-query-persist-client/package.json b/packages/svelte-query-persist-client/package.json
index 7da5a823de..49e08bf233 100644
--- a/packages/svelte-query-persist-client/package.json
+++ b/packages/svelte-query-persist-client/package.json
@@ -45,15 +45,15 @@
},
"devDependencies": {
"@sveltejs/package": "^2.3.2",
- "@sveltejs/vite-plugin-svelte": "^3.1.1",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
"@tanstack/svelte-query": "workspace:*",
"@testing-library/svelte": "^5.2.1",
"eslint-plugin-svelte": "^2.43.0",
- "svelte": "^4.2.18",
+ "svelte": "5.0.0-next.192",
"svelte-check": "^3.8.4"
},
"peerDependencies": {
"@tanstack/svelte-query": "workspace:^",
- "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
+ "svelte": "^5.0.0-next.105"
}
}
diff --git a/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte b/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte
index 5f5e04ada7..abe6ec471c 100644
--- a/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte
+++ b/packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte
@@ -1,43 +1,51 @@
-
-
+
+ {@render children()}
diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
index 2a7501660e..b9ccb7377f 100644
--- a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
+++ b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
@@ -1,20 +1,19 @@
-{$query.data}
-fetchStatus: {$query.fetchStatus}
+{query.data}
+fetchStatus: {query.fetchStatus}
diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
index c3087ac2fa..7d1201e0da 100644
--- a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
@@ -3,12 +3,15 @@
import AwaitOnSuccess from './AwaitOnSuccess.svelte'
import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
- import type { Writable } from 'svelte/store'
- export let queryClient: QueryClient
- export let persistOptions: OmitKeyof
- export let onSuccess: () => Promise
- export let states: Writable>
+ interface Props {
+ queryClient: QueryClient
+ persistOptions: OmitKeyof
+ onSuccess: () => Promise
+ states: Array
+ }
+
+ let { queryClient, persistOptions, onSuccess, states }: Props = $props()
diff --git a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
index fd46ffb5b6..0284becb09 100644
--- a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
+++ b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
@@ -1,16 +1,21 @@
-data: {$query.data ?? 'undefined'}
-fetchStatus: {$query.fetchStatus}
+data: {query.data ?? 'undefined'}
+fetchStatus: {query.fetchStatus}
diff --git a/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte b/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
index 75a9c1aefa..eb52193738 100644
--- a/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
@@ -3,13 +3,16 @@
import FreshData from './FreshData.svelte'
import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
- import type { Writable } from 'svelte/store'
- import type { StatusResult } from '../utils.js'
+ import type { StatusResult } from '../utils.svelte'
- export let queryClient: QueryClient
- export let persistOptions: OmitKeyof
- export let states: Writable>>
- export let fetched: Writable
+ interface Props {
+ queryClient: QueryClient
+ persistOptions: OmitKeyof
+ states: { value: Array> }
+ fetched: boolean
+ }
+
+ let { queryClient, persistOptions, states, fetched }: Props = $props()
diff --git a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
index 900c7f37cd..25695e07fc 100644
--- a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
+++ b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
@@ -1,10 +1,10 @@
-{$query.data}
-fetchStatus: {$query.fetchStatus}
+{query.data}
+fetchStatus: {query.fetchStatus}
diff --git a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
index e5e17f712e..d18b79aea3 100644
--- a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
@@ -3,12 +3,15 @@
import InitialData from './InitialData.svelte'
import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
- import type { Writable } from 'svelte/store'
- import type { StatusResult } from '../utils.js'
+ import type { StatusResult } from '../utils.svelte'
- export let queryClient: QueryClient
- export let persistOptions: OmitKeyof
- export let states: Writable>>
+ interface Props {
+ queryClient: QueryClient
+ persistOptions: OmitKeyof
+ states: { value: Array> }
+ }
+
+ let { queryClient, persistOptions, states }: Props = $props()
diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
index efd321ca8b..c07fee7267 100644
--- a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
+++ b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
@@ -1,6 +1,6 @@
-{$query.data}
-fetchStatus: {$query.fetchStatus}
+{query.data}
+fetchStatus: {query.fetchStatus}
diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte
index c0d2792771..0b280ca570 100644
--- a/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte
@@ -4,9 +4,13 @@
import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
- export let queryClient: QueryClient
- export let persistOptions: OmitKeyof
- export let onSuccess: () => void
+ interface Props {
+ queryClient: QueryClient
+ persistOptions: OmitKeyof
+ onSuccess: () => void
+ }
+
+ let { queryClient, persistOptions, onSuccess }: Props = $props()
diff --git a/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts b/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts
similarity index 79%
rename from packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts
rename to packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts
index 86b99cce90..e89387e474 100644
--- a/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts
+++ b/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts
@@ -1,7 +1,6 @@
import { render, waitFor } from '@testing-library/svelte'
import { describe, expect, test, vi } from 'vitest'
import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
-import { get, writable } from 'svelte/store'
import AwaitOnSuccess from './AwaitOnSuccess/Provider.svelte'
import FreshData from './FreshData/Provider.svelte'
import OnSuccess from './OnSuccess/Provider.svelte'
@@ -9,14 +8,13 @@ import InitialData from './InitialData/Provider.svelte'
import RemoveCache from './RemoveCache/Provider.svelte'
import RestoreCache from './RestoreCache/Provider.svelte'
import UseQueries from './UseQueries/Provider.svelte'
-import { createQueryClient, sleep } from './utils.js'
+import { createQueryClient, ref, sleep } from './utils.svelte'
import type {
PersistedClient,
Persister,
} from '@tanstack/query-persist-client-core'
-import type { Writable } from 'svelte/store'
-import type { StatusResult } from './utils.js'
+import type { StatusResult } from './utils.svelte'
const createMockPersister = (): Persister => {
let storedState: PersistedClient | undefined
@@ -56,7 +54,7 @@ const createMockErrorPersister = (
describe('PersistQueryClientProvider', () => {
test('restores cache from persister', async () => {
- const statesStore: Writable>> = writable([])
+ let states = ref>>([])
const queryClient = createQueryClient()
await queryClient.prefetchQuery({
@@ -74,7 +72,7 @@ describe('PersistQueryClientProvider', () => {
props: {
queryClient,
persistOptions: { persister },
- states: statesStore,
+ states,
},
})
@@ -82,36 +80,35 @@ describe('PersistQueryClientProvider', () => {
await waitFor(() => rendered.getByText('hydrated'))
await waitFor(() => rendered.getByText('fetched'))
- const states = get(statesStore)
- expect(states).toHaveLength(4)
+ expect(states.value).toHaveLength(3)
- expect(states[0]).toMatchObject({
+ expect(states.value[0]).toMatchObject({
status: 'pending',
fetchStatus: 'idle',
data: undefined,
})
- expect(states[1]).toMatchObject({
+ expect(states.value[1]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
})
- expect(states[2]).toMatchObject({
+ expect(states.value[2]).toMatchObject({
status: 'success',
- fetchStatus: 'fetching',
- data: 'hydrated',
+ fetchStatus: 'idle',
+ data: 'fetched',
})
- expect(states[3]).toMatchObject({
+ /* expect(states[3]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'fetched',
- })
+ }) */
})
test('should also put useQueries into idle state', async () => {
- const statesStore: Writable>> = writable([])
+ let states = ref>>([])
const queryClient = createQueryClient()
await queryClient.prefetchQuery({
@@ -129,7 +126,7 @@ describe('PersistQueryClientProvider', () => {
props: {
queryClient,
persistOptions: { persister },
- states: statesStore,
+ states,
},
})
@@ -137,29 +134,21 @@ describe('PersistQueryClientProvider', () => {
await waitFor(() => rendered.getByText('hydrated'))
await waitFor(() => rendered.getByText('fetched'))
- const states = get(statesStore)
-
- expect(states).toHaveLength(4)
+ expect(states.value).toHaveLength(3)
- expect(states[0]).toMatchObject({
+ expect(states.value[0]).toMatchObject({
status: 'pending',
fetchStatus: 'idle',
data: undefined,
})
- expect(states[1]).toMatchObject({
+ expect(states.value[1]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
})
- expect(states[2]).toMatchObject({
- status: 'success',
- fetchStatus: 'fetching',
- data: 'hydrated',
- })
-
- expect(states[3]).toMatchObject({
+ expect(states.value[2]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'fetched',
@@ -167,7 +156,7 @@ describe('PersistQueryClientProvider', () => {
})
test('should show initialData while restoring', async () => {
- const statesStore: Writable>> = writable([])
+ let states = ref>>([])
const queryClient = createQueryClient()
await queryClient.prefetchQuery({
@@ -185,7 +174,7 @@ describe('PersistQueryClientProvider', () => {
props: {
queryClient,
persistOptions: { persister },
- states: statesStore,
+ states,
},
})
@@ -193,28 +182,27 @@ describe('PersistQueryClientProvider', () => {
await waitFor(() => rendered.getByText('hydrated'))
await waitFor(() => rendered.getByText('fetched'))
- const states = get(statesStore)
- expect(states).toHaveLength(4)
+ expect(states.value).toHaveLength(3)
- expect(states[0]).toMatchObject({
+ expect(states.value[0]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'initial',
})
- expect(states[1]).toMatchObject({
+ expect(states.value[1]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
})
- expect(states[2]).toMatchObject({
+ /* expect(states[2]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
- })
+ }) */
- expect(states[3]).toMatchObject({
+ expect(states.value[2]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'fetched',
@@ -222,7 +210,7 @@ describe('PersistQueryClientProvider', () => {
})
test('should not refetch after restoring when data is fresh', async () => {
- const statesStore: Writable>> = writable([])
+ let states = ref>>([])
const queryClient = createQueryClient()
await queryClient.prefetchQuery({
@@ -236,13 +224,13 @@ describe('PersistQueryClientProvider', () => {
queryClient.clear()
- const fetched = writable(false)
+ const fetched = $state(false)
const rendered = render(FreshData, {
props: {
queryClient,
persistOptions: { persister },
- states: statesStore,
+ states,
fetched,
},
})
@@ -250,18 +238,17 @@ describe('PersistQueryClientProvider', () => {
await waitFor(() => rendered.getByText('data: undefined'))
await waitFor(() => rendered.getByText('data: hydrated'))
- const states = get(statesStore)
- expect(states).toHaveLength(2)
+ expect(fetched).toBe(false)
- expect(get(fetched)).toBe(false)
+ expect(states.value).toHaveLength(2)
- expect(states[0]).toMatchObject({
+ expect(states.value[0]).toMatchObject({
status: 'pending',
fetchStatus: 'idle',
data: undefined,
})
- expect(states[1]).toMatchObject({
+ expect(states.value[1]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'hydrated',
@@ -311,17 +298,17 @@ describe('PersistQueryClientProvider', () => {
queryClient.clear()
- const statesStore: Writable> = writable([])
+ let states: Array = $state([])
const rendered = render(AwaitOnSuccess, {
props: {
queryClient,
persistOptions: { persister },
- states: statesStore,
+ states,
onSuccess: async () => {
- statesStore.update((s) => [...s, 'onSuccess'])
- await sleep(20)
- statesStore.update((s) => [...s, 'onSuccess done'])
+ states.push('onSuccess')
+ await sleep(5)
+ states.push('onSuccess done')
},
},
})
@@ -329,8 +316,6 @@ describe('PersistQueryClientProvider', () => {
await waitFor(() => rendered.getByText('hydrated'))
await waitFor(() => rendered.getByText('fetched'))
- const states = get(statesStore)
-
expect(states).toEqual([
'onSuccess',
'onSuccess done',
diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte
index 8738e99bd5..32e3430c4d 100644
--- a/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte
@@ -4,8 +4,12 @@
import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
- export let queryClient: QueryClient
- export let persistOptions: OmitKeyof
+ interface Props {
+ queryClient: QueryClient
+ persistOptions: OmitKeyof
+ }
+
+ let { queryClient, persistOptions }: Props = $props()
diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
index efd321ca8b..c07fee7267 100644
--- a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
+++ b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
@@ -1,6 +1,6 @@
-{$query.data}
-fetchStatus: {$query.fetchStatus}
+{query.data}
+fetchStatus: {query.fetchStatus}
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
index 531aae8c3f..c300d5010a 100644
--- a/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
@@ -3,12 +3,15 @@
import RestoreCache from './RestoreCache.svelte'
import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
- import type { Writable } from 'svelte/store'
- import type { StatusResult } from '../utils.js'
+ import type { StatusResult } from '../utils.svelte'
- export let queryClient: QueryClient
- export let persistOptions: OmitKeyof
- export let states: Writable>>
+ interface Props {
+ queryClient: QueryClient
+ persistOptions: OmitKeyof
+ states: { value: Array> }
+ }
+
+ let { queryClient, persistOptions, states }: Props = $props()
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
index 15b3a92df9..e7e04e3900 100644
--- a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
+++ b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
@@ -1,10 +1,10 @@
-{$query.data}
-fetchStatus: {$query.fetchStatus}
+{query.data}
+fetchStatus: {query.fetchStatus}
diff --git a/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte b/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte
index 56429b7d81..41a743b5f1 100644
--- a/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte
+++ b/packages/svelte-query-persist-client/tests/UseQueries/Provider.svelte
@@ -3,12 +3,15 @@
import UseQueries from './UseQueries.svelte'
import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
- import type { Writable } from 'svelte/store'
- import type { StatusResult } from '../utils.js'
+ import type { StatusResult } from '../utils.svelte'
- export let queryClient: QueryClient
- export let persistOptions: OmitKeyof
- export let states: Writable>>
+ interface Props {
+ queryClient: QueryClient
+ persistOptions: OmitKeyof
+ states: { value: Array> }
+ }
+
+ let { queryClient, persistOptions, states }: Props = $props()
diff --git a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
index 75ec9dc4e3..50170142ae 100644
--- a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
+++ b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
@@ -1,10 +1,10 @@
-{$queries[0].data}
-fetchStatus: {$queries[0].fetchStatus}
+{queries[0].data}
+fetchStatus: {queries[0].fetchStatus}
diff --git a/packages/svelte-query-persist-client/tests/utils.ts b/packages/svelte-query-persist-client/tests/utils.svelte.ts
similarity index 72%
rename from packages/svelte-query-persist-client/tests/utils.ts
rename to packages/svelte-query-persist-client/tests/utils.svelte.ts
index b246d49a35..8e59db6139 100644
--- a/packages/svelte-query-persist-client/tests/utils.ts
+++ b/packages/svelte-query-persist-client/tests/utils.svelte.ts
@@ -17,3 +17,16 @@ export type StatusResult = {
fetchStatus: string
data: T | undefined
}
+
+export function ref(initial: T) {
+ let value = $state(initial)
+
+ return {
+ get value() {
+ return value
+ },
+ set value(newValue) {
+ value = newValue
+ },
+ }
+}
diff --git a/packages/svelte-query/package.json b/packages/svelte-query/package.json
index d78a62c2c1..3999255ced 100644
--- a/packages/svelte-query/package.json
+++ b/packages/svelte-query/package.json
@@ -45,13 +45,13 @@
},
"devDependencies": {
"@sveltejs/package": "^2.3.2",
- "@sveltejs/vite-plugin-svelte": "^3.1.1",
+ "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
"@testing-library/svelte": "^5.2.1",
"eslint-plugin-svelte": "^2.43.0",
- "svelte": "^4.2.18",
+ "svelte": "5.0.0-next.192",
"svelte-check": "^3.8.4"
},
"peerDependencies": {
- "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
+ "svelte": "^5.0.0-next.105"
}
}
diff --git a/packages/svelte-query/src/HydrationBoundary.svelte b/packages/svelte-query/src/HydrationBoundary.svelte
index 330984311f..2550fa656d 100644
--- a/packages/svelte-query/src/HydrationBoundary.svelte
+++ b/packages/svelte-query/src/HydrationBoundary.svelte
@@ -1,16 +1,27 @@
-
+{@render children()}
diff --git a/packages/svelte-query/src/QueryClientProvider.svelte b/packages/svelte-query/src/QueryClientProvider.svelte
index 9f43e49093..c45aa5d809 100644
--- a/packages/svelte-query/src/QueryClientProvider.svelte
+++ b/packages/svelte-query/src/QueryClientProvider.svelte
@@ -1,9 +1,11 @@
-
+{@render children()}
diff --git a/packages/svelte-query/src/context.ts b/packages/svelte-query/src/context.ts
index 962451b232..0676181f57 100644
--- a/packages/svelte-query/src/context.ts
+++ b/packages/svelte-query/src/context.ts
@@ -1,7 +1,5 @@
import { getContext, setContext } from 'svelte'
-import { readable } from 'svelte/store'
import type { QueryClient } from '@tanstack/query-core'
-import type { Readable } from 'svelte/store'
const _contextKey = '$$_queryClient'
@@ -25,18 +23,18 @@ export const setQueryClientContext = (client: QueryClient): void => {
const _isRestoringContextKey = '$$_isRestoring'
/** Retrieves a `isRestoring` from Svelte's context */
-export const getIsRestoringContext = (): Readable => {
+export const getIsRestoringContext = (): (() => boolean) => {
try {
- const isRestoring = getContext | undefined>(
+ const isRestoring = getContext<(() => boolean) | undefined>(
_isRestoringContextKey,
)
- return isRestoring ? isRestoring : readable(false)
+ return isRestoring ?? (() => false)
} catch (error) {
- return readable(false)
+ return () => false
}
}
/** Sets a `isRestoring` on Svelte's context */
-export const setIsRestoringContext = (isRestoring: Readable): void => {
+export const setIsRestoringContext = (isRestoring: () => boolean): void => {
setContext(_isRestoringContextKey, isRestoring)
}
diff --git a/packages/svelte-query/src/createBaseQuery.svelte.ts b/packages/svelte-query/src/createBaseQuery.svelte.ts
new file mode 100644
index 0000000000..f5427bd664
--- /dev/null
+++ b/packages/svelte-query/src/createBaseQuery.svelte.ts
@@ -0,0 +1,117 @@
+import { notifyManager } from '@tanstack/query-core'
+import { untrack } from 'svelte'
+import { useIsRestoring } from './useIsRestoring'
+import { useQueryClient } from './useQueryClient'
+import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types'
+import type {
+ QueryClient,
+ QueryKey,
+ QueryObserver,
+ QueryObserverResult,
+} from '@tanstack/query-core'
+
+export function createBaseQuery<
+ TQueryFnData,
+ TError,
+ TData,
+ TQueryData,
+ TQueryKey extends QueryKey,
+>(
+ options: CreateBaseQueryOptions<
+ TQueryFnData,
+ TError,
+ TData,
+ TQueryData,
+ TQueryKey
+ >,
+ Observer: typeof QueryObserver,
+ queryClient?: QueryClient,
+): CreateBaseQueryResult {
+ /** Load query client */
+ const client = useQueryClient(queryClient)
+ const isRestoring = useIsRestoring()
+ const optionsStore = typeof options !== 'function' ? () => options : options
+
+ /** Creates a store that has the default options applied */
+ function updateOptions() {
+ const key = optionsStore().queryKey
+ const keyFn = typeof key === 'function' ? key : () => key // allow query-key and enable to be a function
+ const queryKey: TQueryKey = $state.snapshot(keyFn()) as any // remove proxy prevent reactive query in devTools
+ let tempEnable = optionsStore().enabled
+ const defaultedOptions = client.defaultQueryOptions({
+ ...optionsStore(),
+ queryKey: queryKey,
+ enabled: typeof tempEnable == 'function' ? tempEnable() : tempEnable,
+ })
+ defaultedOptions._optimisticResults = 'optimistic'
+ if (isRestoring()) {
+ defaultedOptions._optimisticResults = 'isRestoring'
+ }
+
+ defaultedOptions.structuralSharing = false
+
+ return defaultedOptions
+ }
+
+ const defaultedOptionsStore = updateOptions
+ /** Creates the observer */
+ const observer = new Observer<
+ TQueryFnData,
+ TError,
+ TData,
+ TQueryData,
+ TQueryKey
+ >(client, defaultedOptionsStore())
+
+ const result = $state>(
+ observer.getOptimisticResult(defaultedOptionsStore()),
+ )
+
+ function upResult(r: QueryObserverResult) {
+ Object.assign(result, r)
+ }
+
+ $effect(() => {
+ let un = () => undefined
+ if (!isRestoring()) {
+ {
+ // @ts-expect-error
+ un = observer.subscribe((v) => {
+ notifyManager.batchCalls(() => {
+ const temp = observer.getOptimisticResult(defaultedOptionsStore())
+ upResult(temp)
+ })()
+ })
+ }
+ }
+
+ observer.updateResult()
+ return () => {
+ un()
+ }
+ })
+
+ /** Subscribe to changes in result and defaultedOptionsStore */
+ $effect.pre(() => {
+ observer.setOptions(defaultedOptionsStore(), { listeners: false })
+ upResult(observer.getOptimisticResult(defaultedOptionsStore()))
+ // result = observer.getOptimisticResult(defaultedOptionsStore()) //prevent lag , somehow observer.subscribe does not return
+ })
+
+ const final_ = $state({ value: result })
+
+ // update result
+ $effect(() => {
+ // svelte does not need this with it is proxy state and fine-grained reactivity?
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+ if (result !== null)
+ untrack(() => {
+ const v = !defaultedOptionsStore().notifyOnChangeProps
+ ? observer.trackResult(result)
+ : result
+
+ final_.value = Object.assign(final_.value, v)
+ })
+ })
+ return final_.value
+}
diff --git a/packages/svelte-query/src/createBaseQuery.ts b/packages/svelte-query/src/createBaseQuery.ts
deleted file mode 100644
index 3b33485905..0000000000
--- a/packages/svelte-query/src/createBaseQuery.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { derived, get, readable } from 'svelte/store'
-import { notifyManager } from '@tanstack/query-core'
-import { useIsRestoring } from './useIsRestoring.js'
-import { useQueryClient } from './useQueryClient.js'
-import { isSvelteStore } from './utils.js'
-import type {
- QueryClient,
- QueryKey,
- QueryObserver,
- QueryObserverResult,
-} from '@tanstack/query-core'
-import type {
- CreateBaseQueryOptions,
- CreateBaseQueryResult,
- StoreOrVal,
-} from './types.js'
-
-export function createBaseQuery<
- TQueryFnData,
- TError,
- TData,
- TQueryData,
- TQueryKey extends QueryKey,
->(
- options: StoreOrVal<
- CreateBaseQueryOptions
- >,
- Observer: typeof QueryObserver,
- queryClient?: QueryClient,
-): CreateBaseQueryResult {
- /** Load query client */
- const client = useQueryClient(queryClient)
- const isRestoring = useIsRestoring()
- /** Converts options to a svelte store if not already a store object */
- const optionsStore = isSvelteStore(options) ? options : readable(options)
-
- /** Creates a store that has the default options applied */
- const defaultedOptionsStore = derived(
- [optionsStore, isRestoring],
- ([$optionsStore, $isRestoring]) => {
- const defaultedOptions = client.defaultQueryOptions($optionsStore)
- defaultedOptions._optimisticResults = $isRestoring
- ? 'isRestoring'
- : 'optimistic'
- return defaultedOptions
- },
- )
-
- /** Creates the observer */
- const observer = new Observer<
- TQueryFnData,
- TError,
- TData,
- TQueryData,
- TQueryKey
- >(client, get(defaultedOptionsStore))
-
- 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 })
- })
-
- const result = derived<
- typeof isRestoring,
- QueryObserverResult
- >(isRestoring, ($isRestoring, set) => {
- const unsubscribe = $isRestoring
- ? () => undefined
- : observer.subscribe(notifyManager.batchCalls(set))
- observer.updateResult()
- return unsubscribe
- })
-
- /** Subscribe to changes in result and defaultedOptionsStore */
- const { subscribe } = derived(
- [result, defaultedOptionsStore],
- ([$result, $defaultedOptionsStore]) => {
- $result = observer.getOptimisticResult($defaultedOptionsStore)
- return !$defaultedOptionsStore.notifyOnChangeProps
- ? observer.trackResult($result)
- : $result
- },
- )
-
- return { subscribe }
-}
diff --git a/packages/svelte-query/src/createInfiniteQuery.ts b/packages/svelte-query/src/createInfiniteQuery.ts
index 7137800298..7cd72b7aec 100644
--- a/packages/svelte-query/src/createInfiniteQuery.ts
+++ b/packages/svelte-query/src/createInfiniteQuery.ts
@@ -1,5 +1,5 @@
import { InfiniteQueryObserver } from '@tanstack/query-core'
-import { createBaseQuery } from './createBaseQuery.js'
+import { createBaseQuery } from './createBaseQuery.svelte'
import type {
DefaultError,
InfiniteData,
@@ -10,8 +10,7 @@ import type {
import type {
CreateInfiniteQueryOptions,
CreateInfiniteQueryResult,
- StoreOrVal,
-} from './types.js'
+} from './types'
export function createInfiniteQuery<
TQueryFnData,
@@ -20,15 +19,13 @@ export function createInfiniteQuery<
TQueryKey extends QueryKey = QueryKey,
TPageParam = unknown,
>(
- options: StoreOrVal<
- CreateInfiniteQueryOptions<
- TQueryFnData,
- TError,
- TData,
- TQueryFnData,
- TQueryKey,
- TPageParam
- >
+ options: CreateInfiniteQueryOptions<
+ TQueryFnData,
+ TError,
+ TData,
+ TQueryFnData,
+ TQueryKey,
+ TPageParam
>,
queryClient?: QueryClient,
): CreateInfiniteQueryResult {
diff --git a/packages/svelte-query/src/createMutation.svelte.ts b/packages/svelte-query/src/createMutation.svelte.ts
new file mode 100644
index 0000000000..b3b221ed1a
--- /dev/null
+++ b/packages/svelte-query/src/createMutation.svelte.ts
@@ -0,0 +1,64 @@
+import { onDestroy } from 'svelte'
+
+import { MutationObserver, notifyManager } from '@tanstack/query-core'
+import { useQueryClient } from './useQueryClient'
+import type {
+ CreateMutateFunction,
+ CreateMutationOptions,
+ CreateMutationResult,
+} from './types'
+
+import type { DefaultError, QueryClient } from '@tanstack/query-core'
+
+export function createMutation<
+ TData = unknown,
+ TError = DefaultError,
+ TVariables = void,
+ TContext = unknown,
+>(
+ options: CreateMutationOptions,
+ queryClient?: QueryClient,
+): CreateMutationResult {
+ const client = useQueryClient(queryClient)
+
+ const observer = $derived(
+ new MutationObserver(client, options),
+ )
+ const mutate = $state<
+ CreateMutateFunction
+ >((variables, mutateOptions) => {
+ observer.mutate(variables, mutateOptions).catch(noop)
+ })
+
+ $effect.pre(() => {
+ observer.setOptions(options)
+ })
+
+ const result = $state(observer.getCurrentResult())
+
+ const un = observer.subscribe((val) => {
+ notifyManager.batchCalls(() => {
+ Object.assign(result, val)
+
+ // result = val
+ })()
+ })
+ onDestroy(() => {
+ un()
+ })
+ // @ts-expect-error
+ return new Proxy(result, {
+ get: (_, prop) => {
+ const r = {
+ ...result,
+ mutate,
+ mutateAsync: result.mutate,
+ }
+ if (prop == 'value') return r
+ // @ts-expect-error
+ return r[prop]
+ },
+ })
+}
+
+function noop() {}
diff --git a/packages/svelte-query/src/createMutation.ts b/packages/svelte-query/src/createMutation.ts
deleted file mode 100644
index 96198c3c1f..0000000000
--- a/packages/svelte-query/src/createMutation.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { derived, get, readable } from 'svelte/store'
-import { MutationObserver, notifyManager } from '@tanstack/query-core'
-import { useQueryClient } from './useQueryClient.js'
-import { isSvelteStore, noop } from './utils.js'
-import type {
- CreateMutateFunction,
- CreateMutationOptions,
- CreateMutationResult,
- StoreOrVal,
-} from './types.js'
-import type { DefaultError, QueryClient } from '@tanstack/query-core'
-
-export function createMutation<
- TData = unknown,
- TError = DefaultError,
- TVariables = void,
- TContext = unknown,
->(
- options: StoreOrVal<
- CreateMutationOptions
- >,
- queryClient?: QueryClient,
-): CreateMutationResult {
- const client = useQueryClient(queryClient)
-
- const optionsStore = isSvelteStore(options) ? options : readable(options)
-
- const observer = new MutationObserver(
- client,
- get(optionsStore),
- )
- let mutate: CreateMutateFunction
-
- optionsStore.subscribe(($options) => {
- mutate = (variables, mutateOptions) => {
- observer.mutate(variables, mutateOptions).catch(noop)
- }
- observer.setOptions($options)
- })
-
- const result = readable(observer.getCurrentResult(), (set) => {
- return observer.subscribe(notifyManager.batchCalls((val) => set(val)))
- })
-
- const { subscribe } = derived(result, ($result) => ({
- ...$result,
- mutate,
- mutateAsync: $result.mutate,
- }))
-
- return { subscribe }
-}
diff --git a/packages/svelte-query/src/createQueries.ts b/packages/svelte-query/src/createQueries.svelte.ts
similarity index 83%
rename from packages/svelte-query/src/createQueries.ts
rename to packages/svelte-query/src/createQueries.svelte.ts
index f648ab62e7..f46d9dd258 100644
--- a/packages/svelte-query/src/createQueries.ts
+++ b/packages/svelte-query/src/createQueries.svelte.ts
@@ -1,10 +1,8 @@
+import { untrack } from 'svelte'
import { QueriesObserver, notifyManager } from '@tanstack/query-core'
-import { derived, get, readable } from 'svelte/store'
-import { useIsRestoring } from './useIsRestoring.js'
-import { useQueryClient } from './useQueryClient.js'
-import { isSvelteStore } from './utils.js'
-import type { Readable } from 'svelte/store'
-import type { StoreOrVal } from './types.js'
+import { useIsRestoring } from './useIsRestoring'
+import { useQueryClient } from './useQueryClient'
+import type { FnOrVal } from '.'
import type {
DefaultError,
DefinedQueryObserverResult,
@@ -121,7 +119,7 @@ type GetCreateQueryResult =
unknown extends TError ? DefaultError : TError
>
: // Fallback
- QueryObserverResult
+ never
/**
* QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
@@ -210,68 +208,71 @@ export function createQueries<
queries,
...options
}: {
- queries: StoreOrVal<[...QueriesOptions]>
+ queries: FnOrVal<[...QueriesOptions]>
combine?: (result: QueriesResults) => TCombinedResult
},
queryClient?: QueryClient,
-): Readable {
+): TCombinedResult {
const client = useQueryClient(queryClient)
const isRestoring = useIsRestoring()
- const queriesStore = isSvelteStore(queries) ? queries : readable(queries)
-
- const defaultedQueriesStore = derived(
- [queriesStore, isRestoring],
- ([$queries, $isRestoring]) => {
- return $queries.map((opts) => {
- const defaultedOptions = client.defaultQueryOptions(
- opts as QueryObserverOptions,
- )
- // Make sure the results are already in fetching state before subscribing or updating options
- defaultedOptions._optimisticResults = $isRestoring
- ? 'isRestoring'
- : 'optimistic'
- return defaultedOptions
- })
- },
+ const queriesStore = $derived(
+ typeof queries != 'function' ? () => queries : queries,
)
+
+ const defaultedQueriesStore = $derived(() => {
+ return queriesStore().map((opts) => {
+ const defaultedOptions = client.defaultQueryOptions(opts)
+ // Make sure the results are already in fetching state before subscribing or updating options
+ defaultedOptions._optimisticResults = isRestoring()
+ ? 'isRestoring'
+ : 'optimistic'
+ return defaultedOptions as QueryObserverOptions
+ })
+ })
const observer = new QueriesObserver(
client,
- get(defaultedQueriesStore),
+ defaultedQueriesStore(),
options as QueriesObserverOptions,
)
-
- defaultedQueriesStore.subscribe(($defaultedQueries) => {
+ const [_, getCombinedResult, trackResult] = $derived(
+ observer.getOptimisticResult(
+ defaultedQueriesStore(),
+ (options as QueriesObserverOptions).combine,
+ ),
+ )
+ $effect(() => {
// 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,
+ defaultedQueriesStore(),
options as QueriesObserverOptions,
{ listeners: false },
)
})
- const result = derived([isRestoring], ([$isRestoring], set) => {
- const unsubscribe = $isRestoring
- ? () => undefined
- : observer.subscribe(notifyManager.batchCalls(set))
+ let result = $state(getCombinedResult(trackResult()))
- return () => unsubscribe()
- })
+ $effect(() => {
+ if (isRestoring()) {
+ return () => null
+ }
+ untrack(() => {
+ // @ts-expect-error
+ Object.assign(result, getCombinedResult(trackResult()))
+ })
- const { subscribe } = derived(
- [result, defaultedQueriesStore],
- // @ts-expect-error svelte-check thinks this is unused
- ([$result, $defaultedQueriesStore]) => {
- const [rawResult, combineResult, trackResult] =
- observer.getOptimisticResult(
- $defaultedQueriesStore,
+ return observer.subscribe((_result) => {
+ notifyManager.batchCalls(() => {
+ const res = observer.getOptimisticResult(
+ defaultedQueriesStore(),
(options as QueriesObserverOptions).combine,
)
- $result = rawResult
- return combineResult(trackResult())
- },
- )
+ // @ts-expect-error
+ Object.assign(result, res[1](res[2]()))
+ })()
+ })
+ })
- return { subscribe }
+ return result
}
diff --git a/packages/svelte-query/src/createQuery.ts b/packages/svelte-query/src/createQuery.ts
index 51a43c274c..03444c9dd5 100644
--- a/packages/svelte-query/src/createQuery.ts
+++ b/packages/svelte-query/src/createQuery.ts
@@ -1,12 +1,11 @@
import { QueryObserver } from '@tanstack/query-core'
-import { createBaseQuery } from './createBaseQuery.js'
+import { createBaseQuery } from './createBaseQuery.svelte'
import type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'
import type {
CreateQueryOptions,
CreateQueryResult,
DefinedCreateQueryResult,
- StoreOrVal,
-} from './types.js'
+} from './types'
import type {
DefinedInitialDataOptions,
UndefinedInitialDataOptions,
@@ -18,9 +17,7 @@ export function createQuery<
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
- options: StoreOrVal<
- DefinedInitialDataOptions
- >,
+ options: DefinedInitialDataOptions,
queryClient?: QueryClient,
): DefinedCreateQueryResult
@@ -30,9 +27,7 @@ export function createQuery<
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
- options: StoreOrVal<
- UndefinedInitialDataOptions
- >,
+ options: UndefinedInitialDataOptions,
queryClient?: QueryClient,
): CreateQueryResult
@@ -42,14 +37,12 @@ export function createQuery<
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
- options: StoreOrVal<
- CreateQueryOptions
- >,
+ options: CreateQueryOptions,
queryClient?: QueryClient,
): CreateQueryResult
export function createQuery(
- options: StoreOrVal,
+ options: CreateQueryOptions,
queryClient?: QueryClient,
) {
return createBaseQuery(options, QueryObserver, queryClient)
diff --git a/packages/svelte-query/src/index.ts b/packages/svelte-query/src/index.ts
index 735cd89f59..ca399cbd47 100644
--- a/packages/svelte-query/src/index.ts
+++ b/packages/svelte-query/src/index.ts
@@ -7,22 +7,22 @@ export * from '@tanstack/query-core'
export * from './types.js'
export * from './context.js'
-export { createQuery } from './createQuery.js'
-export type { QueriesResults, QueriesOptions } from './createQueries.js'
+export { createQuery } from './createQuery'
+export type { QueriesResults, QueriesOptions } from './createQueries.svelte'
export type {
DefinedInitialDataOptions,
UndefinedInitialDataOptions,
-} from './queryOptions.js'
-export { queryOptions } from './queryOptions.js'
-export { createQueries } from './createQueries.js'
-export { createInfiniteQuery } from './createInfiniteQuery.js'
-export { infiniteQueryOptions } from './infiniteQueryOptions.js'
-export { createMutation } from './createMutation.js'
-export { useMutationState } from './useMutationState.js'
-export { useQueryClient } from './useQueryClient.js'
-export { useIsFetching } from './useIsFetching.js'
-export { useIsMutating } from './useIsMutating.js'
-export { useIsRestoring } from './useIsRestoring.js'
-export { useHydrate } from './useHydrate.js'
+} from './queryOptions'
+export { queryOptions } from './queryOptions'
+export { createQueries } from './createQueries.svelte'
+export { createInfiniteQuery } from './createInfiniteQuery'
+export { infiniteQueryOptions } from './infiniteQueryOptions'
+export { createMutation } from './createMutation.svelte'
+export { useMutationState } from './useMutationState.svelte'
+export { useQueryClient } from './useQueryClient'
+export { useIsFetching } from './useIsFetching.svelte'
+export { useIsMutating } from './useIsMutating.svelte'
+export { useIsRestoring } from './useIsRestoring'
+export { useHydrate } from './useHydrate'
export { default as HydrationBoundary } from './HydrationBoundary.svelte'
export { default as QueryClientProvider } from './QueryClientProvider.svelte'
diff --git a/packages/svelte-query/src/types.ts b/packages/svelte-query/src/types.ts
index 4fd8bdb271..42d2c751a0 100644
--- a/packages/svelte-query/src/types.ts
+++ b/packages/svelte-query/src/types.ts
@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte'
import type {
DefaultError,
DefinedQueryObserverResult,
@@ -9,15 +10,13 @@ import type {
MutationObserverOptions,
MutationObserverResult,
MutationState,
- OmitKeyof,
+ QueryClient,
QueryKey,
QueryObserverOptions,
QueryObserverResult,
} from '@tanstack/query-core'
-import type { Readable } from 'svelte/store'
-/** Allows a type to be either the base object or a store of that object */
-export type StoreOrVal = T | Readable
+export type FnOrVal = (() => T) | T // can be a fn that returns reactive statement or $state or $derived deep states
/** Options for createBaseQuery */
export type CreateBaseQueryOptions<
@@ -26,13 +25,18 @@ export type CreateBaseQueryOptions<
TData = TQueryFnData,
TQueryData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
-> = QueryObserverOptions
+> = FnOrVal<
+ Omit<
+ QueryObserverOptions,
+ 'queryKey' | 'enabled'
+ > & { enabled?: FnOrVal; queryKey: FnOrVal }
+>
/** Result from createBaseQuery */
export type CreateBaseQueryResult<
TData = unknown,
TError = DefaultError,
-> = Readable>
+> = QueryObserverResult
/** Options for createQuery */
export type CreateQueryOptions<
@@ -56,26 +60,31 @@ export type CreateInfiniteQueryOptions<
TQueryData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
TPageParam = unknown,
-> = InfiniteQueryObserverOptions<
- TQueryFnData,
- TError,
- TData,
- TQueryData,
- TQueryKey,
- TPageParam
+> = FnOrVal<
+ Omit<
+ InfiniteQueryObserverOptions<
+ TQueryFnData,
+ TError,
+ TData,
+ TQueryData,
+ TQueryKey,
+ TPageParam
+ >,
+ 'queryKey' | 'enabled'
+ > & { enabled?: FnOrVal; queryKey: FnOrVal }
>
/** Result from createInfiniteQuery */
export type CreateInfiniteQueryResult<
TData = unknown,
TError = DefaultError,
-> = Readable>
+> = InfiniteQueryObserverResult
/** Options for createBaseQuery with initialData */
export type DefinedCreateBaseQueryResult<
TData = unknown,
TError = DefaultError,
-> = Readable>
+> = DefinedQueryObserverResult
/** Options for createQuery with initialData */
export type DefinedCreateQueryResult<
@@ -89,9 +98,9 @@ export type CreateMutationOptions<
TError = DefaultError,
TVariables = void,
TContext = unknown,
-> = OmitKeyof<
+> = Omit<
MutationObserverOptions,
- '_defaulted'
+ '_defaulted' | 'variables'
>
export type CreateMutateFunction<
@@ -128,7 +137,7 @@ export type CreateMutationResult<
TError = DefaultError,
TVariables = unknown,
TContext = unknown,
-> = Readable>
+> = CreateBaseMutationResult
type Override = {
[AKey in keyof TTargetA]: AKey extends keyof TTargetB
@@ -143,3 +152,8 @@ export type MutationStateOptions = {
mutation: Mutation,
) => TResult
}
+
+export type QueryClientProviderProps = {
+ client: QueryClient
+ children: Snippet
+}
diff --git a/packages/svelte-query/src/useIsFetching.svelte.ts b/packages/svelte-query/src/useIsFetching.svelte.ts
new file mode 100644
index 0000000000..c15527e43a
--- /dev/null
+++ b/packages/svelte-query/src/useIsFetching.svelte.ts
@@ -0,0 +1,23 @@
+import { onDestroy } from 'svelte'
+import { useQueryClient } from './useQueryClient'
+import type { QueryClient, QueryFilters } from '@tanstack/query-core'
+
+export function useIsFetching(
+ filters?: QueryFilters,
+ queryClient?: QueryClient,
+): () => number {
+ const client = useQueryClient(queryClient)
+ const queryCache = client.getQueryCache()
+
+ const init = client.isFetching(filters)
+ let isFetching = $state(init)
+ $effect(() => {
+ const unsubscribe = queryCache.subscribe(() => {
+ isFetching = client.isFetching(filters)
+ })
+
+ onDestroy(unsubscribe)
+ })
+
+ return () => isFetching
+}
diff --git a/packages/svelte-query/src/useIsFetching.ts b/packages/svelte-query/src/useIsFetching.ts
deleted file mode 100644
index 729dea9412..0000000000
--- a/packages/svelte-query/src/useIsFetching.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
- type QueryClient,
- type QueryFilters,
- notifyManager,
-} from '@tanstack/query-core'
-import { readable } from 'svelte/store'
-import { useQueryClient } from './useQueryClient.js'
-import type { Readable } from 'svelte/store'
-
-export function useIsFetching(
- filters?: QueryFilters,
- queryClient?: QueryClient,
-): Readable {
- const client = useQueryClient(queryClient)
- const cache = client.getQueryCache()
- // isFetching is the prev value initialized on mount *
- let isFetching = client.isFetching(filters)
-
- const { subscribe } = readable(isFetching, (set) => {
- return cache.subscribe(
- notifyManager.batchCalls(() => {
- const newIsFetching = client.isFetching(filters)
- if (isFetching !== newIsFetching) {
- // * and update with each change
- isFetching = newIsFetching
- set(isFetching)
- }
- }),
- )
- })
-
- return { subscribe }
-}
diff --git a/packages/svelte-query/src/useIsMutating.ts b/packages/svelte-query/src/useIsMutating.svelte.ts
similarity index 60%
rename from packages/svelte-query/src/useIsMutating.ts
rename to packages/svelte-query/src/useIsMutating.svelte.ts
index e2495ab596..b7c75bbcf0 100644
--- a/packages/svelte-query/src/useIsMutating.ts
+++ b/packages/svelte-query/src/useIsMutating.svelte.ts
@@ -1,33 +1,29 @@
-import {
- type MutationFilters,
- type QueryClient,
- notifyManager,
-} from '@tanstack/query-core'
-import { readable } from 'svelte/store'
-import { useQueryClient } from './useQueryClient.js'
-import type { Readable } from 'svelte/store'
+import { notifyManager } from '@tanstack/query-core'
+import { useQueryClient } from './useQueryClient'
+import type { MutationFilters, QueryClient } from '@tanstack/query-core'
export function useIsMutating(
filters?: MutationFilters,
queryClient?: QueryClient,
-): Readable {
+): () => number {
const client = useQueryClient(queryClient)
const cache = client.getMutationCache()
// isMutating is the prev value initialized on mount *
let isMutating = client.isMutating(filters)
- const { subscribe } = readable(isMutating, (set) => {
+ const num = $state({ isMutating })
+ $effect(() => {
return cache.subscribe(
notifyManager.batchCalls(() => {
const newIisMutating = client.isMutating(filters)
if (isMutating !== newIisMutating) {
// * and update with each change
isMutating = newIisMutating
- set(isMutating)
+ num.isMutating = isMutating
}
}),
)
})
- return { subscribe }
+ return () => num.isMutating
}
diff --git a/packages/svelte-query/src/useIsRestoring.ts b/packages/svelte-query/src/useIsRestoring.ts
index c22d8af402..22b9cb9a3b 100644
--- a/packages/svelte-query/src/useIsRestoring.ts
+++ b/packages/svelte-query/src/useIsRestoring.ts
@@ -1,6 +1,5 @@
-import { getIsRestoringContext } from './context.js'
-import type { Readable } from 'svelte/store'
+import { getIsRestoringContext } from './context'
-export function useIsRestoring(): Readable {
+export function useIsRestoring(): () => boolean {
return getIsRestoringContext()
}
diff --git a/packages/svelte-query/src/useMutationState.svelte.ts b/packages/svelte-query/src/useMutationState.svelte.ts
new file mode 100644
index 0000000000..cfa96f0269
--- /dev/null
+++ b/packages/svelte-query/src/useMutationState.svelte.ts
@@ -0,0 +1,56 @@
+import { replaceEqualDeep } from '@tanstack/query-core'
+import { useQueryClient } from './useQueryClient'
+import type {
+ MutationCache,
+ MutationState,
+ QueryClient,
+} from '@tanstack/query-core'
+import type { MutationStateOptions } from './types'
+
+function getResult(
+ mutationCache: MutationCache,
+ options: MutationStateOptions,
+): Array {
+ return mutationCache
+ .findAll(options.filters)
+ .map(
+ (mutation): TResult =>
+ (options.select ? options.select(mutation) : mutation.state) as TResult,
+ )
+}
+
+export function useMutationState(
+ options: MutationStateOptions = {},
+ queryClient?: QueryClient,
+): Array {
+ const mutationCache = useQueryClient(queryClient).getMutationCache()
+ const result = $state(getResult(mutationCache, options))
+
+ $effect(() => {
+ const unsubscribe = mutationCache.subscribe(() => {
+ const nextResult = replaceEqualDeep(
+ result,
+ getResult(mutationCache, options),
+ )
+ if (result !== nextResult) {
+ Object.assign(result, nextResult)
+ }
+ })
+
+ return unsubscribe
+ })
+
+ /* $effect(() => {
+ mutationCache.subscribe(() => {
+ const nextResult = replaceEqualDeep(
+ result.current,
+ getResult(mutationCache, optionsRef),
+ )
+ if (result.current !== nextResult) {
+ result = nextResult
+ //notifyManager.schedule(onStoreChange)
+ }
+ })
+ }) */
+ return result
+}
diff --git a/packages/svelte-query/src/useMutationState.ts b/packages/svelte-query/src/useMutationState.ts
deleted file mode 100644
index 0367eee5db..0000000000
--- a/packages/svelte-query/src/useMutationState.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { readable } from 'svelte/store'
-import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'
-import { useQueryClient } from './useQueryClient.js'
-import type {
- MutationCache,
- MutationState,
- QueryClient,
-} from '@tanstack/query-core'
-import type { Readable } from 'svelte/store'
-import type { MutationStateOptions } from './types.js'
-
-function getResult(
- mutationCache: MutationCache,
- options: MutationStateOptions,
-): Array {
- return mutationCache
- .findAll(options.filters)
- .map(
- (mutation): TResult =>
- (options.select ? options.select(mutation) : mutation.state) as TResult,
- )
-}
-
-export function useMutationState(
- options: MutationStateOptions = {},
- queryClient?: QueryClient,
-): Readable> {
- const client = useQueryClient(queryClient)
- const mutationCache = client.getMutationCache()
-
- let result = getResult(mutationCache, options)
-
- const { subscribe } = readable(result, (set) => {
- return mutationCache.subscribe(
- notifyManager.batchCalls(() => {
- const nextResult = replaceEqualDeep(
- result,
- getResult(mutationCache, options),
- )
- if (result !== nextResult) {
- result = nextResult
- set(result)
- }
- }),
- )
- })
-
- return { subscribe }
-}
diff --git a/packages/svelte-query/src/utils.ts b/packages/svelte-query/src/utils.ts
deleted file mode 100644
index 3ecc2ed8b3..0000000000
--- a/packages/svelte-query/src/utils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { Readable } from 'svelte/store'
-import type { StoreOrVal } from './types.js'
-
-export function isSvelteStore(
- obj: StoreOrVal,
-): obj is Readable {
- return 'subscribe' in obj && typeof obj.subscribe === 'function'
-}
-
-export function noop() {}
diff --git a/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte b/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte
index 0c5a062945..003f7f9e2f 100644
--- a/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte
+++ b/packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte
@@ -1,6 +1,6 @@
-Data: {$query.data ?? 'undefined'}
+Data: {query.data ?? 'undefined'}
diff --git a/packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte b/packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte
index dc2440ef94..28411fd5ed 100644
--- a/packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte
+++ b/packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte
@@ -4,7 +4,7 @@
import ChildComponent from './ChildComponent.svelte'
import type { QueryCache } from '@tanstack/query-core'
- export let queryCache: QueryCache
+ let { queryCache }: { queryCache: QueryCache } = $props()
const queryClient = new QueryClient({ queryCache })
diff --git a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
index ce33e17b90..df42f1fe09 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
@@ -1,24 +1,30 @@
-Status: {$query.status}
+Status: {query.status}
diff --git a/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte
index c96a483842..9fc7a7db16 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte
+++ b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte
@@ -1,10 +1,10 @@
-{$query.data?.pages.join(',')}
+{query.data?.pages.join(',')}
diff --git a/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts b/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts
index b05763b279..88a02b75fe 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts
+++ b/packages/svelte-query/tests/createInfiniteQuery/createInfiniteQuery.test.ts
@@ -1,18 +1,17 @@
import { describe, expect, test } from 'vitest'
import { render, waitFor } from '@testing-library/svelte'
-import { get, writable } from 'svelte/store'
+import { ref } from '../utils.svelte'
import BaseExample from './BaseExample.svelte'
import SelectExample from './SelectExample.svelte'
-import type { Writable } from 'svelte/store'
import type { QueryObserverResult } from '@tanstack/query-core'
describe('createInfiniteQuery', () => {
test('Return the correct states for a successful query', async () => {
- const statesStore: Writable> = writable([])
+ let states = ref>([])
const rendered = render(BaseExample, {
props: {
- states: statesStore,
+ states,
},
})
@@ -20,11 +19,9 @@ describe('createInfiniteQuery', () => {
expect(rendered.queryByText('Status: success')).toBeInTheDocument()
})
- const states = get(statesStore)
+ expect(states.value).toHaveLength(2)
- expect(states).toHaveLength(2)
-
- expect(states[0]).toEqual({
+ expect(states.value[0]).toEqual({
data: undefined,
dataUpdatedAt: 0,
error: null,
@@ -59,7 +56,7 @@ describe('createInfiniteQuery', () => {
fetchStatus: 'fetching',
})
- expect(states[1]).toEqual({
+ expect(states.value[1]).toEqual({
data: { pages: [0], pageParams: [0] },
dataUpdatedAt: expect.any(Number),
error: null,
@@ -96,11 +93,11 @@ describe('createInfiniteQuery', () => {
})
test('Select a part of the data', async () => {
- const statesStore: Writable> = writable([])
+ let states = ref>([])
const rendered = render(SelectExample, {
props: {
- states: statesStore,
+ states,
},
})
@@ -108,16 +105,14 @@ describe('createInfiniteQuery', () => {
expect(rendered.queryByText('count: 1')).toBeInTheDocument()
})
- const states = get(statesStore)
-
- expect(states).toHaveLength(2)
+ expect(states.value).toHaveLength(2)
- expect(states[0]).toMatchObject({
+ expect(states.value[0]).toMatchObject({
data: undefined,
isSuccess: false,
})
- expect(states[1]).toMatchObject({
+ expect(states.value[1]).toMatchObject({
data: { pages: ['count: 1'] },
isSuccess: true,
})
diff --git a/packages/svelte-query/tests/createMutation/FailureExample.svelte b/packages/svelte-query/tests/createMutation/FailureExample.svelte
index 2c8a8a2c1b..7b5491cae8 100644
--- a/packages/svelte-query/tests/createMutation/FailureExample.svelte
+++ b/packages/svelte-query/tests/createMutation/FailureExample.svelte
@@ -1,13 +1,13 @@
-
+
-Data: {$mutation.data?.count}
-Status: {$mutation.status}
-Failure Count: {$mutation.failureCount}
-Failure Reason: {$mutation.failureReason}
+Data: {mutation.data?.count ?? 'undefined'}
+Status: {mutation.status}
+Failure Count: {mutation.failureCount}
+Failure Reason: {mutation.failureReason ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte b/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte
index 7f338ede5d..02e7fd11f5 100644
--- a/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte
+++ b/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte
@@ -22,6 +22,6 @@
})
-
+
Count: {$count}
diff --git a/packages/svelte-query/tests/createMutation/ResetExample.svelte b/packages/svelte-query/tests/createMutation/ResetExample.svelte
index cc8216e84f..0f7b7f8a80 100644
--- a/packages/svelte-query/tests/createMutation/ResetExample.svelte
+++ b/packages/svelte-query/tests/createMutation/ResetExample.svelte
@@ -14,7 +14,7 @@
})
-
-
+
+
-Error: {$mutation.error?.message}
+Error: {mutation.error?.message ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createMutation/createMutation.test.ts b/packages/svelte-query/tests/createMutation/createMutation.test.ts
index d120655e31..5d05805c38 100644
--- a/packages/svelte-query/tests/createMutation/createMutation.test.ts
+++ b/packages/svelte-query/tests/createMutation/createMutation.test.ts
@@ -1,6 +1,6 @@
import { describe, expect, test, vi } from 'vitest'
import { fireEvent, render, waitFor } from '@testing-library/svelte'
-import { sleep } from '../utils.js'
+import { sleep } from '../utils.svelte'
import ResetExample from './ResetExample.svelte'
import OnSuccessExample from './OnSuccessExample.svelte'
import FailureExample from './FailureExample.svelte'
@@ -103,6 +103,6 @@ describe('createMutation', () => {
await waitFor(() => rendered.getByText('Status: success'))
await waitFor(() => rendered.getByText('Data: 2'))
await waitFor(() => rendered.getByText('Failure Count: 0'))
- await waitFor(() => rendered.getByText('Failure Reason: null'))
+ await waitFor(() => rendered.getByText('Failure Reason: undefined'))
})
})
diff --git a/packages/svelte-query/tests/createQueries/BaseExample.svelte b/packages/svelte-query/tests/createQueries/BaseExample.svelte
index b9b5ae7c47..15962b21c4 100644
--- a/packages/svelte-query/tests/createQueries/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQueries/BaseExample.svelte
@@ -1,17 +1,26 @@
-{#each $queries as query, index}
+{#each queries as query, index}
Status {index + 1}: {query.status}
Data {index + 1}: {query.data}
{/each}
diff --git a/packages/svelte-query/tests/createQueries/CombineExample.svelte b/packages/svelte-query/tests/createQueries/CombineExample.svelte
index c8fa73696c..e2e7af0d2f 100644
--- a/packages/svelte-query/tests/createQueries/CombineExample.svelte
+++ b/packages/svelte-query/tests/createQueries/CombineExample.svelte
@@ -1,6 +1,6 @@
-isPending: {$queries.isPending}
-Data: {$queries.data ?? 'undefined'}
+isPending: {queries.isPending}
+Data: {queries.data ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createQueries/createQueries.test-d.ts b/packages/svelte-query/tests/createQueries/createQueries.test-d.ts
index 36f4db2b20..fd7087dace 100644
--- a/packages/svelte-query/tests/createQueries/createQueries.test-d.ts
+++ b/packages/svelte-query/tests/createQueries/createQueries.test-d.ts
@@ -1,9 +1,8 @@
import { describe, expectTypeOf, test } from 'vitest'
-import { get } from 'svelte/store'
import { skipToken } from '@tanstack/query-core'
import { createQueries, queryOptions } from '../../src/index.js'
-import type { OmitKeyof, QueryObserverResult } from '@tanstack/query-core'
-import type { CreateQueryOptions } from '../../src/index.js'
+import type { QueryObserverResult } from '@tanstack/query-core'
+import type { CreateQueryOptions } from '../../src/index'
describe('createQueries', () => {
test('TData should be defined when passed through queryOptions', () => {
@@ -20,7 +19,7 @@ describe('createQueries', () => {
})
const queryResults = createQueries({ queries: [options] })
- const data = get(queryResults)[0].data
+ const data = queryResults[0].data
expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
})
@@ -28,9 +27,7 @@ describe('createQueries', () => {
test('Allow custom hooks using UseQueryOptions', () => {
type Data = string
- const useCustomQueries = (
- options?: OmitKeyof, 'queryKey' | 'queryFn'>,
- ) => {
+ const useCustomQueries = (options?: CreateQueryOptions) => {
return createQueries({
queries: [
{
@@ -43,7 +40,7 @@ describe('createQueries', () => {
}
const query = useCustomQueries()
- const data = get(query)[0].data
+ const data = query[0].data
expectTypeOf(data).toEqualTypeOf()
})
@@ -58,7 +55,7 @@ describe('createQueries', () => {
],
})
- const firstResult = get(queryResults)[0]
+ const firstResult = queryResults[0]
expectTypeOf(firstResult).toEqualTypeOf<
QueryObserverResult
diff --git a/packages/svelte-query/tests/createQueries/createQueries.test.ts b/packages/svelte-query/tests/createQueries/createQueries.test.ts
index c8efa1f08d..5f1ffa21dd 100644
--- a/packages/svelte-query/tests/createQueries/createQueries.test.ts
+++ b/packages/svelte-query/tests/createQueries/createQueries.test.ts
@@ -1,7 +1,7 @@
import { describe, expect, test } from 'vitest'
import { render, waitFor } from '@testing-library/svelte'
import { QueryClient } from '@tanstack/query-core'
-import { sleep } from '../utils.js'
+import { sleep } from '../utils.svelte'
import BaseExample from './BaseExample.svelte'
import CombineExample from './CombineExample.svelte'
diff --git a/packages/svelte-query/tests/createQuery/BaseExample.svelte b/packages/svelte-query/tests/createQuery/BaseExample.svelte
index d7a824c26b..6acd5c2599 100644
--- a/packages/svelte-query/tests/createQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQuery/BaseExample.svelte
@@ -1,18 +1,29 @@
-Status: {$query.status}
-Failure Count: {$query.failureCount}
-Data: {$query.data ?? 'undefined'}
+Status: {query.status}
+Failure Count: {query.failureCount}
+Data: {query.data ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createQuery/DisabledExample.svelte b/packages/svelte-query/tests/createQuery/DisabledExample.svelte
index 3d50a2d73c..1a5f804995 100644
--- a/packages/svelte-query/tests/createQuery/DisabledExample.svelte
+++ b/packages/svelte-query/tests/createQuery/DisabledExample.svelte
@@ -1,31 +1,39 @@
-
+
-Data: {$query.data ?? 'undefined'}
-Count: {$count}
+Data: {query.data ?? 'undefined'}
+Count: {count}
diff --git a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
index 5b9737e731..e119195841 100644
--- a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
+++ b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
@@ -1,30 +1,36 @@
-
+
-Status: {$query.status}
-Data: {$query.data ?? 'undefined'}
+Status: {query.status}
+Data: {query.data ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createQuery/RefetchExample.svelte b/packages/svelte-query/tests/createQuery/RefetchExample.svelte
index 8a4adb4b5f..989c29a606 100644
--- a/packages/svelte-query/tests/createQuery/RefetchExample.svelte
+++ b/packages/svelte-query/tests/createQuery/RefetchExample.svelte
@@ -1,32 +1,39 @@
-