@mearie/svelte 0.3.4 → 0.4.0

package/dist/index.svelte.cjs

@@ -19,16 +19,19 @@ const getClient = () => {
 const createQuery = ((query, variables, options) => {
 	const client = getClient();
 	const initialOpts = options?.();
-	let data = $state.raw(initialOpts?.initialData);
+	let data = $state(initialOpts?.initialData);
 	let loading = $state(!initialOpts?.skip && !initialOpts?.initialData);
 	let error = $state();
 	let metadata = $state();
 	let unsubscribe = null;
 	let initialized = false;
-	const execute = () => {
+	const execute = (force = false) => {
 		unsubscribe?.();
-		if (options?.().skip) return;
-		if (!initialized && !!initialOpts?.initialData) loading = true;
+		if (!force && options?.().skip) {
+			loading = false;
+			return;
+		}
+		if (initialized || !initialOpts?.initialData) loading = true;
 		initialized = true;
 		error = void 0;
 		unsubscribe = (0, _mearie_core_stream.pipe)(client.executeQuery(query, typeof variables === "function" ? variables() : void 0, options?.()), (0, _mearie_core_stream.subscribe)({ next: (result) => {
@@ -37,13 +40,17 @@ const createQuery = ((query, variables, options) => {
 				error = new _mearie_core.AggregatedError(result.errors);
 				loading = false;
 			} else {
-				data = result.data;
+				const patches = result.metadata?.cache?.patches;
+				if (patches) {
+					const root = (0, _mearie_core.applyPatchesMutable)(data, patches);
+					if (root !== void 0) data = root;
+				} else data = result.data;
 				loading = false;
 			}
 		} }));
 	};
 	const refetch = () => {
-		(0, svelte.untrack)(execute);
+		(0, svelte.untrack)(() => execute(true));
 	};
 	$effect(() => {
 		execute();
@@ -183,9 +190,13 @@ const createFragment = ((fragment, fragmentRef, options) => {
 			metadata = void 0;
 			return;
 		}
-		const unsubscribe = (0, _mearie_core_stream.pipe)(client.executeFragment(fragment, $state.snapshot(currentRef), options?.()), (0, _mearie_core_stream.subscribe)({ next: (result) => {
+		const unsubscribe = (0, _mearie_core_stream.pipe)(client.executeFragment(fragment, (0, svelte.untrack)(() => $state.snapshot(currentRef)), options?.()), (0, _mearie_core_stream.subscribe)({ next: (result) => {
 			metadata = result.metadata;
-			if (result.data !== void 0) state = result.data;
+			const patches = result.metadata?.cache?.patches;
+			if (patches) {
+				const root = (0, _mearie_core.applyPatchesMutable)(state, patches);
+				if (root !== void 0) state = root;
+			} else if (result.data !== void 0) state = result.data;
 		} }));
 		return () => {
 			unsubscribe();

package/dist/index.svelte.mjs

@@ -1,4 +1,4 @@
-import { AggregatedError } from "@mearie/core";
+import { AggregatedError, applyPatchesMutable } from "@mearie/core";
 import { getContext, setContext, untrack } from "svelte";
 import { collect, peek, pipe, subscribe, take } from "@mearie/core/stream";
 
@@ -20,16 +20,19 @@ const getClient = () => {
 const createQuery = ((query, variables, options) => {
 	const client = getClient();
 	const initialOpts = options?.();
-	let data = $state.raw(initialOpts?.initialData);
+	let data = $state(initialOpts?.initialData);
 	let loading = $state(!initialOpts?.skip && !initialOpts?.initialData);
 	let error = $state();
 	let metadata = $state();
 	let unsubscribe = null;
 	let initialized = false;
-	const execute = () => {
+	const execute = (force = false) => {
 		unsubscribe?.();
-		if (options?.().skip) return;
-		if (!initialized && !!initialOpts?.initialData) loading = true;
+		if (!force && options?.().skip) {
+			loading = false;
+			return;
+		}
+		if (initialized || !initialOpts?.initialData) loading = true;
 		initialized = true;
 		error = void 0;
 		unsubscribe = pipe(client.executeQuery(query, typeof variables === "function" ? variables() : void 0, options?.()), subscribe({ next: (result) => {
@@ -38,13 +41,17 @@ const createQuery = ((query, variables, options) => {
 				error = new AggregatedError(result.errors);
 				loading = false;
 			} else {
-				data = result.data;
+				const patches = result.metadata?.cache?.patches;
+				if (patches) {
+					const root = applyPatchesMutable(data, patches);
+					if (root !== void 0) data = root;
+				} else data = result.data;
 				loading = false;
 			}
 		} }));
 	};
 	const refetch = () => {
-		untrack(execute);
+		untrack(() => execute(true));
 	};
 	$effect(() => {
 		execute();
@@ -184,9 +191,13 @@ const createFragment = ((fragment, fragmentRef, options) => {
 			metadata = void 0;
 			return;
 		}
-		const unsubscribe = pipe(client.executeFragment(fragment, $state.snapshot(currentRef), options?.()), subscribe({ next: (result) => {
+		const unsubscribe = pipe(client.executeFragment(fragment, untrack(() => $state.snapshot(currentRef)), options?.()), subscribe({ next: (result) => {
 			metadata = result.metadata;
-			if (result.data !== void 0) state = result.data;
+			const patches = result.metadata?.cache?.patches;
+			if (patches) {
+				const root = applyPatchesMutable(state, patches);
+				if (root !== void 0) state = root;
+			} else if (result.data !== void 0) state = result.data;
 		} }));
 		return () => {
 			unsubscribe();

package/dist/svelte/create-fragment.svelte.js

@@ -1,3 +1,5 @@
+import { untrack } from 'svelte';
+import { applyPatchesMutable } from '@mearie/core';
 import { pipe, subscribe, peek } from '@mearie/core/stream';
 import { getClient } from "./client-context.svelte.js";
 export const createFragment = ((fragment, fragmentRef, options) => {
@@ -25,10 +27,16 @@ export const createFragment = ((fragment, fragmentRef, options) => {
             metadata = undefined;
             return;
         }
-        const unsubscribe = pipe(client.executeFragment(fragment, $state.snapshot(currentRef), options?.()), subscribe({
+        const unsubscribe = pipe(client.executeFragment(fragment, untrack(() => $state.snapshot(currentRef)), options?.()), subscribe({
             next: (result) => {
                 metadata = result.metadata;
-                if (result.data !== undefined) {
+                const patches = result.metadata?.cache?.patches;
+                if (patches) {
+                    const root = applyPatchesMutable(state, patches);
+                    if (root !== undefined)
+                        state = root;
+                }
+                else if (result.data !== undefined) {
                     state = result.data;
                 }
             },

package/dist/svelte/create-query.svelte.js

@@ -1,22 +1,23 @@
 import { untrack } from 'svelte';
-import { AggregatedError } from '@mearie/core';
+import { AggregatedError, applyPatchesMutable } from '@mearie/core';
 import { pipe, subscribe } from '@mearie/core/stream';
 import { getClient } from "./client-context.svelte.js";
 export const createQuery = ((query, variables, options) => {
     const client = getClient();
     const initialOpts = options?.();
-    let data = $state.raw(initialOpts?.initialData);
+    let data = $state(initialOpts?.initialData);
     let loading = $state(!initialOpts?.skip && !initialOpts?.initialData);
     let error = $state();
     let metadata = $state();
     let unsubscribe = null;
     let initialized = false;
-    const execute = () => {
+    const execute = (force = false) => {
         unsubscribe?.();
-        if (options?.().skip) {
+        if (!force && options?.().skip) {
+            loading = false;
             return;
         }
-        if (!initialized && !!initialOpts?.initialData) {
+        if (initialized || !initialOpts?.initialData) {
             loading = true;
         }
         initialized = true;
@@ -31,14 +32,22 @@ export const createQuery = ((query, variables, options) => {
                     loading = false;
                 }
                 else {
-                    data = result.data;
+                    const patches = result.metadata?.cache?.patches;
+                    if (patches) {
+                        const root = applyPatchesMutable(data, patches);
+                        if (root !== undefined)
+                            data = root;
+                    }
+                    else {
+                        data = result.data;
+                    }
                     loading = false;
                 }
             },
         }));
     };
     const refetch = () => {
-        untrack(execute);
+        untrack(() => execute(true));
     };
     $effect(() => {
         execute();

package/dist/svelte/test-utils.svelte.js

@@ -0,0 +1,48 @@
+import { vi } from 'vitest';
+import { GraphQLError } from '@mearie/core';
+import { makeSubject } from '@mearie/core/stream';
+export const createMockClient = () => {
+    const subjects = {
+        query: makeSubject(),
+        mutation: makeSubject(),
+        subscription: makeSubject(),
+        fragment: makeSubject(),
+    };
+    const client = {
+        executeQuery: vi.fn(() => subjects.query.source),
+        executeMutation: vi.fn(() => subjects.mutation.source),
+        executeSubscription: vi.fn(() => subjects.subscription.source),
+        executeFragment: vi.fn(() => subjects.fragment.source),
+    };
+    return { client, subjects };
+};
+export const mockQuery = {
+    kind: 'query',
+    name: 'TestQuery',
+    body: 'query TestQuery { user { id name } }',
+    selections: [],
+};
+export const mockMutation = {
+    kind: 'mutation',
+    name: 'TestMutation',
+    body: 'mutation TestMutation { updateUser { id } }',
+    selections: [],
+};
+export const mockSubscription = {
+    kind: 'subscription',
+    name: 'TestSubscription',
+    body: 'subscription TestSubscription { onUpdate { id } }',
+    selections: [],
+};
+export const mockFragment = {
+    kind: 'fragment',
+    name: 'TestFragment',
+    body: 'fragment TestFragment on User { id name }',
+    selections: [],
+};
+export const makeResult = (data, opts) => ({
+    data,
+    errors: opts?.errors?.map((e) => new GraphQLError(e.message)),
+    metadata: opts?.metadata,
+    operation: {},
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mearie/svelte",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Type-safe, zero-overhead GraphQL client",
   "keywords": [
     "graphql",
@@ -53,9 +53,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@mearie/core": "0.5.2"
+    "@mearie/core": "0.6.0"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "happy-dom": "^20.8.3",
     "svelte": "^5.53.3",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3"