@vladimirdev635/gql-client-vue 0.0.1

package/.npmignore

@@ -0,0 +1 @@
+tests/

package/index.d.ts

@@ -0,0 +1,3 @@
+export { type OperationLoadingState, type OperationSuccessState, type OperationFailureState, type OperationState, useOperation, } from './useOperation.jsx';
+export { type LazyOperationInitialState, type LazyOperationState, type UseLazyOperationReturnType, type LazyOperationExecuteReturnType, useLazyOperation, } from './use-lazy-operation/index.js';
+export { useSubscription } from './useSubscription.jsx';

package/index.js

@@ -0,0 +1,3 @@
+export { useOperation, } from './useOperation.jsx';
+export { useLazyOperation, } from './use-lazy-operation/index.js';
+export { useSubscription } from './useSubscription.jsx';

package/loading-state.d.ts

@@ -0,0 +1,3 @@
+export declare const loadingState: Readonly<{
+    readonly state: "loading";
+}>;

package/loading-state.js

@@ -0,0 +1,3 @@
+export const loadingState = Object.freeze({
+    state: 'loading',
+});

package/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "@vladimirdev635/gql-client-vue",
+    "version": "0.0.1",
+    "type": "module",
+    "main": "./index.js",
+    "types": "./index.d.ts",
+    "files": [
+        "./"
+    ],
+    "homepage": "https://github.com/Voldemat/graphql-plus-plus#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Voldemat/graphql-plus-plus.git"
+    },
+    "scripts": {
+        "lint": "oxlint .",
+        "lint:fix": "oxlint --fix .",
+        "fmt": "oxfmt .",
+        "fmt:check": "oxfmt --check .",
+        "lint:ci": "npm run lint && npm run fmt:check",
+        "test": "vitest",
+        "build": "tsc && cp package.json .npmignore ./dist/"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "description": "",
+    "devDependencies": {
+        "@testing-library/vue": "^8.1.0",
+        "@types/node": "^24.0.1",
+        "@types/object-hash": "^3.0.6",
+        "@vitejs/plugin-vue": "^5.2.1",
+        "@vue/test-utils": "^2.4.6",
+        "@vue/tsconfig": "^0.7.0",
+        "jiti": "^2.4.2",
+        "jsdom": "^26.1.0",
+        "oxfmt": "^0.64.0",
+        "oxlint": "^1.79.0",
+        "typescript": "<7.0.0",
+        "typescript-language-server": "^5.3.0",
+        "vue": "^3.5.13",
+        "vue-tsc": "^2.2.0",
+        "vitest": "^3.2.4"
+    },
+    "peerDependencies": {
+        "vue": "^3.0.0",
+        "zod": ">=4.0.5"
+    },
+    "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.9.5"
+    },
+    "allowScripts": {}
+}

package/tests/useLazyOperation.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/tests/useLazyOperation.spec.js

@@ -0,0 +1,49 @@
+import assert from 'assert';
+import { describe, expect, it } from 'vitest';
+import { nextTick } from 'vue';
+import { useLazyOperation } from '../use-lazy-operation/index.js';
+import { mountComposable, testOperation } from './utils.js';
+describe('useLazyOperation', () => {
+    it('Should preserve initial state if no one calls', async () => {
+        const [, { state }] = mountComposable(() => useLazyOperation({}, testOperation));
+        expect(state.value.state).toBe('initial');
+        await nextTick();
+        expect(state.value.state).toBe('initial');
+    });
+    it('Should return loading state after invoking, then success state', async () => {
+        const executor = {
+            executeSync: async () => ({
+                result: { a: 1 },
+                response: new Response(),
+            }),
+        };
+        const [execute, { state }] = mountComposable(() => useLazyOperation(executor, testOperation));
+        const promise = execute({}, {});
+        // Immediately after invocation, state ref transitions to 'loading'
+        expect(state.value.state).toBe('loading');
+        const newState = await promise;
+        expect(newState.state).toBe('success');
+        assert(newState.state === 'success');
+        expect(newState.result).toStrictEqual({ a: 1 });
+        await nextTick();
+        expect(state.value).toStrictEqual(newState);
+    });
+    it('Should return loading state after invoking, then failure state', async () => {
+        const error = new Error('Network error');
+        const executor = {
+            executeSync: async () => {
+                throw error;
+            },
+        };
+        const [execute, { state }] = mountComposable(() => useLazyOperation(executor, testOperation));
+        const promise = execute({}, {});
+        // Immediately after invocation, state ref transitions to 'loading'
+        expect(state.value.state).toBe('loading');
+        const newState = await promise;
+        expect(newState.state).toBe('failure');
+        assert(newState.state === 'failure');
+        expect(newState.error).toBe(error);
+        await nextTick();
+        expect(state.value).toStrictEqual(newState);
+    });
+});

