@cratis/arc.react 18.7.6 → 18.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/arc.react",
-    "version": "18.7.6",
+    "version": "18.7.8",
     "description": "",
     "author": "Cratis",
     "license": "MIT",
@@ -59,7 +59,7 @@
         "up": "yarn g:up"
     },
     "dependencies": {
-        "@cratis/arc": "18.7.6",
+        "@cratis/arc": "18.7.8",
         "tsyringe": "^4.10.0"
     },
     "peerDependencies": {

package/queries/for_useQuery/FakeQueryWithRequiredParameters.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { QueryFor } from '@cratis/arc/queries';
+import { ParameterDescriptor } from '@cratis/arc/reflection';
+
+export interface FakeQueryWithRequiredParametersResult {
+    id: string;
+    name: string;
+}
+
+export interface FakeQueryWithRequiredParametersArguments {
+    userId: string;
+    category: string;
+}
+
+export class FakeQueryWithRequiredParameters extends QueryFor<FakeQueryWithRequiredParametersResult[]> {
+    readonly route = '/api/fake-query-with-required-parameters';
+    readonly parameterDescriptors: ParameterDescriptor[] = [];
+
+    get requiredRequestParameters(): string[] {
+        return ['userId', 'category'];
+    }
+
+    defaultValue: FakeQueryWithRequiredParametersResult[] = [];
+
+    constructor() {
+        super(Object, true);
+    }
+}

package/queries/for_useQuery/when_required_argument_changes.ts

@@ -0,0 +1,55 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import sinon from 'sinon';
+import { useQuery } from '../useQuery';
+import { FakeQueryWithRequiredParameters, FakeQueryWithRequiredParametersArguments } from './FakeQueryWithRequiredParameters';
+import { ArcContext, ArcConfiguration } from '../../ArcContext';
+import { createFetchHelper } from '@cratis/arc/helpers/fetchHelper';
+
+describe('when required argument changes', () => {
+    let fetchStub: sinon.SinonStub;
+    let fetchHelper: { stubFetch: () => sinon.SinonStub; restore: () => void };
+
+    beforeEach(() => {
+        fetchHelper = createFetchHelper();
+        fetchStub = fetchHelper.stubFetch();
+        fetchStub.resolves({
+            json: async () => ({ data: [], isSuccess: true, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], exceptionStackTrace: '' })
+        } as Response);
+    });
+
+    afterEach(() => {
+        fetchHelper.restore();
+    });
+
+    const config: ArcConfiguration = {
+        microservice: 'test-microservice',
+        apiBasePath: '/api',
+        origin: 'https://example.com'
+    };
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+        React.createElement(ArcContext.Provider, { value: config }, children)
+    );
+
+    it('should execute query again when argument changes', async () => {
+        const { rerender } = renderHook(
+            ({ args }: { args: FakeQueryWithRequiredParametersArguments }) => useQuery(FakeQueryWithRequiredParameters, args),
+            {
+                wrapper,
+                initialProps: { args: { userId: 'user-1', category: 'cat-1' } }
+            }
+        );
+
+        await waitFor(() => fetchStub.should.have.been.calledOnce);
+
+        fetchStub.resetHistory();
+
+        rerender({ args: { userId: 'user-2', category: 'cat-1' } });
+
+        await waitFor(() => fetchStub.should.have.been.calledOnce);
+    });
+});

package/queries/for_useQuery/when_sorting_changes.ts

