@vladimirdev635/gql-client-react 0.0.106 → 0.0.108
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/loading-state.js +3 -1
- package/package.json +11 -9
- package/tests/useLazyOperation.spec.js +5 -3
- package/tests/useOperation.spec.jsx +6 -4
- package/tests/useSubscription.spec.jsx +7 -5
- package/tests/utils.js +2 -2
- package/types.d.ts +4 -3
- package/use-lazy-operation/hook.js +5 -6
- package/use-lazy-operation/index.d.ts +2 -2
- package/use-lazy-operation/index.js +1 -1
- package/useOperation.jsx +12 -7
- package/useSubscription.jsx +24 -7
package/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { type OperationLoadingState, type OperationSuccessState, type OperationFailureState, type OperationState, useOperation, } from './useOperation.jsx';
|
|
2
|
-
export { type LazyOperationInitialState, type LazyOperationState, type UseLazyOperationReturnType, type LazyOperationExecuteReturnType, useLazyOperation } from './use-lazy-operation/index.js';
|
|
2
|
+
export { type LazyOperationInitialState, type LazyOperationState, type UseLazyOperationReturnType, type LazyOperationExecuteReturnType, useLazyOperation, } from './use-lazy-operation/index.js';
|
|
3
3
|
export { useSubscription } from './useSubscription.jsx';
|
package/index.js
CHANGED
package/loading-state.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vladimirdev635/gql-client-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.108",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"types": "./index.d.ts",
|
|
@@ -13,9 +13,11 @@
|
|
|
13
13
|
"url": "git+https://github.com/Voldemat/graphql-plus-plus.git"
|
|
14
14
|
},
|
|
15
15
|
"scripts": {
|
|
16
|
-
"lint": "
|
|
17
|
-
"lint:fix": "
|
|
18
|
-
"
|
|
16
|
+
"lint": "oxlint .",
|
|
17
|
+
"lint:fix": "oxlint --fix .",
|
|
18
|
+
"fmt": "oxfmt .",
|
|
19
|
+
"fmt:check": "oxfmt --check .",
|
|
20
|
+
"lint:ci": "npm run lint && npm run fmt:check",
|
|
19
21
|
"test": "vitest",
|
|
20
22
|
"build": "tsc && cp package.json .npmignore ./dist/"
|
|
21
23
|
},
|
|
@@ -24,24 +26,24 @@
|
|
|
24
26
|
"license": "ISC",
|
|
25
27
|
"description": "",
|
|
26
28
|
"devDependencies": {
|
|
27
|
-
"@eslint/compat": "^1.3.0",
|
|
28
29
|
"@testing-library/jest-dom": "^6.6.3",
|
|
29
30
|
"@testing-library/react": "^16.3.0",
|
|
30
31
|
"@testing-library/user-event": "^14.6.1",
|
|
31
32
|
"@types/node": "^24.0.1",
|
|
32
33
|
"@types/object-hash": "^3.0.6",
|
|
33
34
|
"@types/react": "^19.1.8",
|
|
34
|
-
"@typescript-eslint/eslint-plugin": "^8.34.0",
|
|
35
35
|
"@vitejs/plugin-react": "^4.6.0",
|
|
36
|
-
"eslint": "^9.31.0",
|
|
37
|
-
"eslint-plugin-react": "^7.37.5",
|
|
38
36
|
"jiti": "^2.4.2",
|
|
39
37
|
"jsdom": "^26.1.0",
|
|
38
|
+
"oxfmt": "^0.64.0",
|
|
39
|
+
"oxlint": "^1.79.0",
|
|
40
|
+
"typescript": "<7.0.0",
|
|
41
|
+
"typescript-language-server": "^5.3.0",
|
|
40
42
|
"vitest": "^3.2.4"
|
|
41
43
|
},
|
|
42
44
|
"peerDependencies": {
|
|
43
|
-
"react": "*",
|
|
44
45
|
"object-hash": ">=3.0.0",
|
|
46
|
+
"react": "*",
|
|
45
47
|
"zod": ">=4.0.5"
|
|
46
48
|
},
|
|
47
49
|
"optionalDependencies": {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useLazyOperation } from '../use-lazy-operation/index.js';
|
|
1
|
+
import { useLazyOperation, } from '../use-lazy-operation/index.js';
|
|
2
2
|
import { describe, expect, it } from 'vitest';
|
|
3
3
|
import { renderHook, act } from '@testing-library/react';
|
|
4
4
|
import assert from 'assert';
|
|
@@ -14,7 +14,7 @@ describe('useLazyOperation', () => {
|
|
|
14
14
|
const executor = {
|
|
15
15
|
executeSync: async () => ({
|
|
16
16
|
result: { a: 1 },
|
|
17
|
-
response: new Response()
|
|
17
|
+
response: new Response(),
|
|
18
18
|
}),
|
|
19
19
|
};
|
|
20
20
|
const { result } = renderHook(() => useLazyOperation(executor, testOperation));
|
|
@@ -34,7 +34,9 @@ describe('useLazyOperation', () => {
|
|
|
34
34
|
it('Should return loading state after invoking, then failure state', async () => {
|
|
35
35
|
const error = new Error('Network error');
|
|
36
36
|
const executor = {
|
|
37
|
-
executeSync: async () => {
|
|
37
|
+
executeSync: async () => {
|
|
38
|
+
throw error;
|
|
39
|
+
},
|
|
38
40
|
};
|
|
39
41
|
const { result } = renderHook(() => useLazyOperation(executor, testOperation));
|
|
40
42
|
let promise;
|
|
@@ -8,11 +8,11 @@ describe('useOperation', () => {
|
|
|
8
8
|
const executor = {
|
|
9
9
|
executeSync: async () => ({
|
|
10
10
|
result: { a: 1 },
|
|
11
|
-
response: new Response()
|
|
11
|
+
response: new Response(),
|
|
12
12
|
}),
|
|
13
13
|
};
|
|
14
14
|
const { result } = renderHook((props) => useOperation(...props), {
|
|
15
|
-
initialProps: [executor, testOperation, {}, {}]
|
|
15
|
+
initialProps: [executor, testOperation, {}, {}],
|
|
16
16
|
});
|
|
17
17
|
expect(result.current.state).toBe('loading');
|
|
18
18
|
act(() => { });
|
|
@@ -24,10 +24,12 @@ describe('useOperation', () => {
|
|
|
24
24
|
it('Should return loading state and then failure state', async () => {
|
|
25
25
|
const error = new Error('Network error');
|
|
26
26
|
const executor = {
|
|
27
|
-
executeSync: async () => {
|
|
27
|
+
executeSync: async () => {
|
|
28
|
+
throw error;
|
|
29
|
+
},
|
|
28
30
|
};
|
|
29
31
|
const { result } = renderHook((props) => useOperation(...props), {
|
|
30
|
-
initialProps: [executor, testOperation, {}, {}]
|
|
32
|
+
initialProps: [executor, testOperation, {}, {}],
|
|
31
33
|
});
|
|
32
34
|
expect(result.current.state).toBe('loading');
|
|
33
35
|
act(() => { });
|
|
@@ -16,14 +16,14 @@ describe('useSubscription', () => {
|
|
|
16
16
|
yield { number: 2 };
|
|
17
17
|
yield { number: 3 };
|
|
18
18
|
})(),
|
|
19
|
-
close: () => { }
|
|
19
|
+
close: () => { },
|
|
20
20
|
},
|
|
21
|
-
response
|
|
21
|
+
response,
|
|
22
22
|
};
|
|
23
23
|
},
|
|
24
24
|
};
|
|
25
25
|
const { result } = renderHook((props) => useSubscription(...props), {
|
|
26
|
-
initialProps: [executor, testSubscription, {}, {}]
|
|
26
|
+
initialProps: [executor, testSubscription, {}, {}],
|
|
27
27
|
});
|
|
28
28
|
expect(result.current.state).toBe('loading');
|
|
29
29
|
act(() => { });
|
|
@@ -39,10 +39,12 @@ describe('useSubscription', () => {
|
|
|
39
39
|
it('Should return loading state and then failure state', async () => {
|
|
40
40
|
const error = new Error('Network error');
|
|
41
41
|
const executor = {
|
|
42
|
-
executeSubscription: async () => {
|
|
42
|
+
executeSubscription: async () => {
|
|
43
|
+
throw error;
|
|
44
|
+
},
|
|
43
45
|
};
|
|
44
46
|
const { result } = renderHook((props) => useSubscription(...props), {
|
|
45
|
-
initialProps: [executor, testSubscription, {}, {}]
|
|
47
|
+
initialProps: [executor, testSubscription, {}, {}],
|
|
46
48
|
});
|
|
47
49
|
expect(result.current.state).toBe('loading');
|
|
48
50
|
act(() => { });
|
package/tests/utils.js
CHANGED
|
@@ -4,12 +4,12 @@ export const testOperation = {
|
|
|
4
4
|
name: '',
|
|
5
5
|
type: 'QUERY',
|
|
6
6
|
variablesSchema: z.object({}),
|
|
7
|
-
resultSchema: z.object({})
|
|
7
|
+
resultSchema: z.object({}),
|
|
8
8
|
};
|
|
9
9
|
export const testSubscription = {
|
|
10
10
|
document: '',
|
|
11
11
|
name: '',
|
|
12
12
|
type: 'SUBSCRIPTION',
|
|
13
13
|
variablesSchema: z.object({}),
|
|
14
|
-
resultSchema: z.object({ number: z.number() })
|
|
14
|
+
resultSchema: z.object({ number: z.number() }),
|
|
15
15
|
};
|
package/types.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { z } from 'zod/v4';
|
|
2
|
-
export type
|
|
2
|
+
export type SchemaForInput<T> = z.ZodType<unknown, T>;
|
|
3
|
+
export type SchemaForOutput<T> = z.ZodType<T>;
|
|
3
4
|
interface BaseOperation<V, R> {
|
|
4
5
|
name: string;
|
|
5
6
|
document: string;
|
|
6
|
-
variablesSchema:
|
|
7
|
-
resultSchema:
|
|
7
|
+
variablesSchema: SchemaForInput<V>;
|
|
8
|
+
resultSchema: SchemaForOutput<R>;
|
|
8
9
|
}
|
|
9
10
|
export interface SyncOperation<V, R> extends BaseOperation<V, R> {
|
|
10
11
|
type: 'QUERY' | 'MUTATION';
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { useCallback, useState } from 'react';
|
|
1
|
+
import { useCallback, useState, } from 'react';
|
|
2
2
|
import { loadingState } from '../loading-state.js';
|
|
3
|
-
const lazyInitialState = Object.freeze({
|
|
3
|
+
const lazyInitialState = Object.freeze({
|
|
4
|
+
state: 'initial',
|
|
5
|
+
});
|
|
4
6
|
async function execute(executor, operation, variables, requestContext, setState) {
|
|
5
7
|
let newState;
|
|
6
8
|
try {
|
|
@@ -19,8 +21,5 @@ export function useLazyOperation(executor, operation) {
|
|
|
19
21
|
setState(loadingState);
|
|
20
22
|
return execute(executor, operation, variables, requestContext, setState);
|
|
21
23
|
}, [setState, executor, operation]);
|
|
22
|
-
return [
|
|
23
|
-
executeCallback,
|
|
24
|
-
{ state, reset: () => setState(lazyInitialState) }
|
|
25
|
-
];
|
|
24
|
+
return [executeCallback, { state, reset: () => setState(lazyInitialState) }];
|
|
26
25
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { useLazyOperation
|
|
2
|
-
export type { LazyOperationInitialState, LazyOperationState, LazyOperationExecuteReturnType, UseLazyOperationReturnType } from './types.js';
|
|
1
|
+
export { useLazyOperation } from './hook.js';
|
|
2
|
+
export type { LazyOperationInitialState, LazyOperationState, LazyOperationExecuteReturnType, UseLazyOperationReturnType, } from './types.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { useLazyOperation
|
|
1
|
+
export { useLazyOperation } from './hook.js';
|
package/useOperation.jsx
CHANGED
|
@@ -1,21 +1,26 @@
|
|
|
1
|
-
import { useEffect, useMemo, useState } from 'react';
|
|
2
1
|
import hash from 'object-hash';
|
|
2
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import { loadingState } from './loading-state.js';
|
|
4
4
|
export function useOperation(executor, operation, variables, requestContext) {
|
|
5
5
|
const [state, setState] = useState(loadingState);
|
|
6
|
-
const memoizedVariables = useMemo(() => variables,
|
|
7
|
-
|
|
6
|
+
const memoizedVariables = useMemo(() => variables,
|
|
7
|
+
// oxlint-disable-next-line exhaustive-deps,use-memo
|
|
8
|
+
[hash(variables)]);
|
|
9
|
+
const memoizedRequestContext = useMemo(() => requestContext,
|
|
10
|
+
// oxlint-disable-next-line exhaustive-deps,use-memo
|
|
11
|
+
[hash(requestContext)]);
|
|
8
12
|
useEffect(() => {
|
|
9
|
-
executor
|
|
10
|
-
.
|
|
11
|
-
.
|
|
13
|
+
executor
|
|
14
|
+
.executeSync(operation, memoizedVariables, memoizedRequestContext)
|
|
15
|
+
.then((result) => setState({ state: 'success', ...result }))
|
|
16
|
+
.catch((error) => setState({ state: 'failure', error }));
|
|
12
17
|
return () => setState(loadingState);
|
|
13
18
|
}, [
|
|
14
19
|
setState,
|
|
15
20
|
executor,
|
|
16
21
|
operation,
|
|
17
22
|
memoizedVariables,
|
|
18
|
-
memoizedRequestContext
|
|
23
|
+
memoizedRequestContext,
|
|
19
24
|
]);
|
|
20
25
|
return state;
|
|
21
26
|
}
|
package/useSubscription.jsx
CHANGED
|
@@ -3,17 +3,34 @@ import hash from 'object-hash';
|
|
|
3
3
|
import { loadingState } from './loading-state.js';
|
|
4
4
|
export function useSubscription(executor, operation, variables, requestContext) {
|
|
5
5
|
const [state, setState] = useState(loadingState);
|
|
6
|
-
const memoizedVariables = useMemo(() => variables,
|
|
7
|
-
|
|
6
|
+
const memoizedVariables = useMemo(() => variables,
|
|
7
|
+
// oxlint-disable-next-line exhaustive-deps,use-memo
|
|
8
|
+
[hash(variables)]);
|
|
9
|
+
const memoizedRequestContext = useMemo(() => requestContext,
|
|
10
|
+
// oxlint-disable-next-line exhaustive-deps,use-memo
|
|
11
|
+
[hash(requestContext)]);
|
|
8
12
|
useEffect(() => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
.
|
|
13
|
+
const controller = new AbortController();
|
|
14
|
+
executor
|
|
15
|
+
.executeSubscription(operation, memoizedVariables, memoizedRequestContext, controller)
|
|
16
|
+
.then((result) => {
|
|
17
|
+
if (controller.signal.aborted)
|
|
18
|
+
return;
|
|
19
|
+
setState({ state: 'success', ...result });
|
|
20
|
+
})
|
|
21
|
+
.catch((error) => {
|
|
22
|
+
if (controller.signal.aborted)
|
|
23
|
+
return;
|
|
24
|
+
setState({ state: 'failure', error });
|
|
25
|
+
});
|
|
12
26
|
return () => {
|
|
13
|
-
setState(currentState => {
|
|
27
|
+
setState((currentState) => {
|
|
14
28
|
if (currentState.state === 'success') {
|
|
15
29
|
currentState.result.close();
|
|
16
30
|
}
|
|
31
|
+
else {
|
|
32
|
+
controller.abort();
|
|
33
|
+
}
|
|
17
34
|
return loadingState;
|
|
18
35
|
});
|
|
19
36
|
};
|
|
@@ -22,7 +39,7 @@ export function useSubscription(executor, operation, variables, requestContext)
|
|
|
22
39
|
executor,
|
|
23
40
|
operation,
|
|
24
41
|
memoizedVariables,
|
|
25
|
-
memoizedRequestContext
|
|
42
|
+
memoizedRequestContext,
|
|
26
43
|
]);
|
|
27
44
|
return state;
|
|
28
45
|
}
|