@tanstack/react-query-persist-client 4.0.11-beta.0 → 4.2.1

package/build/esm/index.js

@@ -0,0 +1,492 @@
+/**
+ * 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
+ */
+import * as React from 'react';
+import { QueryClientProvider, IsRestoringProvider } from '@tanstack/react-query';
+
+/**
+ * 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) {
+    if (process.env.NODE_ENV !== 'production') {
+      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.useState(true);
+  const refs = React.useRef({
+    persistOptions,
+    onSuccess
+  });
+  React.useEffect(() => {
+    refs.current = {
+      persistOptions,
+      onSuccess
+    };
+  });
+  React.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.createElement(QueryClientProvider, _extends({
+    client: client
+  }, props), /*#__PURE__*/React.createElement(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;
+};
+
+export { PersistQueryClientProvider, persistQueryClient, persistQueryClientRestore, persistQueryClientSave, persistQueryClientSubscribe, removeOldestQuery };
+//# sourceMappingURL=index.js.map