package/tests/useOperation.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/tests/useOperation.spec.jsx

@@ -0,0 +1,39 @@
+import { useOperation } from '../useOperation.js';
+import { describe, expect, it } from 'vitest';
+import { flushPromises } from '@vue/test-utils';
+import assert from 'assert';
+import { mountComposable, testOperation } from './utils.js';
+describe('useOperation', () => {
+    it('Should return loading state and then success state', async () => {
+        const executor = {
+            executeSync: async () => ({
+                result: { a: 1 },
+                response: new Response(),
+            }),
+        };
+        const state = mountComposable(() => useOperation(executor, testOperation, {}, {}));
+        // Synchronously upon invocation, state is 'loading'
+        expect(state.value.state).toBe('loading');
+        // Wait for async executeSync promise to resolve and flush watchers
+        await flushPromises();
+        expect(state.value.state).toBe('success');
+        assert(state.value.state === 'success');
+        expect(state.value.result).toStrictEqual({ a: 1 });
+    });
+    it('Should return loading state and then failure state', async () => {
+        const error = new Error('Network error');
+        const executor = {
+            executeSync: async () => {
+                throw error;
+            },
+        };
+        const state = mountComposable(() => useOperation(executor, testOperation, {}, {}));
+        // Synchronously upon invocation, state is 'loading'
+        expect(state.value.state).toBe('loading');
+        // Wait for rejected executeSync promise to catch and flush watchers
+        await flushPromises();
+        expect(state.value.state).toBe('failure');
+        assert(state.value.state === 'failure');
+        expect(state.value.error).toBe(error);
+    });
+});

package/tests/useSubscription.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/tests/useSubscription.spec.jsx

@@ -0,0 +1,54 @@
+import { useSubscription } from '../useSubscription.js';
+import { describe, expect, it } from 'vitest';
+import { flushPromises } from '@vue/test-utils';
+import assert from 'assert';
+import { mountComposable, testSubscription } from './utils.js';
+describe('useSubscription', () => {
+    it('Should return loading state and then success state', async () => {
+        const executor = {
+            executeSubscription: async () => {
+                const readableStream = new ReadableStream();
+                const response = new Response(readableStream);
+                return {
+                    result: {
+                        stream: (async function* () {
+                            yield { number: 1 };
+                            yield { number: 2 };
+                            yield { number: 3 };
+                        })(),
+                        close: () => { },
+                    },
+                    response,
+                };
+            },
+        };
+        const state = mountComposable(() => useSubscription(executor, testSubscription, {}, {}));
+        // Synchronously upon invocation, state is 'loading'
+        expect(state.value.state).toBe('loading');
+        // Wait for async executeSubscription promise to resolve and flush watchers
+        await flushPromises();
+        expect(state.value.state).toBe('success');
+        assert(state.value.state === 'success');
+        let number = 1;
+        for await (const value of state.value.result.stream) {
+            expect(value.number).toBe(number);
+            number++;
+        }
+    });
+    it('Should return loading state and then failure state', async () => {
+        const error = new Error('Network error');
+        const executor = {
+            executeSubscription: async () => {
+                throw error;
+            },
+        };
+        const state = mountComposable(() => useSubscription(executor, testSubscription, {}, {}));
+        // Synchronously upon invocation, state is 'loading'
+        expect(state.value.state).toBe('loading');
+        // Wait for rejected executeSubscription promise to catch and flush watchers
+        await flushPromises();
+        expect(state.value.state).toBe('failure');
+        assert(state.value.state === 'failure');
+        expect(state.value.error).toBe(error);
+    });
+});

package/tests/utils.d.ts

@@ -0,0 +1,21 @@
+import { OperationResult } from '@/types.js';
+import { z } from 'zod/v4';
+export declare const testOperation: {
+    readonly document: "";
+    readonly name: "";
+    readonly type: "QUERY";
+    readonly variablesSchema: z.ZodObject<{}, z.core.$strip>;
+    readonly resultSchema: z.ZodObject<{}, z.core.$strip>;
+};
+export type TestOperationResult = OperationResult<typeof testOperation>;
+export declare const testSubscription: {
+    readonly document: "";
+    readonly name: "";
+    readonly type: "SUBSCRIPTION";
+    readonly variablesSchema: z.ZodObject<{}, z.core.$strip>;
+    readonly resultSchema: z.ZodObject<{
+        number: z.ZodNumber;
+    }, z.core.$strip>;
+};
+export type TestSubscriptionResult = OperationResult<typeof testSubscription>;
+export declare function mountComposable<T>(composable: () => T): NonNullable<T>;

package/tests/utils.js

