@decathlon/moon - npm Package Compare versions

Comparing version 3.0.3 to 4.0.0-beta-1

dist/hooks.d.ts

@@ -1,4 +0,3 @@
-import { QueryCache } from "react-query";
-import { QueryState } from "react-query/types/core/query";
-import { RquiredMoonContextValue } from "./moon-provider";
+import { Query, QueryState } from "react-query/types/core/query";
+import { RquiredMoonContextValue } from "./moonProvider";
 export interface QueriesStates {
@@ -13,6 +12,8 @@ [queryId: string]: QueryState<unknown, unknown> | undefined;
 }
-export declare function getAdaptedQueryState<Data>(store: QueryCache, queryId: string): QueryState<Data, unknown> | undefined;
-export declare function useQueryResult<Data = any, Props = ResultProps>(queryId: string, resultToProps?: (state?: Data) => Props): Data | Props | undefined;
-export declare function useQueriesResults<Data = any, Props = ResultProps>(queriesIds: string[], resultsToProps?: (results: QueriesResults<Data>) => Props): QueriesResults<Data> | Props;
-export declare function useQueryState<Data = any, Props = ResultProps>(queryId: string, stateToProps?: (state: QueryState<Data, unknown>) => Props): QueryState<Data, unknown> | Props | undefined;
+export declare function getAdaptedQueryState<Data>(query?: Query<Data>): QueryState<Data, unknown> | undefined;
+export declare function useQueryObserver<State = any, Data = any>(queryId: string, getState: (query?: Query<Data>) => State | undefined, isInfinite?: boolean): State | undefined;
+export declare function useQueriesObserver<State = any>(queriesIds: string[], getState: (query?: Query) => State | undefined): QueriesResults;
+export declare function useQueryResult<Data = any, Props = ResultProps>(queryId: string, resultToProps?: (state?: Data) => Props, isInfinite?: boolean): Data | Props | undefined;
+export declare function useQueriesResults<Props = ResultProps>(queriesIds: string[], resultsToProps?: (results: QueriesResults) => Props): QueriesResults | Props;
+export declare function useQueryState<Data = any, Props = ResultProps>(queryId: string, stateToProps?: (state?: QueryState<Data, unknown>) => Props, isInfinite?: boolean): QueryState<Data, unknown> | Props | undefined;
 export declare function useQueriesStates<Props = ResultProps>(queriesIds: string[], statesToProps?: (states: QueriesStates) => Props): QueriesStates | Props;
