feat: use query

Author: acrazing

.yarn/install-state.gz

@@ -19,6 +19,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
     "@types/babel__core": "^7",
     "@types/fs-extra": "^11.0.4",

package.json

@@ -4,6 +4,7 @@
  */
 
 import { AmosObject, createAmosObject, enhancerCollector } from 'amos-utils';
+import type { Box } from './box';
 import { SelectorFactory } from './selector';
 import { CacheOptions, Dispatch, Select } from './types';
 
@@ -31,9 +32,8 @@ export interface ActionOptions<A extends any[] = any, R = any> {
 
   /**
    * How to handle conflicted action dispatch.
-   * - always: will always dispatch.
+   * - always: will always dispatch. (default)
    * - leading: only take first to dispatch.
-   * The default value is always when no conflictKey is set.
    *
    * Note: we have no plan to implement `trailing` mode,
    * it should be controlled in user space.
@@ -43,9 +43,6 @@ export interface ActionOptions<A extends any[] = any, R = any> {
   /**
    * Use for checking if the action is equal to another one, if so,
    * dispatch will respect {@link conflictPolicy} strategy.
-   *
-   * If set this option, conflictPolicy's default value is 'first'.
-   * This option is required for {@link import('amos-react').useQuery}.
    */
   conflictKey?: CacheOptions<A>;
 }