@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils';
+import { z } from 'zod/v4';
+export const testOperation = {
+    document: '',
+    name: '',
+    type: 'QUERY',
+    variablesSchema: z.object({}),
+    resultSchema: z.object({}),
+};
+export const testSubscription = {
+    document: '',
+    name: '',
+    type: 'SUBSCRIPTION',
+    variablesSchema: z.object({}),
+    resultSchema: z.object({ number: z.number() }),
+};
+export function mountComposable(composable) {
+    let result;
+    mount({
+        setup() {
+            result = composable();
+            return () => { };
+        },
+        render() { },
+    });
+    return result;
+}

package/types.d.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod/v4';
+export type SchemaFor<T> = z.ZodType<T>;
+interface BaseOperation<V, R> {
+    name: string;
+    document: string;
+    variablesSchema: SchemaFor<V>;
+    resultSchema: SchemaFor<R>;
+}
+export interface SyncOperation<V, R> extends BaseOperation<V, R> {
+    type: 'QUERY' | 'MUTATION';
+}
+export interface SubscriptionOperation<V, R> extends BaseOperation<V, R> {
+    type: 'SUBSCRIPTION';
+}
+export type Operation<V, R> = SyncOperation<V, R> | SubscriptionOperation<V, R>;
+export interface RequestContext {
+    fetchOptions?: RequestInit;
+}
+export type OperationVariables<T extends Operation<unknown, unknown>> = T extends Operation<infer V, unknown> ? V : never;
+export type OperationResult<T extends Operation<unknown, unknown>> = T extends Operation<unknown, infer R> ? R : never;
+export interface ExecuteResult<TResult> {
+    result: TResult;
+    response: Response;
+}
+export interface SubOpAsyncIterable<TResult> extends Disposable {
+    stream: AsyncIterable<TResult, void, unknown>;
+    close: () => void;
+}
+export interface IExecutor<TRequestContext extends RequestContext> {
+    executeSync<T extends SyncOperation<unknown, unknown>>(operation: T, variables: OperationVariables<T>, requestContext: TRequestContext): Promise<ExecuteResult<OperationResult<T>>>;
+    executeSubscription<T extends SubscriptionOperation<unknown, unknown>>(operation: T, variables: OperationVariables<T>, requestContext: TRequestContext, controller: AbortController): Promise<ExecuteResult<SubOpAsyncIterable<OperationResult<T>>>>;
+}
+export {};

package/types.js

@@ -0,0 +1 @@
+export {};

package/use-lazy-operation/hook.d.ts

@@ -0,0 +1,10 @@
+import { type ShallowRef } from 'vue';
+import type { IExecutor, OperationResult, OperationVariables, RequestContext, SyncOperation } from '../types.js';
+import { type LazyOperationExecuteReturnType, type LazyOperationState } from './types.js';
+export declare function useLazyOperation<T extends SyncOperation<unknown, unknown>, TRequestContext extends RequestContext>(executor: IExecutor<TRequestContext>, operation: T): [
+    (variables: OperationVariables<T>, requestContext: TRequestContext) => LazyOperationExecuteReturnType<OperationResult<T>>,
+    {
+        state: ShallowRef<LazyOperationState<OperationResult<T>>>;
+        reset: () => void;
+    }
+];

package/use-lazy-operation/hook.js

@@ -0,0 +1,28 @@
+import { shallowRef } from 'vue';
+import { loadingState } from '../loading-state.js';
+const lazyInitialState = Object.freeze({
+    state: 'initial',
+});
+async function execute(executor, operation, variables, requestContext, stateRef) {
+    let newState;
+    try {
+        const result = await executor.executeSync(operation, variables, requestContext);
+        newState = { state: 'success', ...result };
+    }
+    catch (error) {
+        newState = { state: 'failure', error: error };
+    }
+    stateRef.value = newState;
+    return newState;
+}
+export function useLazyOperation(executor, operation) {
+    const state = shallowRef(lazyInitialState);
+    const executeCallback = (variables, requestContext) => {
+        state.value = loadingState;
+        return execute(executor, operation, variables, requestContext, state);
+    };
+    const reset = () => {
+        state.value = lazyInitialState;
+    };
+    return [executeCallback, { state, reset }];
+}

package/use-lazy-operation/index.d.ts

@@ -0,0 +1,2 @@
+export { useLazyOperation } from './hook.js';
+export type { LazyOperationInitialState, LazyOperationState, LazyOperationExecuteReturnType, UseLazyOperationReturnType, } from './types.js';

package/use-lazy-operation/index.js

@@ -0,0 +1 @@
+export { useLazyOperation } from './hook.js';

package/use-lazy-operation/types.d.ts

