convex/dist/cjs/react/index.js

Client for the Convex Cloud

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var react_exports = {};
__export(react_exports, {
  ConvexProvider: () => ConvexProvider,
  ConvexReactClient: () => ConvexReactClient,
  useConvexGeneric: () => useConvexGeneric,
  useMutationGeneric: () => useMutationGeneric,
  useQueryGeneric: () => useQueryGeneric
});
module.exports = __toCommonJS(react_exports);
var import_browser = require("../browser/index.js");
var import_react = __toESM(require("react"), 1);
var import_common = require("@convex-dev/common");
var import_react_dom = __toESM(require("react-dom"), 1);
var import_use_subscription = require("./use_subscription.js");
if (typeof import_react.default === "undefined") {
  throw new Error("Required dependency 'react' not installed");
}
if (typeof import_react_dom.default === "undefined") {
  throw new Error("Required dependency 'react-dom' not installed");
}
function createMutation(name, sync, update = null) {
  function mutation(...args) {
    return sync().mutate(name, args, update);
  }
  mutation.withOptimisticUpdate = function withOptimisticUpdate(optimisticUpdate) {
    if (update !== null) {
      throw new Error(
        `Already specified optimistic update for mutation ${name}`
      );
    }
    return createMutation(name, sync, optimisticUpdate);
  };
  return mutation;
}
const DEFAULT_OPTIONS = {
  unsavedChangesWarning: true
};
class ConvexReactClient {
  constructor(clientConfig, options) {
    this.closed = false;
    this.clientConfig = clientConfig;
    this.listeners = /* @__PURE__ */ new Map();
    this.options = { ...DEFAULT_OPTIONS, ...options };
  }
  get sync() {
    if (this.closed) {
      throw new Error("ConvexReactClient has already been closed.");
    }
    if (this.cachedSync) {
      return this.cachedSync;
    }
    this.cachedSync = new import_browser.InternalConvexClient(
      this.clientConfig,
      (updatedQueries) => this.transition(updatedQueries),
      this.options
    );
    if (this.adminAuth) {
      this.cachedSync.setAdminAuth(this.adminAuth);
    }
    return this.cachedSync;
  }
  setAuth(token) {
    this.sync.setAuth(token);
  }
  clearAuth() {
    this.sync.clearAuth();
  }
  setAdminAuth(token) {
    this.adminAuth = token;
    if (this.closed) {
      throw new Error("ConvexReactClient has already been closed.");
    }
    if (this.cachedSync) {
      this.sync.setAdminAuth(token);
    }
  }
  watchQuery(name, ...args) {
    return {
      onUpdate: (callback) => {
        const { queryToken, unsubscribe } = this.sync.subscribe(
          name,
          args
        );
        const currentListeners = this.listeners.get(queryToken);
        if (currentListeners !== void 0) {
          currentListeners.add(callback);
        } else {
          this.listeners.set(queryToken, /* @__PURE__ */ new Set([callback]));
        }
        return () => {
          if (this.closed) {
            return;
          }
          const currentListeners2 = this.listeners.get(queryToken);
          currentListeners2.delete(callback);
          if (currentListeners2.size == 0) {
            this.listeners.delete(queryToken);
          }
          unsubscribe();
        };
      },
      localQueryResult: () => {
        if (this.cachedSync) {
          return this.cachedSync.localQueryResult(
            name,
            args
          );
        }
        return void 0;
      }
    };
  }
  mutation(name) {
    return createMutation(name, () => this.sync);
  }
  async close() {
    this.closed = true;
    this.listeners = /* @__PURE__ */ new Map();
    if (this.cachedSync) {
      const sync = this.cachedSync;
      this.cachedSync = void 0;
      await sync.close();
    }
  }
  transition(updatedQueries) {
    import_react_dom.default.unstable_batchedUpdates(() => {
      for (const queryToken of updatedQueries) {
        const callbacks = this.listeners.get(queryToken);
        if (callbacks) {
          for (const callback of callbacks) {
            callback();
          }
        }
      }
    });
  }
}
const ConvexContext = import_react.default.createContext(
  void 0
);
function useConvexGeneric() {
  return (0, import_react.useContext)(ConvexContext);
}
const ConvexProvider = ({ client, children }) => {
  return import_react.default.createElement(
    ConvexContext.Provider,
    { value: client },
    children
  );
};
function useQueryGeneric(name, ...args) {
  const convex = (0, import_react.useContext)(ConvexContext);
  if (convex === void 0) {
    throw new Error(
      "Could not find Convex client! `useQuery` must be used in the React component tree under `ConvexProvider`. Did you forget it? See https://docs.convex.dev/quick-start#set-up-convex-in-your-react-app"
    );
  }
  const subscription = (0, import_react.useMemo)(
    () => {
      const watch = convex.watchQuery(name, ...args);
      return {
        getCurrentValue: () => watch.localQueryResult(),
        subscribe: (callback) => watch.onUpdate(callback)
      };
    },
    [name, convex, JSON.stringify((0, import_common.convexToJson)(args))]
  );
  const queryResult = (0, import_use_subscription.useSubscription)(subscription);
  return queryResult;
}
function useMutationGeneric(name) {
  const convex = (0, import_react.useContext)(ConvexContext);
  if (convex === void 0) {
    throw new Error(
      "Could not find Convex client! `useMutation` must be used in the React component tree under `ConvexProvider`. Did you forget it? See https://docs.convex.dev/quick-start#set-up-convex-in-your-react-app"
    );
  }
  return (0, import_react.useMemo)(() => convex.mutation(name), [convex, name]);
}
//# sourceMappingURL=index.js.map