@@ -24,1 +25,2 @@ export declare function usePrevValue<Value = any>(value: Value): {
 export declare function useMoon(): RquiredMoonContextValue;
+export declare function useIsMounted(): () => boolean;

dist/index.d.ts

@@ -1,14 +0,18 @@
-export { default as MoonClient } from "./moon-client";
-export * from "./moon-client";
-export { default as MoonProvider } from "./moon-provider";
-export * from "./moon-provider";
+export { default as MoonClient } from "./moonClient";
+export * from "./moonClient";
+export { default as MoonProvider } from "./moonProvider";
+export * from "./moonProvider";
 export { default as Query } from "./query";
 export * from "./query";
-export { default as useQuery } from "./query-hook";
-export * from "./query-hook";
+export { default as useQuery } from "./useQuery";
+export * from "./useQuery";
 export { default as Mutation } from "./mutation";
 export * from "./mutation";
-export { default as useMutation } from "./mutation-hook";
-export * from "./mutation-hook";
+export { default as useMutation } from "./useMutation";
+export * from "./useMutation";
+export { default as InfiniteQuery } from "./infiniteQuery";
+export * from "./infiniteQuery";
+export { default as useInfiniteQuery } from "./useInfiniteQuery";
+export * from "./useInfiniteQuery";
 export * from "./utils";
 export * from "./hooks";

dist/index.es.js

@@ -1,3 +0,3 @@
-import { QueryCache, ReactQueryCacheProvider, ReactQueryConfigProvider, useQuery as useQuery$1, useMutation as useMutation$1 } from 'react-query';
-import { createContext, createElement, forwardRef, Component, useState, useCallback, useEffect, useRef, useContext, useMemo } from 'react';
+import { QueryCache, MutationCache, QueryClient, QueryClientProvider, hashQueryKey, InfiniteQueryObserver, QueryObserver, QueriesObserver, useQuery as useQuery$1, useMutation as useMutation$1, useInfiniteQuery as useInfiniteQuery$1 } from 'react-query';
+import { createContext, createElement, forwardRef, Component, useState, useRef, useMemo, useCallback, useEffect, useContext, useLayoutEffect } from 'react';
 import { Hydrate } from 'react-query/hydration';
@@ -58,3 +58,3 @@
 /* eslint-disable import/prefer-default-export */
-var queryCache;
+var queryClient;
 function getClients(links, clientFactory) {
@@ -72,10 +72,18 @@ return links.reduce(function (clients, link) {
     if (store) {
-        queryCache = store;
+        queryClient = store;
         return store;
     }
-    if (queryCache) {
-        return queryCache;
+    if (queryClient) {
+        return queryClient;
     }
-    queryCache = new QueryCache();
-    return queryCache;
+    var queryCache = new QueryCache();
+    var mutationCache = new MutationCache();
+    queryClient = new QueryClient({
+        queryCache: queryCache,
+        mutationCache: mutationCache,
+        defaultOptions: {
+            queries: { refetchOnWindowFocus: false }
+        }
+    });
+    return queryClient;
 }
@@ -141,8 +149,7 @@
     MoonProvider.prototype.render = function () {
-        var _a = this.props, children = _a.children, hydrate = _a.hydrate, store = _a.store, config = _a.config;
-        var queryCache = getMoonStore(store);
-        return (createElement(ReactQueryCacheProvider, { queryCache: queryCache },
-            createElement(ReactQueryConfigProvider, { config: config || {} },
-                createElement(Hydrate, __assign({}, hydrate),
-                    createElement(MoonContext.Provider, { value: { client: this.client, store: queryCache } }, children)))));
+        var _a = this.props, children = _a.children, hydrate = _a.hydrate, store = _a.store;
+        var queryClient = getMoonStore(store);
+        return (createElement(QueryClientProvider, { client: queryClient },
+            createElement(Hydrate, __assign({}, hydrate),
+                createElement(MoonContext.Provider, { value: { client: this.client, store: queryClient } }, children))));
     };
@@ -168,2 +175,3 @@ return MoonProvider;
 /* eslint-disable import/prefer-default-export */
+var isServer = typeof window === "undefined";
 var hasOwn = Object.prototype.hasOwnProperty;
@@ -246,5 +254,3 @@ var getId = function (params) {
 
-// cacheTime=0 not working
-function getAdaptedQueryState(store, queryId) {
-    var query = store.getQuery(queryId);
+function getAdaptedQueryState(query) {
     if (!query) {
@@ -259,88 +265,96 @@ return undefined;
 }
-function useQueryResult(queryId, resultToProps) {
+function useQueryObserver(queryId, getState, isInfinite) {
+    if (isInfinite === void 0) { isInfinite = false; }
     var store = useMoon().store;
-    var queryState = getAdaptedQueryState(store, queryId);
-    var queryResult = queryState === null || queryState === void 0 ? void 0 : queryState.data;
-    var _a = useState(queryResult), state = _a[0], setState = _a[1];
+    var isMounted = useIsMounted();
+    var query = store.getQueryCache().get(hashQueryKey(queryId));
+    var initialSate = getState(query);
+    var _a = useState(initialSate), state = _a[0], setState = _a[1];
+    var observerRef = useRef();
+    var defaultOptions = useMemo(function () { return store.defaultQueryObserverOptions({ queryKey: queryId, enabled: false }); }, [queryId]);
+    var createObserver = useCallback(function () {
+        return isInfinite ? new InfiniteQueryObserver(store, defaultOptions) : new QueryObserver(store, defaultOptions);
+    }, [isInfinite, store, defaultOptions]);
+    var observer = observerRef.current || createObserver();
+    observerRef.current = observer;
+    if (observer.hasListeners()) {
+        observer.setOptions(defaultOptions);
+    }
     var listener = useCallback(function () {
-        var queryState = getAdaptedQueryState(store, queryId);
-        var queryData = queryState === null || queryState === void 0 ? void 0 : queryState.data;
-        if (!equal(state || null, queryData || null)) {
-            setState(queryData);
+        if (isMounted()) {
+            var queryState = getState(query);
+            if (!equal(state || null, queryState || null)) {
+                setState(queryState);
+            }
         }
     }, [queryId]);
-    var unsubscribe = store.watchQuery(queryId).subscribe(listener);
     useEffect(function () {
-        return unsubscribe;
+        return observer.subscribe(listener);
     }, [queryId]);
-    return resultToProps ? resultToProps(state) : state;
+    return state;
 }
-function useQueriesResults(queriesIds, resultsToProps) {
+function useQueriesObserver(queriesIds, getState) {
     var currentQueriesIds = usePrevValue(queriesIds).value;
     var store = useMoon().store;
-    var readQueriesResults = function () {
+    var isMounted = useIsMounted();
+    var queriesResults = useMemo(function () {
         return currentQueriesIds.reduce(function (result, queryId) {
-            var queryState = getAdaptedQueryState(store, queryId);
-            result[queryId] = queryState === null || queryState === void 0 ? void 0 : queryState.data;
+            var query = store.getQueryCache().get(hashQueryKey(queryId));
+            result[queryId] = getState(query);
             return result;
         }, {});
-    };
-    var _a = useState(readQueriesResults()), states = _a[0], setStates = _a[1];
-    var getListener = useCallback(function (queryId) { return function () {
-        var _a;
-        var queryState = getAdaptedQueryState(store, queryId);
-        var queryData = queryState === null || queryState === void 0 ? void 0 : queryState.data;
-        if (!equal(states[queryId] || null, queryData || null)) {
-            setStates((_a = {}, _a[queryId] = queryData, _a));
-        }
-    }; }, [currentQueriesIds]);
-    var unsubscribeList = queriesIds.map(function (queryId) { return store.watchQuery(queryId).subscribe(getListener(queryId)); });
-    useEffect(function () {
-        return function () {
-            unsubscribeList.forEach(function (unsubscribe) { return unsubscribe(); });
-        };
+    }, [currentQueriesIds, store]);
+    var _a = useState(queriesResults), states = _a[0], setStates = _a[1];
+    var queries = useMemo(function () {
+        return queriesIds.map(function (queryId) { return store.defaultQueryObserverOptions({ queryKey: queryId, enabled: false }); });
     }, [currentQueriesIds]);
-    return resultsToProps ? resultsToProps(states) : states;
-}
-function useQueryState(queryId, stateToProps) {
-    var store = useMoon().store;
-    var initialSate = getAdaptedQueryState(store, queryId);
-    var _a = useState(initialSate), state = _a[0], setState = _a[1];
+    var observerRef = useRef();
+    var observer = observerRef.current || new QueriesObserver(store, queries);
+    observerRef.current = observer;
+    if (observer.hasListeners()) {
+        observer.setQueries(queries);
+    }
     var listener = useCallback(function () {
-        var newState = getAdaptedQueryState(store, queryId);
-        if (!equal(state || null, newState || null)) {
-            setState(newState);
+        if (isMounted()) {
+            queriesIds.forEach(function (queryId) {
+                var _a;
+                var query = store.getQueryCache().get(hashQueryKey(queryId));
+                var queryState = getState(query);
+                if (!equal(states[queryId] || null, queryState || null)) {
+                    setStates((_a = {}, _a[queryId] = queryState, _a));
+                }
+            });
         }
-    }, [queryId]);
-    var unsubscribe = store.watchQuery(queryId).subscribe(listener);
+    }, [currentQueriesIds]);
     useEffect(function () {
-        return unsubscribe;
-    }, [queryId]);
-    return stateToProps && state ? stateToProps(state) : state;
+        return observer.subscribe(listener);
+    }, [currentQueriesIds]);
+    return states;
 }
-function useQueriesStates(queriesIds, statesToProps) {
-    var currentQueriesIds = usePrevValue(queriesIds).value;
-    var store = useMoon().store;
-    var readQueriesStates = function () {
-        return currentQueriesIds.reduce(function (result, queryId) {
-            result[queryId] = getAdaptedQueryState(store, queryId);
-            return result;
-        }, {});
+function useQueryResult(queryId, resultToProps, isInfinite) {
+    if (isInfinite === void 0) { isInfinite = false; }
+    var getState = function (query) {
+        var queryState = getAdaptedQueryState(query);
+        return queryState === null || queryState === void 0 ? void 0 : queryState.data;
     };
-    var _a = useState(readQueriesStates()), states = _a[0], setStates = _a[1];
-    var getListener = useCallback(function (queryId) { return function () {
-        var _a;
-        var newState = getAdaptedQueryState(store, queryId);
-        if (!equal(states[queryId] || null, newState || null)) {
-            setStates((_a = {}, _a[queryId] = newState, _a));
-        }
-    }; }, [currentQueriesIds]);
-    var unsubscribeList = queriesIds.map(function (queryId) { return store.watchQuery(queryId).subscribe(getListener(queryId)); });
-    useEffect(function () {
-        return function () {
-            unsubscribeList.forEach(function (unsubscribe) { return unsubscribe(); });
-        };
-    }, [currentQueriesIds]);
-    return statesToProps ? statesToProps(states) : states;
+    var queryResult = useQueryObserver(queryId, getState, isInfinite);
+    return resultToProps ? resultToProps(queryResult) : queryResult;
 }
+function useQueriesResults(queriesIds, resultsToProps) {
+    var getState = function (query) {
+        var queryState = getAdaptedQueryState(query);
+        return queryState === null || queryState === void 0 ? void 0 : queryState.data;
+    };
+    var queriesResult = useQueriesObserver(queriesIds, getState);
+    return resultsToProps ? resultsToProps(queriesResult) : queriesResult;
+}
+function useQueryState(queryId, stateToProps, isInfinite) {
+    if (isInfinite === void 0) { isInfinite = false; }
+    var queryResult = useQueryObserver(queryId, getAdaptedQueryState, isInfinite);
+    return stateToProps ? stateToProps(queryResult) : queryResult;
+}
+function useQueriesStates(queriesIds, statesToProps) {
+    var queriesResult = useQueriesObserver(queriesIds, getAdaptedQueryState);
+    return statesToProps ? statesToProps(queriesResult) : queriesResult;
+}
 function usePrevValue(value) {
@@ -363,2 +377,14 @@ var valueRef = useRef(value);
 }
+function useIsMounted() {
+    var mountedRef = useRef(false);
+    var isMounted = useCallback(function () { return mountedRef.current; }, []);
+    var useEffect$1 = isServer ? useEffect : useLayoutEffect;
+    useEffect$1(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    return isMounted;
+}
 
@@ -381,26 +407,18 @@ var FetchPolicy;
     var isInitialMount = useRef(true);
-    var clientProps = { source: source, endPoint: endPoint, variables: variables, options: options };
+    var clientProps = { source: source, endPoint: endPoint, variables: variables };
     var queryId = getQueryId(__assign({ id: id }, clientProps));
     var _d = usePrevValue({ queryId: queryId, clientProps: clientProps }), value = _d.value, prevValue = _d.prevValue;
-    var resolvedQueryConfig = useMemo(function () { return store.getResolvedQueryConfig(queryId, queryConfig); }, [
-        store,
-        queryId,
-        queryConfig
-    ]);
     var cacheOnly = fetchPolicy === FetchPolicy.CacheFirst;
     var networkOnly = fetchPolicy === FetchPolicy.NetworkOnly;
-    var adaptedQueryConfig = useMemo(function () { return (__assign(__assign({}, queryConfig), { 
-        // to fix (react-query)
-        cacheTime: networkOnly ? 0 : queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.cacheTime, 
-        // default values to false
-        refetchOnReconnect: (queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.refetchOnReconnect) || false, refetchOnWindowFocus: (queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.refetchOnWindowFocus) || false })); }, [queryConfig, networkOnly]);
+    var queryOptions = useMemo(function () {
+        return store.defaultQueryObserverOptions(__assign(__assign({}, queryConfig), { 
+            // to fix (react-query)
+            cacheTime: networkOnly ? 0 : queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.cacheTime }));
+    }, [queryConfig, networkOnly, store]);
     if (isInitialMount.current && networkOnly) {
         // remove cache if networkOnly
-        store.setQueryData(queryId, queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.initialData, adaptedQueryConfig);
+        store.setQueryData(queryId, queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.initialData);
     }
-    function cancel() {
-        store.cancelQueries(queryId, { exact: true });
-    }
     function fetch() {
-        var cachedResult = store.getQueryData(queryId);
+        var cachedResult = store.getQueryData(queryId, { exact: true });
         return cacheOnly && cachedResult
@@ -410,6 +428,6 @@ ? cachedResult
     }
-    var queryResult = useQuery$1(queryId, fetch, adaptedQueryConfig);
-    var clear = queryResult.clear, fetchMore = queryResult.fetchMore, refetch = queryResult.refetch, remove = queryResult.remove, others = __rest(queryResult, ["clear", "fetchMore", "refetch", "remove"]);
+    var queryResult = useQuery$1(queryId, fetch, queryOptions);
+    var refetch = queryResult.refetch, remove = queryResult.remove, others = __rest(queryResult, ["refetch", "remove"]);
     useEffect(function () {
-        if (prevValue.queryId === value.queryId && !isInitialMount.current && (resolvedQueryConfig === null || resolvedQueryConfig === void 0 ? void 0 : resolvedQueryConfig.enabled)) {
+        if (prevValue.queryId === value.queryId && !isInitialMount.current && (queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled)) {
             // refetch on update and when only client options have been changed
@@ -422,7 +440,9 @@ refetch();
     }, []);
-    // cacheTime=0 not working
+    function cancel() {
+        store.cancelQueries(queryId, { exact: true });
+    }
     var data = networkOnly && others.isFetching ? undefined : others.data;
     return [
-        { clear: clear, fetchMore: fetchMore, refetch: refetch, remove: remove, cancel: cancel },
-        __assign(__assign({}, others), { data: data })
+        __assign(__assign({}, others), { data: data }),
+        { refetch: refetch, remove: remove, cancel: cancel }
     ];
@@ -435,3 +455,3 @@ }
     var children = props.children, queryProps = __rest(props, ["children"]);
-    var _a = useQuery(queryProps), actions = _a[0], state = _a[1];
+    var _a = useQuery(queryProps), state = _a[0], actions = _a[1];
     return children ? children(__assign(__assign({}, state), { actions: actions })) : null;
@@ -482,3 +502,10 @@ }
     }
-    return useMutation$1(mutation, mutationConfig);
+    var _b = useMutation$1(mutation, mutationConfig), reactQueryMutate = _b.mutate, reactQueryMutateAsync = _b.mutateAsync, reset = _b.reset, others = __rest(_b, ["mutate", "mutateAsync", "reset"]);
+    var mutate = useCallback(function () {
+        return reactQueryMutate(variables);
+    }, [variables]);
+    var mutateAsync = useCallback(function () {
+        return reactQueryMutateAsync(variables);
+    }, [variables]);
+    return [others, { mutate: mutate, mutateAsync: mutateAsync, reset: reset }];
 }
@@ -490,4 +517,4 @@
     var children = props.children, mutationProps = __rest(props, ["children"]);
-    var _a = useMutation(mutationProps), mutate = _a[0], state = _a[1];
-    return children ? children(__assign(__assign({}, state), { actions: { mutate: mutate } })) : null;
+    var _a = useMutation(mutationProps), state = _a[0], actions = _a[1];
+    return children ? children(__assign(__assign({}, state), { actions: actions })) : null;
 }
@@ -498,3 +525,40 @@ Mutation.defaultProps = {
 
-export { FetchPolicy, MoonClient, MoonContext, MoonProvider, MutateType, Mutation, Query, equal, getAdaptedQueryState, getClients, getId, getMoonStore, getQueryId, stableStringify, useMoon, useMutation, usePrevValue, useQueriesResults, useQueriesStates, useQuery, useQueryResult, useQueryState, withMoon, withQueriesResults, withQueryResult };
+function useInfiniteQuery(_a) {
+    var id = _a.id, source = _a.source, endPoint = _a.endPoint, variables = _a.variables, options = _a.options, queryConfig = _a.queryConfig;
+    var _b = useMoon(), client = _b.client, store = _b.store;
+    var isInitialMount = useRef(true);
+    var clientProps = { source: source, endPoint: endPoint, variables: variables };
+    var queryId = getQueryId(__assign({ id: id }, clientProps));
+    var _c = usePrevValue({ queryId: queryId, clientProps: clientProps }), value = _c.value, prevValue = _c.prevValue;
+    var queryOptions = useMemo(function () { return store.defaultQueryObserverOptions(queryConfig); }, [queryConfig, store]);
+    function fetch(_key, newPageProps) {
+        var queryVariables = __assign(__assign({}, variables), newPageProps);
+        return client.query(source, endPoint, queryVariables, options);
+    }
+    var queryResult = useInfiniteQuery$1(queryId, fetch, queryOptions);
+    var fetchNextPage = queryResult.fetchNextPage, fetchPreviousPage = queryResult.fetchPreviousPage, refetch = queryResult.refetch, remove = queryResult.remove, others = __rest(queryResult, ["fetchNextPage", "fetchPreviousPage", "refetch", "remove"]);
+    useEffect(function () {
+        if (prevValue.queryId === value.queryId && !isInitialMount.current && (queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled)) {
+            // refetch on update and when only client options have been changed
+            refetch();
+        }
+    }, [value.clientProps]);
+    useEffect(function () {
+        isInitialMount.current = false;
+    }, []);
+    function cancel() {
+        store.cancelQueries(queryId, { exact: true });
+    }
+    return [others, { fetchNextPage: fetchNextPage, fetchPreviousPage: fetchPreviousPage, remove: remove, refetch: refetch, cancel: cancel }];
+}
+
+function InfiniteQuery(props
+// eslint-disable-next-line no-undef
+) {
+    var children = props.children, queryProps = __rest(props, ["children"]);
+    var _a = useInfiniteQuery(queryProps), state = _a[0], actions = _a[1];
+    return children ? children(__assign(__assign({}, state), { actions: actions })) : null;
+}
+
+export { FetchPolicy, InfiniteQuery, MoonClient, MoonContext, MoonProvider, MutateType, Mutation, Query, equal, getAdaptedQueryState, getClients, getId, getMoonStore, getQueryId, isServer, stableStringify, useInfiniteQuery, useIsMounted, useMoon, useMutation, usePrevValue, useQueriesObserver, useQueriesResults, useQueriesStates, useQuery, useQueryObserver, useQueryResult, useQueryState, withMoon, withQueriesResults, withQueryResult };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -62,3 +62,3 @@ 'use strict';
 /* eslint-disable import/prefer-default-export */
-var queryCache;
+var queryClient;
 function getClients(links, clientFactory) {
@@ -76,10 +76,18 @@ return links.reduce(function (clients, link) {
     if (store) {
-        queryCache = store;
+        queryClient = store;
         return store;
     }
-    if (queryCache) {
-        return queryCache;
+    if (queryClient) {
+        return queryClient;
     }
-    queryCache = new reactQuery.QueryCache();
-    return queryCache;
+    var queryCache = new reactQuery.QueryCache();
+    var mutationCache = new reactQuery.MutationCache();
+    queryClient = new reactQuery.QueryClient({
+        queryCache: queryCache,
+        mutationCache: mutationCache,
+        defaultOptions: {
+            queries: { refetchOnWindowFocus: false }
+        }
+    });
+    return queryClient;
 }
@@ -144,8 +152,7 @@
     MoonProvider.prototype.render = function () {
-        var _a = this.props, children = _a.children, hydrate = _a.hydrate, store = _a.store, config = _a.config;
-        var queryCache = getMoonStore(store);
-        return (React.createElement(reactQuery.ReactQueryCacheProvider, { queryCache: queryCache },
-            React.createElement(reactQuery.ReactQueryConfigProvider, { config: config || {} },
-                React.createElement(hydration.Hydrate, __assign({}, hydrate),
-                    React.createElement(MoonContext.Provider, { value: { client: this.client, store: queryCache } }, children)))));
+        var _a = this.props, children = _a.children, hydrate = _a.hydrate, store = _a.store;
+        var queryClient = getMoonStore(store);
+        return (React.createElement(reactQuery.QueryClientProvider, { client: queryClient },
+            React.createElement(hydration.Hydrate, __assign({}, hydrate),
+                React.createElement(MoonContext.Provider, { value: { client: this.client, store: queryClient } }, children))));
     };
@@ -171,2 +178,3 @@ return MoonProvider;
 /* eslint-disable import/prefer-default-export */
+var isServer = typeof window === "undefined";
 var hasOwn = Object.prototype.hasOwnProperty;
@@ -249,5 +257,3 @@ var getId = function (params) {
 
-// cacheTime=0 not working
-function getAdaptedQueryState(store, queryId) {
-    var query = store.getQuery(queryId);
+function getAdaptedQueryState(query) {
     if (!query) {
@@ -262,88 +268,96 @@ return undefined;
 }
-function useQueryResult(queryId, resultToProps) {
+function useQueryObserver(queryId, getState, isInfinite) {
+    if (isInfinite === void 0) { isInfinite = false; }
     var store = useMoon().store;
-    var queryState = getAdaptedQueryState(store, queryId);
-    var queryResult = queryState === null || queryState === void 0 ? void 0 : queryState.data;
-    var _a = React.useState(queryResult), state = _a[0], setState = _a[1];
+    var isMounted = useIsMounted();
+    var query = store.getQueryCache().get(reactQuery.hashQueryKey(queryId));
+    var initialSate = getState(query);
+    var _a = React.useState(initialSate), state = _a[0], setState = _a[1];
+    var observerRef = React.useRef();
+    var defaultOptions = React.useMemo(function () { return store.defaultQueryObserverOptions({ queryKey: queryId, enabled: false }); }, [queryId]);
+    var createObserver = React.useCallback(function () {
+        return isInfinite ? new reactQuery.InfiniteQueryObserver(store, defaultOptions) : new reactQuery.QueryObserver(store, defaultOptions);
+    }, [isInfinite, store, defaultOptions]);
+    var observer = observerRef.current || createObserver();
+    observerRef.current = observer;
+    if (observer.hasListeners()) {
+        observer.setOptions(defaultOptions);
+    }
     var listener = React.useCallback(function () {
-        var queryState = getAdaptedQueryState(store, queryId);
-        var queryData = queryState === null || queryState === void 0 ? void 0 : queryState.data;
-        if (!equal(state || null, queryData || null)) {
-            setState(queryData);
+        if (isMounted()) {
+            var queryState = getState(query);
+            if (!equal(state || null, queryState || null)) {
+                setState(queryState);
+            }
         }
     }, [queryId]);
-    var unsubscribe = store.watchQuery(queryId).subscribe(listener);
     React.useEffect(function () {
-        return unsubscribe;
+        return observer.subscribe(listener);
     }, [queryId]);
-    return resultToProps ? resultToProps(state) : state;
+    return state;
 }
-function useQueriesResults(queriesIds, resultsToProps) {
+function useQueriesObserver(queriesIds, getState) {
     var currentQueriesIds = usePrevValue(queriesIds).value;
     var store = useMoon().store;
-    var readQueriesResults = function () {
+    var isMounted = useIsMounted();
+    var queriesResults = React.useMemo(function () {
         return currentQueriesIds.reduce(function (result, queryId) {
-            var queryState = getAdaptedQueryState(store, queryId);
-            result[queryId] = queryState === null || queryState === void 0 ? void 0 : queryState.data;
+            var query = store.getQueryCache().get(reactQuery.hashQueryKey(queryId));
+            result[queryId] = getState(query);
             return result;
         }, {});
-    };
-    var _a = React.useState(readQueriesResults()), states = _a[0], setStates = _a[1];
-    var getListener = React.useCallback(function (queryId) { return function () {
-        var _a;
-        var queryState = getAdaptedQueryState(store, queryId);
-        var queryData = queryState === null || queryState === void 0 ? void 0 : queryState.data;
-        if (!equal(states[queryId] || null, queryData || null)) {
-            setStates((_a = {}, _a[queryId] = queryData, _a));
-        }
-    }; }, [currentQueriesIds]);
-    var unsubscribeList = queriesIds.map(function (queryId) { return store.watchQuery(queryId).subscribe(getListener(queryId)); });
-    React.useEffect(function () {
-        return function () {
-            unsubscribeList.forEach(function (unsubscribe) { return unsubscribe(); });
-        };
+    }, [currentQueriesIds, store]);
+    var _a = React.useState(queriesResults), states = _a[0], setStates = _a[1];
+    var queries = React.useMemo(function () {
+        return queriesIds.map(function (queryId) { return store.defaultQueryObserverOptions({ queryKey: queryId, enabled: false }); });
     }, [currentQueriesIds]);
-    return resultsToProps ? resultsToProps(states) : states;
-}
-function useQueryState(queryId, stateToProps) {
-    var store = useMoon().store;
-    var initialSate = getAdaptedQueryState(store, queryId);
-    var _a = React.useState(initialSate), state = _a[0], setState = _a[1];
+    var observerRef = React.useRef();
+    var observer = observerRef.current || new reactQuery.QueriesObserver(store, queries);
+    observerRef.current = observer;
+    if (observer.hasListeners()) {
+        observer.setQueries(queries);
+    }
     var listener = React.useCallback(function () {
-        var newState = getAdaptedQueryState(store, queryId);
-        if (!equal(state || null, newState || null)) {
-            setState(newState);
+        if (isMounted()) {
+            queriesIds.forEach(function (queryId) {
+                var _a;
+                var query = store.getQueryCache().get(reactQuery.hashQueryKey(queryId));
+                var queryState = getState(query);
+                if (!equal(states[queryId] || null, queryState || null)) {
+                    setStates((_a = {}, _a[queryId] = queryState, _a));
+                }
+            });
         }
-    }, [queryId]);
-    var unsubscribe = store.watchQuery(queryId).subscribe(listener);
+    }, [currentQueriesIds]);
     React.useEffect(function () {
-        return unsubscribe;
-    }, [queryId]);
-    return stateToProps && state ? stateToProps(state) : state;
+        return observer.subscribe(listener);
+    }, [currentQueriesIds]);
+    return states;
 }
-function useQueriesStates(queriesIds, statesToProps) {
-    var currentQueriesIds = usePrevValue(queriesIds).value;
-    var store = useMoon().store;
-    var readQueriesStates = function () {
-        return currentQueriesIds.reduce(function (result, queryId) {
-            result[queryId] = getAdaptedQueryState(store, queryId);
-            return result;
-        }, {});
+function useQueryResult(queryId, resultToProps, isInfinite) {
+    if (isInfinite === void 0) { isInfinite = false; }
+    var getState = function (query) {
+        var queryState = getAdaptedQueryState(query);
+        return queryState === null || queryState === void 0 ? void 0 : queryState.data;
     };
-    var _a = React.useState(readQueriesStates()), states = _a[0], setStates = _a[1];
-    var getListener = React.useCallback(function (queryId) { return function () {
-        var _a;
-        var newState = getAdaptedQueryState(store, queryId);
-        if (!equal(states[queryId] || null, newState || null)) {
-            setStates((_a = {}, _a[queryId] = newState, _a));
-        }
-    }; }, [currentQueriesIds]);
-    var unsubscribeList = queriesIds.map(function (queryId) { return store.watchQuery(queryId).subscribe(getListener(queryId)); });
-    React.useEffect(function () {
-        return function () {
-            unsubscribeList.forEach(function (unsubscribe) { return unsubscribe(); });
-        };
-    }, [currentQueriesIds]);
-    return statesToProps ? statesToProps(states) : states;
+    var queryResult = useQueryObserver(queryId, getState, isInfinite);
+    return resultToProps ? resultToProps(queryResult) : queryResult;
 }
+function useQueriesResults(queriesIds, resultsToProps) {
+    var getState = function (query) {
+        var queryState = getAdaptedQueryState(query);
+        return queryState === null || queryState === void 0 ? void 0 : queryState.data;
+    };
+    var queriesResult = useQueriesObserver(queriesIds, getState);
+    return resultsToProps ? resultsToProps(queriesResult) : queriesResult;
+}
+function useQueryState(queryId, stateToProps, isInfinite) {
+    if (isInfinite === void 0) { isInfinite = false; }
+    var queryResult = useQueryObserver(queryId, getAdaptedQueryState, isInfinite);
+    return stateToProps ? stateToProps(queryResult) : queryResult;
+}
+function useQueriesStates(queriesIds, statesToProps) {
+    var queriesResult = useQueriesObserver(queriesIds, getAdaptedQueryState);
+    return statesToProps ? statesToProps(queriesResult) : queriesResult;
+}
 function usePrevValue(value) {
@@ -366,2 +380,14 @@ var valueRef = React.useRef(value);
 }
+function useIsMounted() {
+    var mountedRef = React.useRef(false);
+    var isMounted = React.useCallback(function () { return mountedRef.current; }, []);
+    var useEffect = isServer ? React.useEffect : React.useLayoutEffect;
+    useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    return isMounted;
+}
 
@@ -383,26 +409,18 @@ (function (FetchPolicy) {
     var isInitialMount = React.useRef(true);
-    var clientProps = { source: source, endPoint: endPoint, variables: variables, options: options };
+    var clientProps = { source: source, endPoint: endPoint, variables: variables };
     var queryId = getQueryId(__assign({ id: id }, clientProps));
     var _d = usePrevValue({ queryId: queryId, clientProps: clientProps }), value = _d.value, prevValue = _d.prevValue;
-    var resolvedQueryConfig = React.useMemo(function () { return store.getResolvedQueryConfig(queryId, queryConfig); }, [
-        store,
-        queryId,
-        queryConfig
-    ]);
     var cacheOnly = fetchPolicy === exports.FetchPolicy.CacheFirst;
     var networkOnly = fetchPolicy === exports.FetchPolicy.NetworkOnly;
-    var adaptedQueryConfig = React.useMemo(function () { return (__assign(__assign({}, queryConfig), { 
-        // to fix (react-query)
-        cacheTime: networkOnly ? 0 : queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.cacheTime, 
-        // default values to false
-        refetchOnReconnect: (queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.refetchOnReconnect) || false, refetchOnWindowFocus: (queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.refetchOnWindowFocus) || false })); }, [queryConfig, networkOnly]);
+    var queryOptions = React.useMemo(function () {
+        return store.defaultQueryObserverOptions(__assign(__assign({}, queryConfig), { 
+            // to fix (react-query)
+            cacheTime: networkOnly ? 0 : queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.cacheTime }));
+    }, [queryConfig, networkOnly, store]);
     if (isInitialMount.current && networkOnly) {
         // remove cache if networkOnly
-        store.setQueryData(queryId, queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.initialData, adaptedQueryConfig);
+        store.setQueryData(queryId, queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.initialData);
     }
-    function cancel() {
-        store.cancelQueries(queryId, { exact: true });
-    }
     function fetch() {
-        var cachedResult = store.getQueryData(queryId);
+        var cachedResult = store.getQueryData(queryId, { exact: true });
         return cacheOnly && cachedResult
@@ -412,6 +430,6 @@ ? cachedResult
     }
-    var queryResult = reactQuery.useQuery(queryId, fetch, adaptedQueryConfig);
-    var clear = queryResult.clear, fetchMore = queryResult.fetchMore, refetch = queryResult.refetch, remove = queryResult.remove, others = __rest(queryResult, ["clear", "fetchMore", "refetch", "remove"]);
+    var queryResult = reactQuery.useQuery(queryId, fetch, queryOptions);
+    var refetch = queryResult.refetch, remove = queryResult.remove, others = __rest(queryResult, ["refetch", "remove"]);
     React.useEffect(function () {
-        if (prevValue.queryId === value.queryId && !isInitialMount.current && (resolvedQueryConfig === null || resolvedQueryConfig === void 0 ? void 0 : resolvedQueryConfig.enabled)) {
+        if (prevValue.queryId === value.queryId && !isInitialMount.current && (queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled)) {
             // refetch on update and when only client options have been changed
@@ -424,7 +442,9 @@ refetch();
     }, []);
-    // cacheTime=0 not working
+    function cancel() {
+        store.cancelQueries(queryId, { exact: true });
+    }
     var data = networkOnly && others.isFetching ? undefined : others.data;
     return [
-        { clear: clear, fetchMore: fetchMore, refetch: refetch, remove: remove, cancel: cancel },
-        __assign(__assign({}, others), { data: data })
+        __assign(__assign({}, others), { data: data }),
+        { refetch: refetch, remove: remove, cancel: cancel }
     ];
@@ -437,3 +457,3 @@ }
     var children = props.children, queryProps = __rest(props, ["children"]);
-    var _a = useQuery(queryProps), actions = _a[0], state = _a[1];
+    var _a = useQuery(queryProps), state = _a[0], actions = _a[1];
     return children ? children(__assign(__assign({}, state), { actions: actions })) : null;
@@ -484,3 +504,10 @@ }
     }
-    return reactQuery.useMutation(mutation, mutationConfig);
+    var _b = reactQuery.useMutation(mutation, mutationConfig), reactQueryMutate = _b.mutate, reactQueryMutateAsync = _b.mutateAsync, reset = _b.reset, others = __rest(_b, ["mutate", "mutateAsync", "reset"]);
+    var mutate = React.useCallback(function () {
+        return reactQueryMutate(variables);
+    }, [variables]);
+    var mutateAsync = React.useCallback(function () {
+        return reactQueryMutateAsync(variables);
+    }, [variables]);
+    return [others, { mutate: mutate, mutateAsync: mutateAsync, reset: reset }];
 }
@@ -492,4 +519,4 @@
     var children = props.children, mutationProps = __rest(props, ["children"]);
-    var _a = useMutation(mutationProps), mutate = _a[0], state = _a[1];
-    return children ? children(__assign(__assign({}, state), { actions: { mutate: mutate } })) : null;
+    var _a = useMutation(mutationProps), state = _a[0], actions = _a[1];
+    return children ? children(__assign(__assign({}, state), { actions: actions })) : null;
 }
@@ -500,2 +527,40 @@ Mutation.defaultProps = {
 
+function useInfiniteQuery(_a) {
+    var id = _a.id, source = _a.source, endPoint = _a.endPoint, variables = _a.variables, options = _a.options, queryConfig = _a.queryConfig;
+    var _b = useMoon(), client = _b.client, store = _b.store;
+    var isInitialMount = React.useRef(true);
+    var clientProps = { source: source, endPoint: endPoint, variables: variables };
+    var queryId = getQueryId(__assign({ id: id }, clientProps));
+    var _c = usePrevValue({ queryId: queryId, clientProps: clientProps }), value = _c.value, prevValue = _c.prevValue;
+    var queryOptions = React.useMemo(function () { return store.defaultQueryObserverOptions(queryConfig); }, [queryConfig, store]);
+    function fetch(_key, newPageProps) {
+        var queryVariables = __assign(__assign({}, variables), newPageProps);
+        return client.query(source, endPoint, queryVariables, options);
+    }
+    var queryResult = reactQuery.useInfiniteQuery(queryId, fetch, queryOptions);
+    var fetchNextPage = queryResult.fetchNextPage, fetchPreviousPage = queryResult.fetchPreviousPage, refetch = queryResult.refetch, remove = queryResult.remove, others = __rest(queryResult, ["fetchNextPage", "fetchPreviousPage", "refetch", "remove"]);
+    React.useEffect(function () {
+        if (prevValue.queryId === value.queryId && !isInitialMount.current && (queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled)) {
+            // refetch on update and when only client options have been changed
+            refetch();
+        }
+    }, [value.clientProps]);
+    React.useEffect(function () {
+        isInitialMount.current = false;
+    }, []);
+    function cancel() {
+        store.cancelQueries(queryId, { exact: true });
+    }
+    return [others, { fetchNextPage: fetchNextPage, fetchPreviousPage: fetchPreviousPage, remove: remove, refetch: refetch, cancel: cancel }];
+}
+
+function InfiniteQuery(props
+// eslint-disable-next-line no-undef
+) {
+    var children = props.children, queryProps = __rest(props, ["children"]);
+    var _a = useInfiniteQuery(queryProps), state = _a[0], actions = _a[1];
+    return children ? children(__assign(__assign({}, state), { actions: actions })) : null;
+}
+
+exports.InfiniteQuery = InfiniteQuery;
 exports.MoonClient = MoonClient;
@@ -512,9 +577,14 @@ exports.MoonContext = MoonContext;
 exports.getQueryId = getQueryId;
+exports.isServer = isServer;
 exports.stableStringify = stableStringify;
+exports.useInfiniteQuery = useInfiniteQuery;
+exports.useIsMounted = useIsMounted;
 exports.useMoon = useMoon;
 exports.useMutation = useMutation;
 exports.usePrevValue = usePrevValue;
+exports.useQueriesObserver = useQueriesObserver;
 exports.useQueriesResults = useQueriesResults;
 exports.useQueriesStates = useQueriesStates;
 exports.useQuery = useQuery;
+exports.useQueryObserver = useQueryObserver;
 exports.useQueryResult = useQueryResult;
@@ -521,0 +591,0 @@ exports.useQueryState = useQueryState;

dist/mutation.d.ts

 /// <reference types="react" />
-import { MutateFunction, MutationResult } from "react-query";
-import { MutateType } from "./moon-client";
+import { UseMutationResult } from "react-query";
+import { MutateType } from "./moonClient";
 import { Nullable } from "./typing";
-import { IMutationProps } from "./mutation-hook";
-export interface IMutationChildrenProps<MutationVariables = any, MutationResponse = any, MutationError = any> extends MutationResult<MutationResponse, MutationError> {
-    actions: {
-        mutate: MutateFunction<MutationResponse, MutationError, MutationVariables>;
+import { IMutationProps } from "./useMutation";
+export interface IMutationChildrenProps<MutationVariables = any, MutationResponse = any, MutationError = any> extends Omit<UseMutationResult<MutationResponse | undefined, MutationError, MutationVariables>, "mutate" | "mutateAsync" | "reset"> {
+    actions: Pick<UseMutationResult<MutationResponse | undefined, MutationError, MutationVariables>, "reset"> & {
+        mutate: () => void;
+        mutateAsync: () => Promise<MutationResponse>;
     };
@@ -10,0 +11,0 @@ }

dist/query.d.ts

 import * as React from "react";
-import { QueryResult } from "react-query";
+import { UseQueryResult } from "react-query";
 import { Nullable } from "./typing";
-import { FetchPolicy, IQueryProps } from "./query-hook";
+import { FetchPolicy, IQueryProps } from "./useQuery";
 import { ResultProps, QueriesResults } from "./hooks";
-export interface IQueryChildrenProps<QueryResponse, QueryError> extends Omit<QueryResult<QueryResponse, QueryError>, "clear" | "fetchMore" | "refetch" | "remove"> {
-    actions: Pick<QueryResult<QueryResponse, QueryError>, "clear" | "fetchMore" | "refetch" | "remove">;
+export interface IQueryChildrenProps<QueryResponse, QueryError> extends Omit<UseQueryResult<QueryResponse | undefined, QueryError>, "refetch" | "remove"> {
+    actions: Pick<UseQueryResult<QueryResponse | undefined, QueryError>, "refetch" | "remove">;
 }
@@ -9,0 +9,0 @@ export declare type QueryChildren<QueryResponse, QueryError> = (props: IQueryChildrenProps<QueryResponse, QueryError>) => Nullable<JSX.Element>;

dist/utils/client.d.ts

@@ -1,2 +0,2 @@
-import { QueryCache } from "react-query";
+import { QueryClient } from "react-query";
 interface InterceptorManagerUseParams<V> {
@@ -40,3 +40,3 @@ onFulfilled?: (value: V) => V | Promise<V>;
 export declare function getClients(links: ILink[], clientFactory?: ClientFactory): IClients;
-export declare function getMoonStore(store?: QueryCache): QueryCache;
+export declare function getMoonStore(store?: QueryClient): QueryClient;
 export {};

dist/utils/common.d.ts

@@ -0,3 +1,4 @@
+export declare const isServer: boolean;
 export declare const getId: (params: Record<string, any>) => string;
 export declare function stableStringify(value: any): string;
 export declare function equal(objA: any, objB: any, deep?: boolean): boolean;

package.json

 {
   "name": "@decathlon/moon",
-  "version": "3.0.3",
+  "version": "4.0.0-beta-1",
   "description": "A featured, production ready caching REST client for every React UI",
@@ -24,3 +24,3 @@ "author": "Decathlon",
     "react": "^16.12.0",
-    "react-query": "~2.23.0"
+    "react-query": "3.2.0-beta.2"
   },
@@ -57,3 +57,3 @@ "scripts": {
   },
-  "gitHead": "3a174595ba95b333ac68ef3a12a25c3cc027dacd"
+  "gitHead": "634e36812aaf8e6612fbb6574fffc4e27752431a"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

157999

increased by10.5%

Number of package files

21

increased by10.53%

Lines of code

1372

increased by15.1%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

4

increased by100%

No dependency changes