@@ -0,0 +1,14 @@
+import type { RequestContext } from '../types.js';
+import { type OperationFailureState, type OperationState, type OperationSuccessState } from '../useOperation.jsx';
+export interface LazyOperationInitialState {
+    state: 'initial';
+}
+export type LazyOperationState<TResult> = OperationState<TResult> | LazyOperationInitialState;
+export type LazyOperationExecuteReturnType<TResult> = Promise<OperationSuccessState<TResult> | OperationFailureState>;
+export type UseLazyOperationReturnType<TVariables, TResult, TRequestContext extends RequestContext> = [
+    (variables: TVariables, requestContext: TRequestContext) => LazyOperationExecuteReturnType<TResult>,
+    {
+        state: LazyOperationState<TResult>;
+        reset: () => void;
+    }
+];

package/use-lazy-operation/types.js

@@ -0,0 +1 @@
+export {};

package/useOperation.d.ts

@@ -0,0 +1,14 @@
+import { ShallowRef, type Ref } from 'vue';
+import type { ExecuteResult, IExecutor, OperationResult, OperationVariables, RequestContext, SyncOperation } from './types.js';
+export interface OperationLoadingState {
+    state: 'loading';
+}
+export interface OperationSuccessState<TResult> extends ExecuteResult<TResult> {
+    state: 'success';
+}
+export interface OperationFailureState {
+    state: 'failure';
+    error: Error;
+}
+export type OperationState<TResult> = OperationLoadingState | OperationSuccessState<TResult> | OperationFailureState;
+export declare function useOperation<T extends SyncOperation<unknown, unknown>, TRequestContext extends RequestContext>(executor: IExecutor<TRequestContext>, operation: T, variables: OperationVariables<T> | Ref<OperationVariables<T>>, requestContext: TRequestContext | Ref<TRequestContext>): ShallowRef<OperationState<OperationResult<T>>>;

package/useOperation.jsx

@@ -0,0 +1,23 @@
+import { isRef, onUnmounted, shallowRef, watch, } from 'vue';
+import { loadingState } from './loading-state.js';
+export function useOperation(executor, operation, variables, requestContext) {
+    const state = shallowRef(loadingState);
+    watch([
+        () => executor,
+        () => operation,
+        () => (isRef(variables) ? variables.value : variables),
+        () => isRef(requestContext) ? requestContext.value : requestContext,
+    ], ([exec, op, vars, ctx]) => {
+        exec.executeSync(op, vars, ctx)
+            .then((result) => {
+            state.value = { state: 'success', ...result };
+        })
+            .catch((error) => {
+            state.value = { state: 'failure', error: error };
+        });
+    }, { immediate: true, deep: true });
+    onUnmounted(() => {
+        state.value = loadingState;
+    });
+    return state;
+}

package/useSubscription.d.ts

@@ -0,0 +1,4 @@
+import { type Ref, type ShallowRef } from 'vue';
+import type { IExecutor, OperationResult, OperationVariables, RequestContext, SubOpAsyncIterable, SubscriptionOperation } from './types.js';
+import { type OperationState } from './useOperation.js';
+export declare function useSubscription<T extends SubscriptionOperation<unknown, unknown>, TRequestContext extends RequestContext>(executor: IExecutor<TRequestContext>, operation: T, variables: OperationVariables<T> | Ref<OperationVariables<T>>, requestContext: TRequestContext | Ref<TRequestContext>): ShallowRef<OperationState<SubOpAsyncIterable<OperationResult<T>>>>;

package/useSubscription.jsx

@@ -0,0 +1,43 @@
+import { isRef, onUnmounted, shallowRef, watch, } from 'vue';
+import { loadingState } from './loading-state.js';
+export function useSubscription(executor, operation, variables, requestContext) {
+    const state = shallowRef(loadingState);
+    watch([
+        () => executor,
+        () => operation,
+        () => (isRef(variables) ? variables.value : variables),
+        () => isRef(requestContext) ? requestContext.value : requestContext,
+    ], ([exec, op, vars, ctx], _oldValues, onCleanup) => {
+        const controller = new AbortController();
+        onCleanup(() => {
+            if (state.value.state === 'success') {
+                state.value.result.close();
+            }
+            else {
+                controller.abort();
+            }
+            state.value = loadingState;
+        });
+        exec.executeSubscription(op, vars, ctx, controller)
+            .then((result) => {
+            if (controller.signal.aborted)
+                return;
+            state.value = { state: 'success', ...result };
+        })
+            .catch((error) => {
+            if (controller.signal.aborted)
+                return;
+            state.value = {
+                state: 'failure',
+                error: error,
+            };
+        });
+    }, { immediate: true, deep: true });
+    onUnmounted(() => {
+        if (state.value.state === 'success') {
+            state.value.result.close();
+        }
+        state.value = loadingState;
+    });
+    return state;
+}