@astral/mobx-query 1.18.3 → 1.19.0

package/AuxiliaryQuery/AuxiliaryQuery.d.ts

@@ -31,22 +31,17 @@ export declare class AuxiliaryQuery<TResult, TError = void> {
      * для устранения гонки запросов
      */
     getUnifiedPromise: (executor: Executor<TResult>, onSuccess?: (data: TResult) => void) => Promise<TResult>;
-    private setSuccess;
     private checkBackgroundAndSet;
     /**
      * Обработчик успешного ответа
      */
     submitSuccess: () => void;
-    private setError;
-    /**
-     * Обработчик ошибки
-     */
-    submitError: (error: TError) => void;
-    private setLoading;
+    private submitError;
     /**
      * Метод, вызываемый в самом начале запроса, чтобы сбросить флаги в соответствующее значение
      */
     startLoading: () => void;
+    private endLoading;
     /**
      * Метод для инвалидации данных
      */

package/AuxiliaryQuery/AuxiliaryQuery.js

@@ -38,19 +38,10 @@ export class AuxiliaryQuery {
                     });
                     throw e;
                 })
-                    .finally(() => {
-                    this.unifiedPromise = undefined;
-                    runInAction(() => {
-                        this.statusStorage.isLoading = false;
-                    });
-                });
+                    .finally(this.endLoading);
             }
             return this.unifiedPromise;
         };