@@ -71,8 +68,7 @@ export function action<A extends any[], R>(
   actor: Actor<A, R>,
   options: Partial<ActionOptions<A, R>> = {},
 ): ActionFactory<A, R> {
-  const finalOptions = { type: '', ...options } as ActionOptions;
-  finalOptions.conflictPolicy ??= options.conflictKey ? 'leading' : 'always';
+  const finalOptions = { type: '', conflictPolicy: 'always', ...options } as ActionOptions;
   return enhanceAction.apply([actor, finalOptions], (actor, options) => {
     const factory = createAmosObject<ActionFactory>(
       'action_factory',
@@ -99,15 +95,15 @@ export interface SelectableActionOptions<A extends any[] = any, S = any> {
    * Use for {@link import('amos-react').useQuery} derive the state even if
    * the action is running.
    */
-  selector: SelectorFactory<A, S>;
+  selector: SelectorFactory<A, S> | Box<S>;
 }
 
 export interface SelectableAction<A extends any[] = any, R = any, S = any>
   extends Action<A, R>,
     SelectableActionOptions<A, S> {}
 
 export interface ActionFactoryStatic<A extends any[] = any, R = any> {
-  select<S>(selector: SelectorFactory<A, S>): SelectableActionFactory<A, R, S>;
+  select<S>(selector: SelectorFactory<A, S> | Box<S>): SelectableActionFactory<A, R, S>;
 }
 
 export interface SelectableActionFactory<A extends any[] = any, R = any, S = any>

packages/amos-core/src/action.ts

@@ -67,7 +67,7 @@ export const withCache: () => StoreEnhancer = () => {
         stack.push([]);
         try {
           let v = select(s);
-          if (cache && isSelectValueEqual(s, cache[1], v)) {
+          if (cache && s.equal(cache[1], v)) {
             v = cache[1];
           }
           parent?.push([s, v]);

packages/amos-core/src/enhancers/withCache.ts

@@ -20,6 +20,7 @@ const leadingFn = jest.fn(async (dispatch: Dispatch, select: Select, id: number)
 });
 
 const leadingAsync = action(leadingFn, {
+  conflictPolicy: 'leading',
   conflictKey: [countBox],
 });
 

packages/amos-core/src/enhancers/withConcurrent.spec.ts

@@ -3,8 +3,86 @@
  * @author junbao <[email protected]>
  */
 
+import { act } from '@testing-library/react';
+import { action, type Dispatch, type Select } from 'amos-core';
+import { countBox, expectCalled, sleep } from 'amos-testing';
+import { clone } from 'amos-utils';
+import { QueryResult, useQuery } from './useQuery';
+import { renderDynamicHook } from './useSelector.spec';
+
+const fn = async (dispatch: Dispatch, select: Select, multiply: number) => {
+  dispatch(countBox.multiply(multiply));
+  await sleep(10);
+  dispatch(countBox.multiply(multiply));
+  return multiply;
+};
+
+const simpleFn = jest.fn(fn);
+const simple = action(simpleFn);
+
+const stateFn = jest.fn(fn);
+const state = action(stateFn).select(countBox);
+
 describe('useQuery', () => {
-  it('should useQuery', () => {
+  it('should useQuery', async () => {
+    const a1 = simple(1);
+    const { result, mockFn, rerender } = renderDynamicHook(
+      ({ multiply }) => useQuery(simple(multiply)),
+      { count: 1 },
+      { multiply: 1 },
+    );
+    expectCalled(mockFn, 1);
+    expect(result.current).toEqual([
+      void 0,
+      clone(new QueryResult(), {
+        id: a1.id,
+        _nextId: void 0,
+        status: 'pending',
+        promise: expect.any(Promise),
+        value: void 0,
+        error: void 0,
+      }),
+    ]);
+    await act(async () => {
+      await result.current[1].promise;
+      await sleep(1);
+    });
+    expectCalled(mockFn, 1);
+    expectCalled(simpleFn, 1);
+    rerender({ multiply: 1 });
+    expectCalled(mockFn, 1);
+    expect(result.current[0]).toBe(1);
+    expectCalled(simpleFn, 0);
+  });
 
+  it('should useQuery with selector', async () => {
+    const a1 = state(1);
+    const { result, mockFn, rerender } = renderDynamicHook(
+      ({ multiply }) => useQuery(state(multiply)),
+      { count: 1 },
+      { multiply: 2 },
+    );
+    expectCalled(mockFn, 1);
+    expect(result.current).toEqual([
+      1,
+      clone(new QueryResult(), {
+        id: a1.id,
+        _nextId: void 0,
+        status: 'pending',
+        promise: expect.any(Promise),
+        value: void 0,
+        error: void 0,
+      }),
+    ]);
+    await act(async () => {
+      await result.current[1].promise;
+      await sleep(1);
+    });
+    expectCalled(mockFn, 1);
+    expectCalled(stateFn, 1);
+    rerender({ multiply: 1 });
+    expectCalled(mockFn, 1);
+    expect(result.current[0]).toBe(4);
+    expectCalled(stateFn, 0);
   });
 });

packages/amos-react/src/useQuery.spec.ts

@@ -3,7 +3,7 @@
  * @author junbao <[email protected]>
  */
 
-import { Action, box, SelectableAction } from 'amos';
+import { action, Action, type Box, box, isAmosObject, SelectableAction, selector } from 'amos';
 import { resolveCacheKey } from 'amos-core';
 import {
   clone,
@@ -14,36 +14,36 @@ import {
   type WellPartial,
 } from 'amos-utils';
 import { useEffect } from 'react';
+import { useDispatch } from './context';
 import { useSelector } from './useSelector';
 
-export interface QueryResultJSON<R> extends Pick<QueryResult<R>, 'status' | 'value' | 'error'> {}
+export interface QueryResultJSON<R> extends Pick<QueryResult<R>, 'status' | 'value'> {}
 
 export class QueryResult<R> implements JSONSerializable<QueryResultJSON<R>> {
   /** @internal */
   id: string | undefined;
-  status: 'pending' | 'fulfilled' | 'rejected' = 'pending';
+  /** @internal */
+  _nextId: string | undefined;
+  status: 'initial' | 'pending' | 'fulfilled' | 'rejected' = 'initial';
   promise: Defer<void> = defer();
-  value: Awaited<R> | undefined;
-  error: any;
+  value: Awaited<R> | undefined = void 0;
+  error: any = void 0;
 
   toJSON(): QueryResultJSON<R> {
     return {
       status: this.status,
       value: this.value,
-      error: this.error,
     };
   }
 
   fromJS(state: JSONState<QueryResultJSON<R>>): this {
-    return clone(this, {
+    const p = defer<void>();
+    const r = clone(this, {
       ...state,
-      promise:
-        state.status === 'pending'
-          ? defer()
-          : state.status === 'rejected'
-            ? Promise.reject(state.error)
-            : Promise.resolve(state.value),
+      promise: p,
     } as WellPartial<this>);
+    r.isRejected() ? p.reject(new Error('Server error')) : r.isFulfilled() ? p.resolve() : void 0;
+    return r;
   }
 
   isPending() {
@@ -80,8 +80,12 @@ export class QueryResultMap
   getItem(key: string, id: string): QueryResult<any> {
     let item = this.get(key);
     if (item) {
-      if (!item.id) {
-        item.id = id;
+      if (item.id === void 0) {
+        if (item._nextId === void 0) {
+          item._nextId = id;
+        } else if (item._nextId !== id) {
+          item = void 0;
+        }
       } else if (item.id !== id) {
         item = void 0;
       }
@@ -95,8 +99,21 @@ export class QueryResultMap
   }
 }
 
+// Immutable state conflicts with react suspense use.
 export const queryMapBox = box('amos.queries', () => new QueryResultMap());
 
+export const selectQuery = selector((select, key: string, id: string) => {
+  return select(queryMapBox).getItem(key, id);
+});
+
+export const updateQuery = action((dispatch, select, key: string, query: QueryResult<any>) => {
+  const map = select(queryMapBox);
+  if (map.get(key) === query) {
+    map.set(key, clone(query, {}));
+  }
+  dispatch(queryMapBox.setState(map));
+});
+
 export interface UseQuery {
   <A extends any[] = any, R = any, S = any>(
     action: SelectableAction<A, R, S>,
@@ -115,11 +132,38 @@ export interface UseQuery {
  */
 export const useQuery: UseQuery = (action: Action | SelectableAction): [any, QueryResult<any>] => {
   const select = useSelector();
+  const dispatch = useDispatch();
   const key = resolveCacheKey(select, action, action.conflictKey);
-  const result = select(queryMapBox).getItem(key, action.id);
-  useEffect(() => {}, [key]);
+  const result = select(selectQuery(key, action.id));
+  const shouldDispatch = result.status !== 'pending' && result.id !== void 0;
+  if (shouldDispatch) {
+    result.status = 'pending';
+  }
+  useEffect(() => {
+    if (shouldDispatch) {
+      (async () => {
+        try {
+          result.value = await dispatch(action);
+          result.status = 'fulfilled';
+          result.promise.resolve();
+        } catch (e) {
+          result.error = e;
+          result.status = 'rejected';
+          result.promise.reject(e);
+        }
+        dispatch(updateQuery(key, result));
+      })();
+    }
+  }, [key, shouldDispatch]);
   if ('selector' in action) {
-    return [select(action.selector(...action.args)), result];
+    return [
+      select(
+        isAmosObject<Box>(action.selector, 'box')
+          ? action.selector
+          : action.selector(...action.args),
+      ),
+      result,
+    ];
   } else {
     return [result.value, result];
   }

packages/amos-react/src/useQuery.ts

@@ -22,7 +22,7 @@ import { arrayEqual } from 'amos-utils';
 import { Provider } from './context';
 import { useSelector } from './useSelector';
 
-function renderDynamicHook<P, T>(
+export function renderDynamicHook<P, T>(
   fn: (props: P) => T,
   preloadedState?: Snapshot,
   initialProps?: P,