@@ -0,0 +1,54 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import sinon from 'sinon';
+import { useQuery } from '../useQuery';
+import { FakeQuery } from './FakeQuery';
+import { ArcContext, ArcConfiguration } from '../../ArcContext';
+import { createFetchHelper } from '@cratis/arc/helpers/fetchHelper';
+import { Sorting, SortDirection } from '@cratis/arc/queries';
+
+describe('when sorting changes', () => {
+    let fetchStub: sinon.SinonStub;
+    let fetchHelper: { stubFetch: () => sinon.SinonStub; restore: () => void };
+
+    beforeEach(() => {
+        fetchHelper = createFetchHelper();
+        fetchStub = fetchHelper.stubFetch();
+        fetchStub.resolves({
+            json: async () => ({ data: [], isSuccess: true, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], exceptionStackTrace: '' })
+        } as Response);
+    });
+
+    afterEach(() => {
+        fetchHelper.restore();
+    });
+
+    const config: ArcConfiguration = {
+        microservice: 'test-microservice',
+        apiBasePath: '/api',
+        origin: 'https://example.com'
+    };
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+        React.createElement(ArcContext.Provider, { value: config }, children)
+    );
+
+    it('should execute query again when sorting changes', async () => {
+        const { result } = renderHook(
+            () => useQuery(FakeQuery),
+            { wrapper }
+        );
+
+        await waitFor(() => fetchStub.should.have.been.calledOnce);
+
+        fetchStub.resetHistory();
+
+        const [, , setSorting] = result.current;
+        await setSorting(new Sorting('name', SortDirection.ascending));
+
+        await waitFor(() => fetchStub.should.have.been.calledOnce);
+    });
+});

package/queries/for_useQueryWithPaging/when_paging_changes.ts

@@ -0,0 +1,54 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import sinon from 'sinon';
+import { useQueryWithPaging } from '../useQuery';
+import { FakeQuery } from '../for_useQuery/FakeQuery';
+import { ArcContext, ArcConfiguration } from '../../ArcContext';
+import { createFetchHelper } from '@cratis/arc/helpers/fetchHelper';
+import { Paging } from '@cratis/arc/queries';
+
+describe('when paging changes', () => {
+    let fetchStub: sinon.SinonStub;
+    let fetchHelper: { stubFetch: () => sinon.SinonStub; restore: () => void };
+
+    beforeEach(() => {
+        fetchHelper = createFetchHelper();
+        fetchStub = fetchHelper.stubFetch();
+        fetchStub.resolves({
+            json: async () => ({ data: [], isSuccess: true, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], exceptionStackTrace: '' })
+        } as Response);
+    });
+
+    afterEach(() => {
+        fetchHelper.restore();
+    });
+
+    const config: ArcConfiguration = {
+        microservice: 'test-microservice',
+        apiBasePath: '/api',
+        origin: 'https://example.com'
+    };
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+        React.createElement(ArcContext.Provider, { value: config }, children)
+    );
+
+    it('should execute query again when page changes', async () => {
+        const { result } = renderHook(
+            () => useQueryWithPaging(FakeQuery, new Paging(0, 10)),
+            { wrapper }
+        );
+
+        await waitFor(() => fetchStub.should.have.been.calledOnce);
+
+        fetchStub.resetHistory();
+
+        const [, , , setPage] = result.current;
+        await setPage(1);
+
+        await waitFor(() => fetchStub.should.have.been.calledOnce);
+    });
+});

package/queries/for_useQueryWithPaging/when_required_argument_changes.ts

@@ -0,0 +1,57 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import sinon from 'sinon';
+import { useQueryWithPaging } from '../useQuery';
+import { FakeQueryWithRequiredParameters, FakeQueryWithRequiredParametersArguments } from '../for_useQuery/FakeQueryWithRequiredParameters';
+import { ArcContext, ArcConfiguration } from '../../ArcContext';
+import { createFetchHelper } from '@cratis/arc/helpers/fetchHelper';
+import { Paging } from '@cratis/arc/queries';
+
+describe('when required argument changes', () => {
+    let fetchStub: sinon.SinonStub;
+    let fetchHelper: { stubFetch: () => sinon.SinonStub; restore: () => void };
+
+    beforeEach(() => {
+        fetchHelper = createFetchHelper();
+        fetchStub = fetchHelper.stubFetch();
+        fetchStub.resolves({
+            json: async () => ({ data: [], isSuccess: true, isAuthorized: true, isValid: true, hasExceptions: false, validationResults: [], exceptionMessages: [], exceptionStackTrace: '' })
+        } as Response);
+    });
+
+    afterEach(() => {
+        fetchHelper.restore();
+    });
+
+    const config: ArcConfiguration = {
+        microservice: 'test-microservice',
+        apiBasePath: '/api',
+        origin: 'https://example.com'
+    };
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+        React.createElement(ArcContext.Provider, { value: config }, children)
+    );
+
+    it('should execute query again when argument changes', async () => {
+        const { rerender } = renderHook(
+            ({ args }: { args: FakeQueryWithRequiredParametersArguments }) => 
+                useQueryWithPaging(FakeQueryWithRequiredParameters, new Paging(0, 10), args),
+            {
+                wrapper,
+                initialProps: { args: { userId: 'user-1', category: 'cat-1' } }
+            }
+        );
+
+        await waitFor(() => fetchStub.should.have.been.calledOnce);
+
+        fetchStub.resetHistory();
+
+        rerender({ args: { userId: 'user-2', category: 'cat-1' } });
+
+        await waitFor(() => fetchStub.should.have.been.calledOnce);
+    });
+});

