@tanstack/react-query-persist-client 4.0.0

package/build/umd/index.development.js

@@ -0,0 +1,524 @@
+/**
+ * react-query-persist-client
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@tanstack/react-query')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@tanstack/react-query'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactQueryPersistClient = {}, global.React, global.reactQuery));
+})(this, (function (exports, React, reactQuery) { 'use strict';
+
+  function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+  }
+
+  var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+  /**
+   * query-core
+   *
+   * Copyright (c) TanStack
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE.md file in the root directory of this source tree.
+   *
+   * @license MIT
+   */
+  class Subscribable {
+    constructor() {
+      this.listeners = [];
+      this.subscribe = this.subscribe.bind(this);
+    }
+
+    subscribe(listener) {
+      this.listeners.push(listener);
+      this.onSubscribe();
+      return () => {
+        this.listeners = this.listeners.filter(x => x !== listener);
+        this.onUnsubscribe();
+      };
+    }
+
+    hasListeners() {
+      return this.listeners.length > 0;
+    }
+
+    onSubscribe() {// Do nothing
+    }
+
+    onUnsubscribe() {// Do nothing
+    }
+
+  }
+
+  // TYPES
+  // UTILS
+  const isServer = typeof window === 'undefined';
+
+  class FocusManager extends Subscribable {
+    constructor() {
+      super();
+
+      this.setup = onFocus => {
+        // addEventListener does not exist in React Native, but window does
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (!isServer && window.addEventListener) {
+          const listener = () => onFocus(); // Listen to visibillitychange and focus
+
+
+          window.addEventListener('visibilitychange', listener, false);
+          window.addEventListener('focus', listener, false);
+          return () => {
+            // Be sure to unsubscribe if a new handler is set
+            window.removeEventListener('visibilitychange', listener);
+            window.removeEventListener('focus', listener);
+          };
+        }
+      };
+    }
+
+    onSubscribe() {
+      if (!this.cleanup) {
+        this.setEventListener(this.setup);
+      }
+    }
+
+    onUnsubscribe() {
+      if (!this.hasListeners()) {
+        var _this$cleanup;
+
+        (_this$cleanup = this.cleanup) == null ? void 0 : _this$cleanup.call(this);
+        this.cleanup = undefined;
+      }
+    }
+
+    setEventListener(setup) {
+      var _this$cleanup2;
+
+      this.setup = setup;
+      (_this$cleanup2 = this.cleanup) == null ? void 0 : _this$cleanup2.call(this);
+      this.cleanup = setup(focused => {
+        if (typeof focused === 'boolean') {
+          this.setFocused(focused);
+        } else {
+          this.onFocus();
+        }
+      });
+    }
+
+    setFocused(focused) {
+      this.focused = focused;
+
+      if (focused) {
+        this.onFocus();
+      }
+    }
+
+    onFocus() {
+      this.listeners.forEach(listener => {
+        listener();
+      });
+    }
+
+    isFocused() {
+      if (typeof this.focused === 'boolean') {
+        return this.focused;
+      } // document global can be unavailable in react native
+
+
+      if (typeof document === 'undefined') {
+        return true;
+      }
+
+      return [undefined, 'visible', 'prerender'].includes(document.visibilityState);
+    }
+
+  }
+  new FocusManager();
+
+  class OnlineManager extends Subscribable {
+    constructor() {
+      super();
+
+      this.setup = onOnline => {
+        // addEventListener does not exist in React Native, but window does
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (!isServer && window.addEventListener) {
+          const listener = () => onOnline(); // Listen to online
+
+
+          window.addEventListener('online', listener, false);
+          window.addEventListener('offline', listener, false);
+          return () => {
+            // Be sure to unsubscribe if a new handler is set
+            window.removeEventListener('online', listener);
+            window.removeEventListener('offline', listener);
+          };
+        }
+      };
+    }
+
+    onSubscribe() {
+      if (!this.cleanup) {
+        this.setEventListener(this.setup);
+      }
+    }
+
+    onUnsubscribe() {
+      if (!this.hasListeners()) {
+        var _this$cleanup;
+
+        (_this$cleanup = this.cleanup) == null ? void 0 : _this$cleanup.call(this);
+        this.cleanup = undefined;
+      }
+    }
+
+    setEventListener(setup) {
+      var _this$cleanup2;
+
+      this.setup = setup;
+      (_this$cleanup2 = this.cleanup) == null ? void 0 : _this$cleanup2.call(this);
+      this.cleanup = setup(online => {
+        if (typeof online === 'boolean') {
+          this.setOnline(online);
+        } else {
+          this.onOnline();
+        }
+      });
+    }
+
+    setOnline(online) {
+      this.online = online;
+
+      if (online) {
+        this.onOnline();
+      }
+    }
+
+    onOnline() {
+      this.listeners.forEach(listener => {
+        listener();
+      });
+    }
+
+    isOnline() {
+      if (typeof this.online === 'boolean') {
+        return this.online;
+      }
+
+      if (typeof navigator === 'undefined' || typeof navigator.onLine === 'undefined') {
+        return true;
+      }
+
+      return navigator.onLine;
+    }
+
+  }
+  new OnlineManager();
+
+  // TYPES
+  // FUNCTIONS
+  function dehydrateMutation(mutation) {
+    return {
+      mutationKey: mutation.options.mutationKey,
+      state: mutation.state
+    };
+  } // Most config is not dehydrated but instead meant to configure again when
+  // consuming the de/rehydrated data, typically with useQuery on the client.
+  // Sometimes it might make sense to prefetch data on the server and include
+  // in the html-payload, but not consume it on the initial render.
+
+
+  function dehydrateQuery(query) {
+    return {
+      state: query.state,
+      queryKey: query.queryKey,
+      queryHash: query.queryHash
+    };
+  }
+
+  function defaultShouldDehydrateMutation(mutation) {
+    return mutation.state.isPaused;
+  }
+
+  function defaultShouldDehydrateQuery(query) {
+    return query.state.status === 'success';
+  }
+
+  function dehydrate(client, options = {}) {
+    const mutations = [];
+    const queries = [];
+
+    if (options.dehydrateMutations !== false) {
+      const shouldDehydrateMutation = options.shouldDehydrateMutation || defaultShouldDehydrateMutation;
+      client.getMutationCache().getAll().forEach(mutation => {
+        if (shouldDehydrateMutation(mutation)) {
+          mutations.push(dehydrateMutation(mutation));
+        }
+      });
+    }
+
+    if (options.dehydrateQueries !== false) {
+      const shouldDehydrateQuery = options.shouldDehydrateQuery || defaultShouldDehydrateQuery;
+      client.getQueryCache().getAll().forEach(query => {
+        if (shouldDehydrateQuery(query)) {
+          queries.push(dehydrateQuery(query));
+        }
+      });
+    }
+
+    return {
+      mutations,
+      queries
+    };
+  }
+  function hydrate(client, dehydratedState, options) {
+    if (typeof dehydratedState !== 'object' || dehydratedState === null) {
+      return;
+    }
+
+    const mutationCache = client.getMutationCache();
+    const queryCache = client.getQueryCache(); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+
+    const mutations = dehydratedState.mutations || []; // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+
+    const queries = dehydratedState.queries || [];
+    mutations.forEach(dehydratedMutation => {
+      var _options$defaultOptio;
+
+      mutationCache.build(client, { ...(options == null ? void 0 : (_options$defaultOptio = options.defaultOptions) == null ? void 0 : _options$defaultOptio.mutations),
+        mutationKey: dehydratedMutation.mutationKey
+      }, dehydratedMutation.state);
+    });
+    queries.forEach(dehydratedQuery => {
+      var _options$defaultOptio2;
+
+      const query = queryCache.get(dehydratedQuery.queryHash); // Do not hydrate if an existing query exists with newer data
+
+      if (query) {
+        if (query.state.dataUpdatedAt < dehydratedQuery.state.dataUpdatedAt) {
+          query.setState(dehydratedQuery.state);
+        }
+
+        return;
+      } // Restore query
+
+
+      queryCache.build(client, { ...(options == null ? void 0 : (_options$defaultOptio2 = options.defaultOptions) == null ? void 0 : _options$defaultOptio2.queries),
+        queryKey: dehydratedQuery.queryKey,
+        queryHash: dehydratedQuery.queryHash
+      }, dehydratedQuery.state);
+    });
+  }
+
+  /**
+   * Restores persisted data to the QueryCache
+   *  - data obtained from persister.restoreClient
+   *  - data is hydrated using hydrateOptions
+   * If data is expired, busted, empty, or throws, it runs persister.removeClient
+   */
+  async function persistQueryClientRestore({
+    queryClient,
+    persister,
+    maxAge = 1000 * 60 * 60 * 24,
+    buster = '',
+    hydrateOptions
+  }) {
+    try {
+      const persistedClient = await persister.restoreClient();
+
+      if (persistedClient) {
+        if (persistedClient.timestamp) {
+          const expired = Date.now() - persistedClient.timestamp > maxAge;
+          const busted = persistedClient.buster !== buster;
+
+          if (expired || busted) {
+            persister.removeClient();
+          } else {
+            hydrate(queryClient, persistedClient.clientState, hydrateOptions);
+          }
+        } else {
+          persister.removeClient();
+        }
+      }
+    } catch (err) {
+      {
+        queryClient.getLogger().error(err);
+        queryClient.getLogger().warn('Encountered an error attempting to restore client cache from persisted location. As a precaution, the persisted cache will be discarded.');
+      }
+
+      persister.removeClient();
+    }
+  }
+  /**
+   * Persists data from the QueryCache
+   *  - data dehydrated using dehydrateOptions
+   *  - data is persisted using persister.persistClient
+   */
+
+  async function persistQueryClientSave({
+    queryClient,
+    persister,
+    buster = '',
+    dehydrateOptions
+  }) {
+    const persistClient = {
+      buster,
+      timestamp: Date.now(),
+      clientState: dehydrate(queryClient, dehydrateOptions)
+    };
+    await persister.persistClient(persistClient);
+  }
+  /**
+   * Subscribe to QueryCache and MutationCache updates (for persisting)
+   * @returns an unsubscribe function (to discontinue monitoring)
+   */
+
+  function persistQueryClientSubscribe(props) {
+    const unsubscribeQueryCache = props.queryClient.getQueryCache().subscribe(() => {
+      persistQueryClientSave(props);
+    });
+    const unusbscribeMutationCache = props.queryClient.getMutationCache().subscribe(() => {
+      persistQueryClientSave(props);
+    });
+    return () => {
+      unsubscribeQueryCache();
+      unusbscribeMutationCache();
+    };
+  }
+  /**
+   * Restores persisted data to QueryCache and persists further changes.
+   */
+
+  function persistQueryClient(props) {
+    let hasUnsubscribed = false;
+    let persistQueryClientUnsubscribe;
+
+    const unsubscribe = () => {
+      hasUnsubscribed = true;
+      persistQueryClientUnsubscribe == null ? void 0 : persistQueryClientUnsubscribe();
+    }; // Attempt restore
+
+
+    const restorePromise = persistQueryClientRestore(props).then(() => {
+      if (!hasUnsubscribed) {
+        // Subscribe to changes in the query cache to trigger the save
+        persistQueryClientUnsubscribe = persistQueryClientSubscribe(props);
+      }
+    });
+    return [unsubscribe, restorePromise];
+  }
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  const PersistQueryClientProvider = ({
+    client,
+    children,
+    persistOptions,
+    onSuccess,
+    ...props
+  }) => {
+    const [isRestoring, setIsRestoring] = React__namespace.useState(true);
+    const refs = React__namespace.useRef({
+      persistOptions,
+      onSuccess
+    });
+    React__namespace.useEffect(() => {
+      refs.current = {
+        persistOptions,
+        onSuccess
+      };
+    });
+    React__namespace.useEffect(() => {
+      let isStale = false;
+      setIsRestoring(true);
+      const [unsubscribe, promise] = persistQueryClient({ ...refs.current.persistOptions,
+        queryClient: client
+      });
+      promise.then(() => {
+        if (!isStale) {
+          refs.current.onSuccess == null ? void 0 : refs.current.onSuccess();
+          setIsRestoring(false);
+        }
+      });
+      return () => {
+        isStale = true;
+        unsubscribe();
+      };
+    }, [client]);
+    return /*#__PURE__*/React__namespace.createElement(reactQuery.QueryClientProvider, _extends({
+      client: client
+    }, props), /*#__PURE__*/React__namespace.createElement(reactQuery.IsRestoringProvider, {
+      value: isRestoring
+    }, children));
+  };
+
+  const removeOldestQuery = ({
+    persistedClient
+  }) => {
+    const mutations = [...persistedClient.clientState.mutations];
+    const queries = [...persistedClient.clientState.queries];
+    const client = { ...persistedClient,
+      clientState: {
+        mutations,
+        queries
+      }
+    }; // sort queries by dataUpdatedAt (oldest first)
+
+    const sortedQueries = [...queries].sort((a, b) => a.state.dataUpdatedAt - b.state.dataUpdatedAt); // clean oldest query
+
+    if (sortedQueries.length > 0) {
+      const oldestData = sortedQueries.shift();
+      client.clientState.queries = queries.filter(q => q !== oldestData);
+      return client;
+    }
+
+    return undefined;
+  };
+
+  exports.PersistQueryClientProvider = PersistQueryClientProvider;
+  exports.persistQueryClient = persistQueryClient;
+  exports.persistQueryClientRestore = persistQueryClientRestore;
+  exports.persistQueryClientSave = persistQueryClientSave;
+  exports.persistQueryClientSubscribe = persistQueryClientSubscribe;
+  exports.removeOldestQuery = removeOldestQuery;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.development.js.map