@vladimirdev635/gql-client-react 0.0.41 → 0.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vladimirdev635/gql-client-react",
-    "version": "0.0.41",
+    "version": "0.0.42",
     "type": "module",
     "main": "./index.js",
     "types": "./index.d.ts",

package/tests/useSubscription.spec.d.ts

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

package/tests/useSubscription.spec.jsx

@@ -0,0 +1,47 @@
+import { useSubscription } from '../useSubscription.jsx';
+import { describe, expect, it } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import assert from 'assert';
+import { testSubscription } from './utils.js';
+describe('useSubscription', () => {
+    it('Should return loading state and then success state', async () => {
+        const executor = async () => {
+            const readableStream = new ReadableStream();
+            const response = new Response(readableStream);
+            return {
+                result: (async function* () {
+                    yield { number: 1 };
+                    yield { number: 2 };
+                    yield { number: 3 };
+                })(),
+                response
+            };
+        };
+        const { result } = renderHook((props) => useSubscription(...props), {
+            initialProps: [executor, testSubscription, {}, {}]
+        });
+        expect(result.current.state).toBe('loading');
+        act(() => { });
+        await act(async () => { });
+        expect(result.current.state).toBe('success');
+        assert(result.current.state === 'success');
+        let number = 1;
+        for await (const value of result.current.result) {
+            expect(value.number).toBe(number);
+            number++;
+        }
+    });
+    it('Should return loading state and then failure state', async () => {
+        const error = new Error('Network error');
+        const executor = async () => { throw error; };
+        const { result } = renderHook((props) => useSubscription(...props), {
+            initialProps: [executor, testSubscription, {}, {}]
+        });
+        expect(result.current.state).toBe('loading');
+        act(() => { });
+        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

@@ -7,3 +7,14 @@ export declare const testOperation: {
     readonly resultSchema: z.ZodObject<{}, z.core.$strip>;
 };
 export type TestOperationResult = z.infer<(typeof testOperation)['resultSchema']>;
+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 = z.infer<(typeof testSubscription)['resultSchema']>;
+export declare function asyncTimeout(timeoutMS: number): Promise<void>;

package/tests/utils.js

@@ -6,3 +6,13 @@ export const testOperation = {
     variablesSchema: z.object({}),
     resultSchema: z.object({})
 };
+export const testSubscription = {
+    document: '',
+    name: '',
+    type: 'SUBSCRIPTION',
+    variablesSchema: z.object({}),
+    resultSchema: z.object({ number: z.number() })
+};
+export async function asyncTimeout(timeoutMS) {
+    return await new Promise(resolve => setTimeout(resolve, timeoutMS));
+}

package/types.d.ts

@@ -1,16 +1,30 @@
 import { z } from 'zod/v4';
-export interface Operation {
+export interface SyncOperation {
     name: string;
     document: string;
-    type: 'QUERY' | 'MUTATION' | 'SUBSCRIPTION';
+    type: 'QUERY' | 'MUTATION';
     variablesSchema: z.ZodType;
     resultSchema: z.ZodType;
 }
+export interface SubscriptionOperation {
+    name: string;
+    document: string;
+    type: 'SUBSCRIPTION';
+    variablesSchema: z.ZodType;
+    resultSchema: z.ZodType;
+}
+export type Operation = SyncOperation | SubscriptionOperation;
 export interface ExecuteResult<TResult> {
     result: TResult;
     response: Response;
 }
+export type OperationResult<T extends Operation> = z.infer<T['resultSchema']>;
+export type OperationVariables<T extends Operation> = z.infer<T['variablesSchema']>;
+export type SubOpAsyncIterable<T extends Operation> = AsyncIterable<OperationResult<T>>;
 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<z.infer<T['resultSchema']>>>;
+export type Executor<TRequestContext extends RequestContext> = {
+    <TSyncOp extends SyncOperation>(operation: TSyncOp, variables: OperationVariables<TSyncOp>, context: TRequestContext): Promise<ExecuteResult<OperationResult<TSyncOp>>>;
+    <TOperation extends SubscriptionOperation>(operation: TOperation, variables: OperationVariables<TOperation>, context: TRequestContext): Promise<ExecuteResult<SubOpAsyncIterable<TOperation>>>;
+};

package/useLazyOperation.d.ts

@@ -1,5 +1,4 @@
-import { z } from 'zod/v4';
-import { Executor, Operation, RequestContext } from './types.js';
+import type { Executor, OperationResult, OperationVariables, RequestContext, SyncOperation } from './types.js';
 import { type OperationFailureState, type OperationState, type OperationSuccessState } from './useOperation.jsx';
 export interface LazyOperationInitialState {
     state: 'initial';
@@ -14,5 +13,5 @@ export interface UseLazyOperationReturnType<TVariables, TResult, TRequestContext
     state: LazyOperationState<TResult>;
     reset: () => void;
 }
-export declare function useLazyOperation<T extends Operation, TRequestContext extends RequestContext>(executor: Executor<TRequestContext>, operation: T): UseLazyOperationReturnType<z.infer<T['variablesSchema']>, z.infer<T['resultSchema']>, TRequestContext>;
+export declare function useLazyOperation<T extends SyncOperation, TRequestContext extends RequestContext>(executor: Executor<TRequestContext>, operation: T): UseLazyOperationReturnType<OperationVariables<T>, OperationResult<T>, TRequestContext>;
 export {};

package/useLazyOperation.jsx

@@ -1,5 +1,5 @@
-import { loadingState } from './useOperation.jsx';
 import { useCallback, useState } from 'react';
+import { loadingState } from './useOperation.jsx';
 export const lazyInitialState = Object.freeze({ state: 'initial' });
 async function execute(executor, operation, variables, requestContext, setState) {
     let newState;
@@ -20,8 +20,8 @@ export function useLazyOperation(executor, operation) {
         return execute(executor, operation, variables, requestContext, setState);
     }, [setState, executor, operation]);
     return {
-        execute: executeCallback,
         state,
+        execute: executeCallback,
         reset: () => setState(lazyInitialState)
     };
 }

package/useOperation.d.ts

@@ -1,5 +1,4 @@
-import { z } from 'zod/v4';
-import { ExecuteResult, Executor, Operation, RequestContext } from './types.js';
+import type { ExecuteResult, Executor, OperationResult, OperationVariables, RequestContext, SyncOperation } from './types.js';
 export interface OperationLoadingState {
     state: 'loading';
 }
@@ -14,4 +13,4 @@ export type OperationState<TResult> = OperationLoadingState | OperationSuccessSt
 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<z.infer<T['resultSchema']>>;
+export declare function useOperation<T extends SyncOperation, TRequestContext extends RequestContext>(executor: Executor<TRequestContext>, operation: T, variables: OperationVariables<T>, requestContext: TRequestContext): OperationState<OperationResult<T>>;

package/useSubscription.d.ts

@@ -0,0 +1,3 @@
+import type { Executor, OperationVariables, RequestContext, SubOpAsyncIterable, SubscriptionOperation } from './types.js';
+import { type OperationState } from './useOperation.jsx';
+export declare function useSubscription<T extends SubscriptionOperation, TRequestContext extends RequestContext>(executor: Executor<TRequestContext>, operation: T, variables: OperationVariables<T>, requestContext: TRequestContext): OperationState<SubOpAsyncIterable<T>>;

package/useSubscription.jsx

@@ -0,0 +1,21 @@
+import { useEffect, useMemo, useState } from 'react';
+import hash from 'object-hash';
+import { loadingState } from './useOperation.jsx';
+export function useSubscription(executor, operation, variables, requestContext) {
+    const [state, setState] = useState(loadingState);
+    const memoizedVariables = useMemo(() => variables, [hash(variables)]);
+    const memoizedRequestContext = useMemo(() => requestContext, [hash(requestContext)]);
+    useEffect(() => {
+        executor(operation, variables, requestContext)
+            .then(result => setState({ state: 'success', ...result }))
+            .catch(error => setState({ state: 'failure', error }));
+        return () => setState(loadingState);
+    }, [
+        setState,
+        executor,
+        operation,
+        memoizedVariables,
+        memoizedRequestContext
+    ]);
+    return state;
+}