package/queries/useQuery.ts

@@ -18,24 +18,24 @@ type QueryPerformer<TQuery extends IQueryFor<TDataType>, TDataType, TArguments =
 
 function useQueryInternal<TDataType, TQuery extends IQueryFor<TDataType>, TArguments = object>(query: Constructor<TQuery>, performer: QueryPerformer<TQuery, TDataType, TArguments>, sorting?: Sorting, paging?: Paging, args?: TArguments):
     [QueryResultWithState<TDataType>, PerformQuery<TArguments>, SetSorting, SetPage, SetPageSize] {
-    paging ??= Paging.noPaging;
-    sorting ??= Sorting.none;
+    const [currentPaging, setCurrentPaging] = useState<Paging>(paging ?? Paging.noPaging);
+    const [currentSorting, setCurrentSorting] = useState<Sorting>(sorting ?? Sorting.none);
     const arc = useContext(ArcContext);
     const queryInstance = useRef<TQuery | null>(null);
-    const [renderCounter, setRenderCounter] = useState(0);
 
     queryInstance.current = useMemo(() => {
         const instance = new query() as TQuery;
-        instance.paging = paging;
-        instance.sorting = sorting;
+        instance.paging = currentPaging;
+        instance.sorting = currentSorting;
         instance.setMicroservice(arc.microservice);
         instance.setApiBasePath(arc.apiBasePath ?? '');
         instance.setOrigin(arc.origin ?? '');
         instance.setHttpHeadersCallback(arc.httpHeadersCallback ?? (() => ({})));
         return instance;
-    }, []);
+    }, [currentPaging, currentSorting, arc.microservice, arc.apiBasePath, arc.origin]);
 
     const [result, setResult] = useState<QueryResultWithState<TDataType>>(QueryResultWithState.initial(queryInstance.current!.defaultValue));
+    const argumentsDependency = queryInstance.current!.requiredRequestParameters.map(_ => args?.[_]);
 
     const queryExecutor = (async (args?: TArguments) => {
         if (queryInstance) {
@@ -50,11 +50,7 @@ function useQueryInternal<TDataType, TQuery extends IQueryFor<TDataType>, TArgum
 
     useEffect(() => {
         queryExecutor(args);
-    }, []);
-
-    const invalidate = () => {
-        setRenderCounter(renderCounter + 1);
-    };
+    }, [...argumentsDependency, ...[currentPaging, currentSorting]]);
 
     return [
         result!,
@@ -63,22 +59,13 @@ function useQueryInternal<TDataType, TQuery extends IQueryFor<TDataType>, TArgum
             await queryExecutor(args);
         },
         async (sorting: Sorting) => {
-            setResult(QueryResultWithState.fromQueryResult(result!, true));
-            queryInstance.current!.sorting = sorting;
-            invalidate();
-            await queryExecutor(args);
+            setCurrentSorting(sorting);
         },
         async (page: number) => {
-            setResult(QueryResultWithState.fromQueryResult(result!, true));
-            queryInstance.current!.paging = new Paging(page, queryInstance.current!.paging?.pageSize ?? 0);
-            invalidate();
-            await queryExecutor(args);
+            setCurrentPaging(new Paging(page, currentPaging.pageSize));
         },
         async (pageSize: number) => {
-            setResult(QueryResultWithState.fromQueryResult(result!, true));
-            queryInstance.current!.paging = new Paging(queryInstance.current!.paging?.page ?? 0, pageSize);
-            invalidate();
-            await queryExecutor(args);
+            setCurrentPaging(new Paging(currentPaging.page, pageSize));
         }];
 }