-        this.setSuccess = (storage) => {
-            storage.isError = false;
-            storage.isSuccess = true;
-        };
         this.checkBackgroundAndSet = (setStorage) => {
             if (this.backgroundStatusStorage && this.statusStorage.isSuccess) {
                 setStorage(this.backgroundStatusStorage);
@@ -63,32 +54,27 @@ export class AuxiliaryQuery {
          * Обработчик успешного ответа
          */
         this.submitSuccess = () => {
-            this.checkBackgroundAndSet(this.setSuccess);
+            this.checkBackgroundAndSet((storage) => storage.setSuccess());
             this.isInvalid = false;
         };
-        this.setError = (storage, error) => {
-            storage.isSuccess = false;
-            storage.isError = true;
-            storage.error = error;
-        };
-        /**
-         * Обработчик ошибки
-         */
         this.submitError = (error) => {
-            this.checkBackgroundAndSet((storage) => this.setError(storage, error));
+            this.checkBackgroundAndSet((storage) => storage.setError(error));
             this.isInvalid = false;
         };
-        this.setLoading = (storage) => {
-            storage.isLoading = true;
-            storage.isError = false;
-            storage.isSuccess = false;
-        };
         /**
          * Метод, вызываемый в самом начале запроса, чтобы сбросить флаги в соответствующее значение
          */
         this.startLoading = () => {
             this.isIdle = false;
-            this.checkBackgroundAndSet(this.setLoading);
+            this.checkBackgroundAndSet((storage) => storage.setStartLoading());
+        };
+        this.endLoading = () => {
+            var _a;
+            this.unifiedPromise = undefined;
+            this.statusStorage.setEndLoading();
+            if (this.statusStorage.isSuccess) {
+                (_a = this.backgroundStatusStorage) === null || _a === void 0 ? void 0 : _a.setEndLoading();
+            }
         };
         /**
          * Метод для инвалидации данных
@@ -101,12 +87,10 @@ export class AuxiliaryQuery {
             isIdle: observable,
             isInvalid: observable,
             submitSuccess: action,
-            setSuccess: action,
-            setError: action,
-            setLoading: action,
             submitError: action,
             startLoading: action,
             invalidate: action,
+            endLoading: action,
         });
     }
 }

package/InfiniteQuery/InfiniteQuery.d.ts

@@ -1,23 +1,61 @@
 import { AuxiliaryQuery } from '../AuxiliaryQuery';
 import { type DataStorage } from '../DataStorage';
 import { QueryContainer } from '../QueryContainer';
-import { type StatusStorage } from '../StatusStorage';
+import { StatusStorage } from '../StatusStorage';
 import { type FetchPolicy, type QueryBaseActions, type Sync, type SyncParams } from '../types';
 export declare const DEFAULT_INFINITE_ITEMS_COUNT = 30;
-export type InfiniteParams = {
+export type FetchMoreDirection = 'forward' | 'backward';
+export type InfiniteFetchMoreOptions<TResult> = {
+    /**
+     * Направление для дозапроса данных
+     * @default 'forward'
+     */
+    direction?: FetchMoreDirection;
+    /**
+     * Колбэк, вызываемый при успешном запросе, подразумевается использование, для запоминания последней успешной позиции
+     */
+    onSuccess?: (params: {
+        offset: number;
+        cursor: TResult;
+    }) => void;
+};
+export type InfiniteParams<TResult> = {
+    /**
+     * Смещение, от которого требуется сделать запрос
+     * @default 0
+     */
     offset: number;
+    /**
+     * Количество запрашиваемых элементов
+     * @default 30
+     */
     count: number;
+    /**
+     * Элемент использующийся в качестве точки отсчета при курсорной пагинации.
+     * При движении вперед (direction: 'forward') это последний элемент текущего набора данных
+     * При движении назад (direction: 'backward') это первый элемент текущего набора данных.
+     * Передается в двух случаях:
+     * - при использовании fetchMore.
+     * - при самом первом запросе, если указан initialCursor.
+     * Во всех остальных запросах, включая первый запрос без initialCursor и повторный запрос после invalidate(), cursor будет undefined.
+     */
+    cursor?: Partial<TResult>;
+    /**
+     * Направление запроса, присутствует только при использовании fetchMore
+     */
+    direction?: FetchMoreDirection;
 };
 export type InfiniteDataStorage<TResult> = DataStorage<{
     data: TResult[];
     offset: number;
     isEndReached: boolean;
+    isStartReached: boolean;
 }>;
 /**
  * Исполнитель запроса, ожидается,
  * что будет использоваться что-то возвращающее массив данных
  */
-export type InfiniteExecutor<TResult> = (params: InfiniteParams) => Promise<TResult[]>;
+export type InfiniteExecutor<TResult> = (params: InfiniteParams<TResult>) => Promise<TResult[]>;
 export type InfiniteQueryParams<TResult, TError, TIsBackground extends boolean = false> = {
     /**
      * Количество запрашиваемых элементов
@@ -54,6 +92,15 @@ export type InfiniteQueryParams<TResult, TError, TIsBackground extends boolean =
      * Колбэк, вызываемый при успешном завершении запроса, подразумевается использование, для подтверждения валидности данных, чтобы квери не был удален из памяти
      */
     submitValidity?: () => void;
+    /**
+     * Стартовое значение offset, от которого требуется сделать самый первый запрос.
+     * @default 0
+     */
+    initialOffset?: number;
+    /**
+     * Стартовый элемент, от которого требуется сделать самый первый запрос
+     */
+    initialCursor?: Partial<TResult>;
 };
 /**
  * Квери для работы с инфинити запросами,
@@ -85,7 +132,20 @@ export declare class InfiniteQuery<TResult, TError = void, TIsBackground extends
      * Колбэк, вызываемый при успешном завершении запроса, подразумевается использование, для подтверждения валидности данных, чтобы квери не был удален из памяти
      */
     private readonly submitValidity?;
-    constructor(executor: InfiniteExecutor<TResult>, { incrementCount, onError, enabledAutoFetch, fetchPolicy, dataStorage, statusStorage, backgroundStatusStorage, submitValidity, }: InfiniteQueryParams<TResult, TError, TIsBackground>);
+    /**
+     * Хранилище статусов для процесса дозапроса данных
+     */
+    private fetchMoreStatusStorage;
+    /**
+     * Стартовый offset для запроса,
+     */
+    private initialOffset;
+    /**
+     * Стартовое значение курсора, от которого должен произойти первый запрос.
+     * Предполагается, что этот элемент должен содержать только id сущности.
+     */
+    private initialCursor?;
+    constructor(executor: InfiniteExecutor<TResult>, { incrementCount, initialOffset, initialCursor, onError, enabledAutoFetch, fetchPolicy, dataStorage, statusStorage, backgroundStatusStorage, submitValidity, }: InfiniteQueryParams<TResult, TError, TIsBackground>);
     private get isNetworkOnly();
     /**
      * Счетчик отступа для инфинити запроса
@@ -99,7 +159,11 @@ export declare class InfiniteQuery<TResult, TError = void, TIsBackground extends
      * Флаг того, что мы достигли предела запрашиваемых элементов
      */
     get isEndReached(): boolean;
-    private calcIsEndReachedByResult;
+    /**
+     * Флаг того, что мы достигли самого начала запрашиваемых элементов
+     */
+    get isStartReached(): boolean;
+    private calcIsLimitReachedByResult;
     /**
      * Форс метод для установки данных
      */
@@ -107,15 +171,18 @@ export declare class InfiniteQuery<TResult, TError = void, TIsBackground extends
     /**
      * Метод для обогащения параметров текущими значениями для инфинити
      */
-    private get infiniteExecutor();
+    private makeInfiniteExecutor;
     /**
      * Метод для инвалидации данных
      */
     invalidate: () => void;
+    private setOffset;
+    get fetchMoreStatus(): import("../StatusStorage").Statuses<TError>;
     /**
      * Метод для запроса следующего набора данных
+     * @param options - параметры дозапроса данных
      */
-    fetchMore: () => void;
+    fetchMore: (options?: InfiniteFetchMoreOptions<TResult>) => void;
     /**
      * Синхронный метод получения данных
      */

package/InfiniteQuery/InfiniteQuery.js

@@ -1,28 +1,47 @@
 import { action, computed, makeObservable, when } from 'mobx';
 import { AuxiliaryQuery } from '../AuxiliaryQuery';
 import { QueryContainer } from '../QueryContainer';
+import { StatusStorage } from '../StatusStorage';
 export const DEFAULT_INFINITE_ITEMS_COUNT = 30;
 /**
  * Квери для работы с инфинити запросами,
  * которые должны быть закешированы,
  */
 export class InfiniteQuery extends QueryContainer {
-    constructor(executor, { incrementCount = DEFAULT_INFINITE_ITEMS_COUNT, onError, enabledAutoFetch, fetchPolicy, dataStorage, statusStorage, backgroundStatusStorage = null, submitValidity, }) {
+    constructor(executor, { incrementCount = DEFAULT_INFINITE_ITEMS_COUNT, initialOffset = 0, initialCursor, onError, enabledAutoFetch, fetchPolicy, dataStorage, statusStorage, backgroundStatusStorage = null, submitValidity, }) {
         super(statusStorage, backgroundStatusStorage, new AuxiliaryQuery(statusStorage, backgroundStatusStorage));
         this.executor = executor;
+        /**
+         * Хранилище статусов для процесса дозапроса данных
+         */
+        this.fetchMoreStatusStorage = new StatusStorage();
+        /**
+         * Стартовый offset для запроса,
+         */
+        this.initialOffset = 0;
+        /**
+         * Стартовое значение курсора, от которого должен произойти первый запрос.
+         * Предполагается, что этот элемент должен содержать только id сущности.
+         */
+        this.initialCursor = undefined;
         /**
          * Обработчик успешного запроса, проверяет что мы достигли предела
          */
-        this.submitSuccess = (result, isEndReached) => {
+        this.submitSuccess = (result, isLimitReached, isBackward) => {
             var _a;
             this.storage.setData((current) => ({
                 offset: current === null || current === void 0 ? void 0 : current.offset,
                 data: result,
-                isEndReached,
+                isEndReached: isBackward
+                    ? Boolean(current === null || current === void 0 ? void 0 : current.isEndReached)
+                    : isLimitReached,
+                isStartReached: isBackward
+                    ? isLimitReached
+                    : Boolean(current === null || current === void 0 ? void 0 : current.isStartReached),
             }));
             (_a = this.submitValidity) === null || _a === void 0 ? void 0 : _a.call(this);
         };
-        this.calcIsEndReachedByResult = (result) => {
+        this.calcIsLimitReachedByResult = (result) => {
             // убеждаемся что результат запроса действительно массив,
             // и если количество элементов в ответе меньше,
             // чем запрашивалось, значит у бэка их больше нет,
@@ -47,34 +66,72 @@ export class InfiniteQuery extends QueryContainer {
                 this.submitSuccess(param, this.isEndReached);
             }
         };
+        /**
+         * Метод для обогащения параметров текущими значениями для инфинити
+         */
+        this.makeInfiniteExecutor = (offset, cursor, direction) => () => this.executor({
+            offset,
+            count: this.incrementCount,
+            cursor,
+            direction,
+        });
         /**
          * Метод для инвалидации данных
          */
         this.invalidate = () => {
             this.auxiliary.invalidate();
         };
+        this.setOffset = (offset) => {
+            this.storage.setData((current) => ({
+                offset,
+                data: current === null || current === void 0 ? void 0 : current.data,
+                isEndReached: Boolean(current === null || current === void 0 ? void 0 : current.isEndReached),
+                isStartReached: Boolean(current === null || current === void 0 ? void 0 : current.isStartReached),
+            }));
+        };
         /**
          * Метод для запроса следующего набора данных
+         * @param options - параметры дозапроса данных
          */
-        this.fetchMore = () => {
+        this.fetchMore = (options) => {
+            var _a, _b;
+            const { direction = 'forward', onSuccess } = options !== null && options !== void 0 ? options : {};
+            const isBackward = direction === 'backward';
+            const isLimitReached = isBackward ? this.isStartReached : this.isEndReached;
             // если мы еще не достигли предела
-            if (!this.isEndReached && this.storage.data) {
-                // прибавляем к офсету число запрашиваемых элементов
-                this.storage.setData((current) => {
-                    var _a;
-                    return ({
-                        offset: ((_a = current === null || current === void 0 ? void 0 : current.offset) !== null && _a !== void 0 ? _a : 0) + this.incrementCount,
-                        data: current === null || current === void 0 ? void 0 : current.data,
-                        isEndReached: Boolean(current === null || current === void 0 ? void 0 : current.isEndReached),
-                    });
-                });
+            if (!isLimitReached && this.storage.data) {
+                this.fetchMoreStatusStorage.setStartLoading();
+                const offsetBeforeExecute = this.offset;
+                const increment = (isBackward ? -1 : 1) * this.incrementCount;
+                const cursor = isBackward
+                    ? (_a = this.data) === null || _a === void 0 ? void 0 : _a[0]
+                    : (_b = this.data) === null || _b === void 0 ? void 0 : _b[this.data.length - 1];
+                // прибавляем к offset число запрашиваемых элементов
+                const requestedOffset = Math.max(offsetBeforeExecute + increment, 0);
+                this.setOffset(requestedOffset);
                 // запускаем запрос с последними параметрами, и флагом необходимости инкремента
                 this.auxiliary
-                    .getUnifiedPromise(this.infiniteExecutor, (resData) => {
+                    .getUnifiedPromise(this.makeInfiniteExecutor(requestedOffset, cursor, direction), (resData) => {
+                    var _a;
+                    this.fetchMoreStatusStorage.setSuccess();
+                    const currentData = (_a = this.storage.data) === null || _a === void 0 ? void 0 : _a.data;
+                    const result = isBackward
+                        ? [...resData, ...currentData]
+                        : [...currentData, ...resData];
+                    this.submitSuccess(result, this.calcIsLimitReachedByResult(resData), isBackward);
+                    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({
+                        offset: requestedOffset,
+                        cursor: cursor,
+                    });
+                })
+                    .catch((e) => {
                     var _a;
-                    this.submitSuccess([...(_a = this.storage.data) === null || _a === void 0 ? void 0 : _a.data, ...resData], this.calcIsEndReachedByResult(resData));
+                    this.fetchMoreStatusStorage.setError(e);
+                    // в случае ошибки, откатываем значение offset к состоянию до дозапроса
+                    this.setOffset(offsetBeforeExecute);
+                    return (_a = this.defaultOnError) === null || _a === void 0 ? void 0 : _a.call(this, e);
                 })
-                    .catch((e) => { var _a; return (_a = this.defaultOnError) === null || _a === void 0 ? void 0 : _a.call(this, e); });
+                    .finally(this.fetchMoreStatusStorage.setEndLoading);
             }
         };
         /**
@@ -96,14 +153,15 @@ export class InfiniteQuery extends QueryContainer {
          */
         this.proceedSync = ({ onSuccess, onError, } = {}) => {
             this.storage.setData((current) => ({
-                offset: 0,
+                offset: (this.isIdle && this.initialOffset) || 0,
                 data: current === null || current === void 0 ? void 0 : current.data,
                 isEndReached: false,
+                isStartReached: false,
             }));
             this.auxiliary
-                .getUnifiedPromise(this.infiniteExecutor, (resData) => {
+                .getUnifiedPromise(this.makeInfiniteExecutor(this.offset, this.isIdle ? this.initialCursor : undefined), (resData) => {
                 onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(resData);
-                this.submitSuccess(resData, this.calcIsEndReachedByResult(resData));
+                this.submitSuccess(resData, this.calcIsLimitReachedByResult(resData));
             })
                 .catch((e) => {
                 var _a;
@@ -130,12 +188,15 @@ export class InfiniteQuery extends QueryContainer {
                 return Promise.resolve((_a = this.storage.data) === null || _a === void 0 ? void 0 : _a.data);
             }
             this.storage.setData((current) => ({
-                offset: 0,
+                offset: (this.isIdle && this.initialOffset) || 0,
                 data: current === null || current === void 0 ? void 0 : current.data,
                 isEndReached: false,
+                isStartReached: false,
             }));
-            return this.auxiliary.getUnifiedPromise(this.infiniteExecutor, (data) => this.submitSuccess(data, this.calcIsEndReachedByResult(data)));
+            return this.auxiliary.getUnifiedPromise(this.makeInfiniteExecutor(this.offset, this.isIdle ? this.initialCursor : undefined), (data) => this.submitSuccess(data, this.calcIsLimitReachedByResult(data)));
         };
+        this.initialOffset = initialOffset;
+        this.initialCursor = initialCursor;
         this.storage = dataStorage;
         this.incrementCount = incrementCount;
         this.defaultOnError = onError;
@@ -143,15 +204,16 @@ export class InfiniteQuery extends QueryContainer {
         this.defaultFetchPolicy = fetchPolicy;
         this.submitValidity = submitValidity;
         makeObservable(this, {
+            fetchMoreStatus: computed,
             data: computed,
             computedData: computed,
-            infiniteExecutor: computed,
             forceUpdate: action,
             async: action,
             sync: action,
             fetchMore: action,
             submitSuccess: action,
             isEndReached: computed,
+            isStartReached: computed,
         });
     }
     get isNetworkOnly() {
@@ -172,13 +234,14 @@ export class InfiniteQuery extends QueryContainer {
         return Boolean((_a = this.storage.data) === null || _a === void 0 ? void 0 : _a.isEndReached);
     }
     /**
-     * Метод для обогащения параметров текущими значениями для инфинити
+     * Флаг того, что мы достигли самого начала запрашиваемых элементов
      */
-    get infiniteExecutor() {
-        return () => this.executor({
-            offset: this.offset,
-            count: this.incrementCount,
-        });
+    get isStartReached() {
+        var _a;
+        return Boolean((_a = this.storage.data) === null || _a === void 0 ? void 0 : _a.isStartReached);
+    }
+    get fetchMoreStatus() {
+        return this.fetchMoreStatusStorage.statuses;
     }
     get computedData() {
         var _a;

package/MobxQuery/MobxQuery.js

@@ -108,8 +108,9 @@ export class MobxQuery {
          */
         this.getCachedQuery = (key, createInstance, type, createParams) => {
             var _a, _b;
+            const enabledAutoFetch = (_a = createParams === null || createParams === void 0 ? void 0 : createParams.enabledAutoFetch) !== null && _a !== void 0 ? _a : this.defaultEnabledAutoFetch;
             const fetchPolicy = (createParams === null || createParams === void 0 ? void 0 : createParams.fetchPolicy) || this.defaultFetchPolicy;
-            const keys = this.makeKeys(key, fetchPolicy, (_a = createParams === null || createParams === void 0 ? void 0 : createParams.isBackground) !== null && _a !== void 0 ? _a : false, type);
+            const keys = this.makeKeys(key, fetchPolicy, (_b = createParams === null || createParams === void 0 ? void 0 : createParams.isBackground) !== null && _b !== void 0 ? _b : false, type, enabledAutoFetch);
             const cachedQuery = this.queriesMap.get(keys.queryKeyHash);
             if (cachedQuery) {
                 return cachedQuery;
@@ -117,7 +118,7 @@ export class MobxQuery {
             const query = createInstance({
                 onError: ((createParams === null || createParams === void 0 ? void 0 : createParams.onError) ||
                     this.defaultErrorHandler),
-                enabledAutoFetch: (_b = createParams === null || createParams === void 0 ? void 0 : createParams.enabledAutoFetch) !== null && _b !== void 0 ? _b : this.defaultEnabledAutoFetch,
+                enabledAutoFetch,
                 fetchPolicy,
                 dataStorage: this.queryDataStorageFactory.getStorage(keys.dataKeyHash),
                 statusStorage: this.statusStorageFactory.getStorage(keys.statusKeyHash),
@@ -134,7 +135,7 @@ export class MobxQuery {
         /**
          * Метод для создания ключей к внутренним хранилищам
          */
-        this.makeKeys = (rootKey, fetchPolicy, isBackground, type) => {
+        this.makeKeys = (rootKey, fetchPolicy, isBackground, type, enabledAutoFetch) => {
             // C введением StrictMode в реакт 18, проявилась проблема,
             // что network-only квери, созданные в одном реакт компоненте,
             // создаются дважды (т.к. все хуки вызываются дважды)
@@ -148,7 +149,10 @@ export class MobxQuery {
             // Этот кейс крайне маловероятен, и будет проявляться только в дев режиме с включенным StrictMode,
             // поэтому мы пренебрегаем решением этой проблемы, в угоду упрощения.
             const date = fetchPolicy === 'network-only' ? new Date().setMilliseconds(0) : null;
-            const queryKey = [...rootKey, { fetchPolicy, date, isBackground, type }];
+            const queryKey = [
+                ...rootKey,
+                { fetchPolicy, date, isBackground, type, enabledAutoFetch },
+            ];
             const queryKeyHash = this.serialize(queryKey);
             const dataKeyHash = this.serialize([...rootKey, { type }]);
             const statusKeyHash = this.serialize([...rootKey, { type, date }]);