@vladimirdev635/gql-client-react 0.0.1

package/.npmignore

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

package/context.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { Executor, RequestContext } from './types.js';
+export declare function createProviderAndHook<TRequestContext extends RequestContext>(): {
+    useGQLExecutor: () => Executor<TRequestContext>;
+    GQLExecutorProvider: ({ children, executor }: {
+        children: ReactNode;
+        executor: Executor<TRequestContext>;
+    }) => import("react").JSX.Element;
+};

package/context.jsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+export function createProviderAndHook() {
+    const context = createContext(undefined);
+    function Provider({ children, executor }) {
+        return (<context.Provider value={executor}>
+                {children}
+            </context.Provider>);
+    }
+    function useExecutor() {
+        return useContext(context);
+    }
+    return {
+        useGQLExecutor: useExecutor,
+        GQLExecutorProvider: Provider
+    };
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+export { createProviderAndHook } from './context.jsx';
+export { type OperationLoadingState, type OperationSuccessState, type OperationFailureState, type OperationState, loadingState, useOperation, } from './useOperation.jsx';
+export { LazyOperationInitialState, LazyOperationState, lazyInitialState, useLazyOperation } from './useLazyOperation.jsx';

package/index.js

@@ -0,0 +1,3 @@
+export { createProviderAndHook } from './context.jsx';
+export { loadingState, useOperation, } from './useOperation.jsx';
+export { lazyInitialState, useLazyOperation } from './useLazyOperation.jsx';

package/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "@vladimirdev635/gql-client-react",
+    "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": "eslint .",
+        "lint:fix": "eslint --fix .",
+        "lint:ci": "npm run lint",
+        "test": "vitest",
+        "build": "tsc && cp package.json .npmignore ./dist/"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "description": "",
+    "devDependencies": {
+        "@eslint/compat": "^1.3.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/node": "^24.0.1",
+        "@types/react": "^19.1.8",
+        "@typescript-eslint/eslint-plugin": "^8.34.0",
+        "@vitejs/plugin-react": "^4.6.0",
+        "eslint": "^9.28.0",
+        "jiti": "^2.4.2",
+        "jsdom": "^26.1.0",
+        "vitest": "^3.2.4"
+    },
+    "dependencies": {
+        "react": "^19.1.0",
+        "zod": "^4.0.5"
+    },
+    "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.9.5"
+    }
+}

package/tests/useLazyOperation.spec.d.ts

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

package/tests/useLazyOperation.spec.js

@@ -0,0 +1,49 @@
+import { useLazyOperation } from '../useLazyOperation.jsx';
+import { describe, expect, it } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import assert from 'assert';
+import { testOperation } from './utils.js';
+describe('useLazyOperation', () => {
+    it('Should preserve initial state if no one calls', async () => {
+        const { result } = renderHook(() => useLazyOperation({}, testOperation));
+        expect(result.current.state.state).toBe('initial');
+        await act(async () => { });
+        expect(result.current.state.state).toBe('initial');
+    });
+    it('Should return loading state after invoking, then success state', async () => {
+        const executor = async () => ({
+            result: { a: 1 },
+            response: new Response()
+        });
+        const { result } = renderHook(() => useLazyOperation(executor, testOperation));
+        let promise;
+        act(() => {
+            promise = result.current.execute({}, {});
+        });
+        expect(result.current.state.state).toBe('loading');
+        // @ts-expect-error 2454
+        const newState = await promise;
+        expect(newState.state).toBe('success');
+        assert(newState.state === 'success');
+        expect(newState.result).toStrictEqual({ a: 1 });
+        await act(async () => { });
+        expect(result.current.state).toStrictEqual(newState);
+    });
+    it('Should return loading state after invoking, then failure state', async () => {
+        const error = new Error('Network error');
+        const executor = async () => { throw error; };
+        const { result } = renderHook(() => useLazyOperation(executor, testOperation));
+        let promise;
+        act(() => {
+            promise = result.current.execute({}, {});
+        });
+        expect(result.current.state.state).toBe('loading');
+        // @ts-expect-error 2454
+        const newState = await promise;
+        expect(newState.state).toBe('failure');
+        assert(newState.state === 'failure');
+        expect(newState.error).toBe(error);
+        await act(async () => { });
+        expect(result.current.state).toStrictEqual(newState);
+    });
+});

package/tests/useOperation.spec.d.ts

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

package/tests/useOperation.spec.jsx

@@ -0,0 +1,29 @@
+import { useOperation } from '../useOperation.jsx';
+import { describe, expect, it } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import assert from 'assert';
+import { testOperation } from './utils.js';
+describe('useOperation', () => {
+    it('Should return loading state and then success state', async () => {
+        const executor = async () => ({
+            result: { a: 1 },
+            response: new Response()
+        });
+        const { result } = renderHook(() => useOperation(executor, testOperation, {}, {}));
+        expect(result.current.state).toBe('loading');
+        await act(async () => { });
+        expect(result.current.state).toBe('success');
+        assert(result.current.state === 'success');
+        expect(result.current.result).toStrictEqual({ a: 1 });
+    });
+    it('Should return loading state and then failure state', async () => {
+        const error = new Error('Network error');
+        const executor = async () => { throw error; };
+        const { result } = renderHook(() => useOperation(executor, testOperation, {}, {}));
+        expect(result.current.state).toBe('loading');
+        await act(async () => { });
+        expect(result.current.state).toBe('failure');
+        assert(result.current.state === 'failure');
+        expect(result.current.error).toBe(error);
+    });
+});

package/tests/utils.d.ts

@@ -0,0 +1,8 @@
+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>;
+};

package/tests/utils.js

@@ -0,0 +1,8 @@
+import { z } from 'zod/v4';
+export const testOperation = {
+    document: '',
+    name: '',
+    type: 'QUERY',
+    variablesSchema: z.object({}),
+    resultSchema: z.object({})
+};

package/types.d.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod/v4';
+export interface Operation {
+    name: string;
+    document: string;
+    type: 'QUERY' | 'MUTATION' | 'SUBSCRIPTION';
+    variablesSchema: z.ZodType;
+    resultSchema: z.ZodType;
+}
+export interface ExecuteResult<T extends Operation> {
+    result: z.infer<T['resultSchema']>;
+    response: Response;
+}
+export interface RequestContext {
+    fetchOptions?: RequestInit;
+}
+export type Executor<TRequestContext extends RequestContext> = <T extends Operation>(operation: T, variables: z.infer<T['variablesSchema']>, context: TRequestContext) => Promise<ExecuteResult<T>>;

package/types.js

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

package/useLazyOperation.d.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod/v4';
+import { Executor, Operation, RequestContext } from './types.js';
+import { OperationState } from './useOperation.jsx';
+export interface LazyOperationInitialState {
+    state: 'initial';
+}
+export type LazyOperationState<T extends Operation> = OperationState<T> | LazyOperationInitialState;
+export declare const lazyInitialState: Readonly<{
+    readonly state: "initial";
+}>;
+interface UseLazyOperationReturnType<T extends Operation, TRequestContext extends RequestContext> {
+    execute: (variables: z.infer<T['variablesSchema']>, requestContext: TRequestContext) => Promise<LazyOperationState<T>>;
+    state: LazyOperationState<T>;
+    reset: () => void;
+}
+export declare function useLazyOperation<T extends Operation, TRequestContext extends RequestContext>(executor: Executor<TRequestContext>, operation: T): UseLazyOperationReturnType<T, TRequestContext>;
+export {};

package/useLazyOperation.jsx

@@ -0,0 +1,26 @@
+import { loadingState } from './useOperation.jsx';
+import { useState } from 'react';
+export const lazyInitialState = Object.freeze({ state: 'initial' });
+async function execute(executor, operation, variables, requestContext, setState) {
+    let newState;
+    try {
+        const result = await executor(operation, variables, requestContext);
+        newState = { state: 'success', ...result };
+    }
+    catch (error) {
+        newState = { state: 'failure', error: error };
+    }
+    setState(newState);
+    return newState;
+}
+export function useLazyOperation(executor, operation) {
+    const [state, setState] = useState(lazyInitialState);
+    return {
+        execute: (variables, requestContext) => {
+            setState(loadingState);
+            return execute(executor, operation, variables, requestContext, setState);
+        },
+        state,
+        reset: () => setState(lazyInitialState)
+    };
+}

package/useOperation.d.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod/v4';
+import { ExecuteResult, Executor, Operation, RequestContext } from './types.js';
+export interface OperationLoadingState {
+    state: 'loading';
+}
+export interface OperationSuccessState<T extends Operation> extends ExecuteResult<T> {
+    state: 'success';
+}
+export interface OperationFailureState {
+    state: 'failure';
+    error: Error;
+}
+export type OperationState<T extends Operation> = OperationLoadingState | OperationSuccessState<T> | OperationFailureState;
+export declare const loadingState: Readonly<{
+    readonly state: "loading";
+}>;
+export declare function useOperation<T extends Operation, TRequestContext extends RequestContext>(executor: Executor<TRequestContext>, operation: T, variables: z.infer<T['variablesSchema']>, requestContext: TRequestContext): OperationState<T>;

package/useOperation.jsx

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+export const loadingState = Object.freeze({ state: 'loading' });
+export function useOperation(executor, operation, variables, requestContext) {
+    const [state, setState] = useState(loadingState);
+    useEffect(() => {
+        executor(operation, variables, requestContext)
+            .then(result => setState({ state: 'success', ...result }))
+            .catch(error => setState({ state: 'failure', error }));
+        return () => setState(loadingState);
+    }, []);
+    return state;
+}