@plasmicapp/data-sources 1.0.9 → 1.0.11

package/dist/index.js

@@ -76,6 +76,7 @@ __export(index_exports, {
   executeServerQuery: () => executeServerQuery,
   makeCacheKey: () => makeCacheKey,
   makeQueryCacheKey: () => makeQueryCacheKey,
+  matchesQueryCacheKey: () => matchesQueryCacheKey,
   normalizeData: () => normalizeData,
   throwIfPlasmicUndefinedDataError: () => throwIfPlasmicUndefinedDataError,
   unstable_executePlasmicQueries: () => executePlasmicQueries,
@@ -270,61 +271,91 @@ function usePlasmicFetch(key, resolvedParams, fetcherFn, resultMapper, undefined
   ]);
 }
 
-// src/serverQueries/client.ts
+// src/hooks/usePlasmicDataOp.tsx
+var import_data_sources_context = require("@plasmicapp/data-sources-context");
+var import_query3 = require("@plasmicapp/query");
+var React2 = __toESM(require("react"));
+
+// src/executor.tsx
+var import_isomorphic_unfetch = __toESM(require("@plasmicapp/isomorphic-unfetch"));
 var import_query2 = require("@plasmicapp/query");
-var React3 = __toESM(require("react"));
+var import_fast_stringify = __toESM(require("fast-stringify"));
 
-// src/utils.ts
-function noopFn() {
+// src/placeholders.ts
+var PLASMIC_UNDEFINED = "__PLASMIC_UNDEFINED";
+function addPlaceholders(val) {
+  return val === void 0 ? PLASMIC_UNDEFINED : val;
 }
-function pick(obj, ...keys) {
-  const res = {};
-  for (const key of keys) {
-    if (key in obj) {
-      res[key] = obj[key];
-    }
+function addPlaceholdersToUserArgs(userArgs) {
+  if (!userArgs) {
+    return userArgs;
   }
-  return res;
-}
-var tuple = (...args) => args;
-function mkIdMap(xs) {
-  return new Map(xs.map((x) => tuple(x.id, x)));
-}
-function notNil(x) {
-  return x !== null && x !== void 0;
-}
-function withoutNils(xs) {
-  return xs.filter(notNil);
+  Object.entries(userArgs).forEach(([key, val]) => {
+    userArgs[key] = Array.isArray(val) ? val.map((v) => addPlaceholders(v)) : addPlaceholders(val);
+  });
+  return userArgs;
 }
-function mapRecordEntries(callback, record1, record2, record3) {
-  return Object.entries(record1).map(([k, v1]) => {
-    const v2 = record2 == null ? void 0 : record2[k];
-    const v3 = record3 == null ? void 0 : record3[k];
-    return callback(
-      k,
-      v1,
-      v2,
-      v3
+
+// src/executor.tsx
+var DEFAULT_HOST = "https://data.plasmic.app";
+var UNAUTHORIZED_MESSAGE = "You do not have permission to perform this operation. Login to get access or contact the app owner to get access.";
+function executePlasmicDataOp(op, opts) {
+  return __async(this, null, function* () {
+    const func = getConfig(
+      "__PLASMIC_EXECUTE_DATA_OP",
+      _executePlasmicDataOp
     );
+    op.userArgs = addPlaceholdersToUserArgs(op.userArgs);
+    const res = yield (0, import_query2.wrapLoadingFetcher)(func)(op, opts);
+    return res;
   });
 }
-function mapRecords(callback, record1, record2, record3) {
-  return Object.fromEntries(
-    mapRecordEntries(
-      (k, v1, v2, v3) => [k, callback(k, v1, v2, v3)],
-      record1,
-      record2,
-      record3
-    )
-  );
+function _executePlasmicDataOp(op, opts) {
+  return __async(this, null, function* () {
+    var _a;
+    if (op.roleId) {
+      if (!(opts == null ? void 0 : opts.user) || !opts.user.roleIds.includes(op.roleId)) {
+        console.error(UNAUTHORIZED_MESSAGE);
+        throw new Error(UNAUTHORIZED_MESSAGE);
+      }
+    }
+    const host = getConfig("__PLASMIC_DATA_HOST", DEFAULT_HOST);
+    const url = `${host}/api/v1/server-data/sources/${op.sourceId}/execute`;
+    const resp = yield (0, import_isomorphic_unfetch.default)(url, {
+      method: "POST",
+      headers: __spreadValues({
+        "Content-Type": "application/json"
+      }, (opts == null ? void 0 : opts.userAuthToken) && {
+        "x-plasmic-data-user-auth-token": opts.userAuthToken
+      }),
+      body: (0, import_fast_stringify.default)({
+        opId: op.opId,
+        userArgs: (_a = op.userArgs) != null ? _a : {},
+        paginate: opts == null ? void 0 : opts.paginate
+      })
+    });
+    if (resp.status !== 200) {
+      const text = yield resp.text();
+      throw new Error(text);
+    }
+    return yield resp.json();
+  });
+}
+function getConfig(key, defaultValue) {
+  var _a;
+  if (typeof globalThis === "undefined") {
+    return defaultValue;
+  } else {
+    return (_a = globalThis[key]) != null ? _a : defaultValue;
+  }
 }
-
-// src/serverQueries/common.ts
-var import_react2 = __toESM(require("react"));
 
 // src/serverQueries/makeQueryCacheKey.ts
 function makeQueryCacheKey(id, params) {
-  return `${id}:${safeStableStringify(params)}`;
+  return `$q.$.${id}.$.${safeStableStringify(params)}`;
+}
+function matchesQueryCacheKey(cacheKey, invalidationKey) {
+  return cacheKey.includes(`.$.${invalidationKey}.$.`);
 }
 var shortPlasmicPrefix = "\u03C1";
 function safeStableStringify(unstableValue) {
@@ -384,7 +415,194 @@ function sortObjectsDeep(value, visitedObjects) {
   }
 }
 
+// src/utils.ts
+function noopFn() {
+}
+function pick(obj, ...keys) {
+  const res = {};
+  for (const key of keys) {
+    if (key in obj) {
+      res[key] = obj[key];
+    }
+  }
+  return res;
+}
+var tuple = (...args) => args;
+function mkIdMap(xs) {
+  return new Map(xs.map((x) => tuple(x.id, x)));
+}
+function notNil(x) {
+  return x !== null && x !== void 0;
+}
+function withoutNils(xs) {
+  return xs.filter(notNil);
+}
+function mapRecordEntries(callback, record1, record2, record3) {
+  return Object.entries(record1).map(([k, v1]) => {
+    const v2 = record2 == null ? void 0 : record2[k];
+    const v3 = record3 == null ? void 0 : record3[k];
+    return callback(
+      k,
+      v1,
+      v2,
+      v3
+    );
+  });
+}
+function mapRecords(callback, record1, record2, record3) {
+  return Object.fromEntries(
+    mapRecordEntries(
+      (k, v1, v2, v3) => [k, callback(k, v1, v2, v3)],
+      record1,
+      record2,
+      record3
+    )
+  );
+}
+
+// src/hooks/usePlasmicDataOp.tsx
+function makeCacheKey(dataOp, opts) {
+  const queryDependencies = JSON.stringify({
+    sourceId: dataOp.sourceId,
+    opId: dataOp.opId,
+    args: dataOp.userArgs,
+    userAuthToken: opts == null ? void 0 : opts.userAuthToken,
+    paginate: opts == null ? void 0 : opts.paginate
+  });
+  return dataOp.cacheKey ? `${dataOp.cacheKey}${queryDependencies}` : queryDependencies;
+}
+function usePlasmicInvalidate() {
+  const { cache, fallback, mutate } = (0, import_query3.usePlasmicDataConfig)();
+  return (invalidatedKeys) => __async(null, null, function* () {
+    const getKeysToInvalidate = () => {
+      var _a, _b;
+      if (!invalidatedKeys) {
+        return [];
+      }
+      const allKeys = Array.from(
+        /* @__PURE__ */ new Set([
+          ...Array.from(cache.keys()),
+          ...fallback ? Object.keys(fallback) : [],
+          // If this is running within the Studio, we also take the
+          // opportunity to invalidate the Studio cache. The keys that
+          // Studio may have can be a superset of `cache` here, because
+          // `cache` is updated as swr hooks are mounted and unmounted,
+          // but Studio's data cache keys don't get removed when hooks
+          // are unmounted. This makes it possible for Studio to hold
+          // onto a stale cache entry that doesn't get invalidated.
+          // For example, Studio may render page1, with key X, then goes
+          // to page 2, which performs a mutate. At this point, Studio
+          // has a cache entry for key X, but `cache` does not, because
+          // page2 does not use that query. But page 2 may perform a
+          // mutation that invalidates X. So we need to invalidate not
+          // only keys in `cache`, but also keys that Studio is still
+          // holding onto.
+          ...(_b = (_a = globalThis.__PLASMIC_GET_ALL_CACHE_KEYS) == null ? void 0 : _a.call(globalThis)) != null ? _b : []
+        ])
+      ).filter((key) => typeof key === "string");
+      if (invalidatedKeys.includes("plasmic_refresh_all")) {
+        return allKeys;
+      }
+      return allKeys.filter(
+        (key) => invalidatedKeys.some((k) => matchesQueryCacheKey(key, k))
+      );
+    };
+    const keys = getKeysToInvalidate();
+    if (keys.length === 0) {
+      return;
+    }
+    const invalidateKey = (key) => __async(null, null, function* () {
+      const studioInvalidate = globalThis.__PLASMIC_MUTATE_DATA_OP;
+      if (studioInvalidate) {
+        yield studioInvalidate(key);
+      }
+      return mutate(key);
+    });
+    return yield Promise.all(keys.map((key) => invalidateKey(key)));
+  });
+}
+function resolveDataOp(dataOp) {
+  if (typeof dataOp === "function") {
+    try {
+      return dataOp();
+    } catch (err) {
+      if (isPlasmicUndefinedDataErrorPromise(err)) {
+        return err;
+      }
+      return null;
+    }
+  } else {
+    return dataOp;
+  }
+}
+function usePlasmicDataOp(dataOp, opts) {
+  const resolvedDataOp = resolveDataOp(dataOp);
+  const ctx = (0, import_data_sources_context.usePlasmicDataSourceContext)();
+  const key = !resolvedDataOp || isPlasmicUndefinedDataErrorPromise(resolvedDataOp) ? null : makeCacheKey(resolvedDataOp, {
+    paginate: opts == null ? void 0 : opts.paginate,
+    userAuthToken: ctx == null ? void 0 : ctx.userAuthToken
+  });
+  const fetcher = (op) => {
+    return executePlasmicDataOp(op, {
+      userAuthToken: (ctx == null ? void 0 : ctx.userAuthToken) || void 0,
+      user: ctx == null ? void 0 : ctx.user,
+      paginate: opts == null ? void 0 : opts.paginate
+    });
+  };
+  const resultMapper = (result) => {
+    var _a;
+    return __spreadValues(__spreadValues({}, (_a = result.data) != null ? _a : {}), pick(result, "error", "isLoading"));
+  };
+  return usePlasmicFetch(
+    key,
+    resolvedDataOp,
+    fetcher,
+    resultMapper,
+    ["data", "schema", "error"],
+    {
+      noUndefinedDataProxy: opts == null ? void 0 : opts.noUndefinedDataProxy
+    }
+  );
+}
+function usePlasmicDataMutationOp(dataOp) {
+  const ctx = (0, import_data_sources_context.usePlasmicDataSourceContext)();
+  const userToken = ctx == null ? void 0 : ctx.userAuthToken;
+  const getRealDataOp = React2.useCallback(() => __async(null, null, function* () {
+    const tryGetRealDataOp = () => __async(null, null, function* () {
+      const resolved = resolveDataOp(dataOp);
+      if (!resolved) {
+        return null;
+      } else if (isPlasmicUndefinedDataErrorPromise(resolved)) {
+        yield resolved;
+        return tryGetRealDataOp();
+      } else {
+        return resolved;
+      }
+    });
+    return yield tryGetRealDataOp();
+  }), [dataOp]);
+  return React2.useCallback(() => __async(null, null, function* () {
+    var _a;
+    const { sourceId, opId, userArgs } = (_a = yield getRealDataOp()) != null ? _a : {};
+    if (!sourceId || !opId) {
+      return void 0;
+    }
+    return executePlasmicDataOp(
+      { sourceId, opId, userArgs },
+      {
+        userAuthToken: userToken || void 0,
+        user: ctx == null ? void 0 : ctx.user
+      }
+    );
+  }), [getRealDataOp, userToken]);
+}
+
+// src/serverQueries/client.ts
+var import_query4 = require("@plasmicapp/query");
+var React4 = __toESM(require("react"));
+
 // src/serverQueries/common.ts
+var import_react2 = __toESM(require("react"));
 function createDollarQueries(queryNames) {
   return Object.fromEntries(
     queryNames.map((queryName) => {
@@ -680,8 +898,8 @@ function createInitial$State($ctx, $props, $q, stateSpecs) {
 var GLOBAL_CACHE = /* @__PURE__ */ new Map();
 function usePlasmicQueries(tree, $ctx, $props, $state) {
   var _a;
-  const wrappedQueries = React3.useMemo(() => wrapQueries(tree.queries), [tree]);
-  const $queries = React3.useMemo(
+  const wrappedQueries = React4.useMemo(() => wrapQueries(tree.queries), [tree]);
+  const $queries = React4.useMemo(
     () => createDollarQueries(Object.keys(tree.queries)),
     [tree]
   );
@@ -689,7 +907,7 @@ function usePlasmicQueries(tree, $ctx, $props, $state) {
   if (!$state) {
     $state = createInitial$State($ctx, $props, $queryStates, tree.stateSpecs);
   }
-  const { fallback: prefetchedCache, cache: swrCache } = (0, import_query2.usePlasmicDataConfig)();
+  const { fallback: prefetchedCache, cache: swrCache } = (0, import_query4.usePlasmicDataConfig)();
   const paramsResults = {};
   const executionCtx = {
     $ctx,
@@ -728,7 +946,7 @@ function usePlasmicQueries(tree, $ctx, $props, $state) {
       delete paramsResults[k];
     }
   }
-  const stopRef = React3.useRef();
+  const stopRef = React4.useRef();
   (_a = stopRef.current) == null ? void 0 : _a.call(stopRef);
   let stopped = false;
   const stop = new Promise((resolve) => {
@@ -737,7 +955,7 @@ function usePlasmicQueries(tree, $ctx, $props, $state) {
       resolve();
     };
   });
-  React3.useEffect(() => () => {
+  React4.useEffect(() => () => {
     var _a2;
     return (_a2 = stopRef.current) == null ? void 0 : _a2.call(stopRef);
   }, []);
@@ -785,7 +1003,7 @@ function wrapQueries(queries) {
       if (cached) {
         return cached.promise;
       }
-      const promise = (0, import_query2.wrapLoadingFetcher)(query.fn)(...args);
+      const promise = (0, import_query4.wrapLoadingFetcher)(query.fn)(...args);
       GLOBAL_CACHE.set(cacheKey, new SyncPromise(promise));
       return promise;
     };
@@ -854,7 +1072,7 @@ function initPlasmicQueriesSync($queries, queries, paramsResults, executionCtx,
 }
 function usePlasmicQuery($query, query, paramsResult) {
   const $queryState = $query;
-  const { key, fetcher } = React3.useMemo(() => {
+  const { key, fetcher } = React4.useMemo(() => {
     switch (paramsResult.status) {
       case "blocked":
       case "error": {
@@ -901,7 +1119,7 @@ function usePlasmicQuery($query, query, paramsResult) {
       }
     }
   }, [query, paramsResult]);
-  const result = (0, import_query2.useMutablePlasmicQueryData)(key, fetcher, {
+  const result = (0, import_query4.useMutablePlasmicQueryData)(key, fetcher, {
     // If revalidateIfStale is true, then if there's a cache entry with a key,
     // but no mounted hook with that key yet, and when the hook mounts with the key,
     // swr will revalidate. This may be reasonable behavior, but for us, this
@@ -1209,224 +1427,6 @@ var import_query5 = require("@plasmicapp/query");
 
 // src/components/Fetcher.tsx
 var import_react3 = __toESM(require("react"));
-
-// src/hooks/usePlasmicDataOp.tsx
-var import_data_sources_context = require("@plasmicapp/data-sources-context");
-var import_query4 = require("@plasmicapp/query");
-var React4 = __toESM(require("react"));
-
-// src/executor.tsx
-var import_isomorphic_unfetch = __toESM(require("@plasmicapp/isomorphic-unfetch"));
-var import_query3 = require("@plasmicapp/query");
-var import_fast_stringify = __toESM(require("fast-stringify"));
-
-// src/placeholders.ts
-var PLASMIC_UNDEFINED = "__PLASMIC_UNDEFINED";
-function addPlaceholders(val) {
-  return val === void 0 ? PLASMIC_UNDEFINED : val;
-}
-function addPlaceholdersToUserArgs(userArgs) {
-  if (!userArgs) {
-    return userArgs;
-  }
-  Object.entries(userArgs).forEach(([key, val]) => {
-    userArgs[key] = Array.isArray(val) ? val.map((v) => addPlaceholders(v)) : addPlaceholders(val);
-  });
-  return userArgs;
-}
-
-// src/executor.tsx
-var DEFAULT_HOST = "https://data.plasmic.app";
-var UNAUTHORIZED_MESSAGE = "You do not have permission to perform this operation. Login to get access or contact the app owner to get access.";
-function executePlasmicDataOp(op, opts) {
-  return __async(this, null, function* () {
-    const func = getConfig(
-      "__PLASMIC_EXECUTE_DATA_OP",
-      _executePlasmicDataOp
-    );
-    op.userArgs = addPlaceholdersToUserArgs(op.userArgs);
-    const res = yield (0, import_query3.wrapLoadingFetcher)(func)(op, opts);
-    return res;
-  });
-}
-function _executePlasmicDataOp(op, opts) {
-  return __async(this, null, function* () {
-    var _a;
-    if (op.roleId) {
-      if (!(opts == null ? void 0 : opts.user) || !opts.user.roleIds.includes(op.roleId)) {
-        console.error(UNAUTHORIZED_MESSAGE);
-        throw new Error(UNAUTHORIZED_MESSAGE);
-      }
-    }
-    const host = getConfig("__PLASMIC_DATA_HOST", DEFAULT_HOST);
-    const url = `${host}/api/v1/server-data/sources/${op.sourceId}/execute`;
-    const resp = yield (0, import_isomorphic_unfetch.default)(url, {
-      method: "POST",
-      headers: __spreadValues({
-        "Content-Type": "application/json"
-      }, (opts == null ? void 0 : opts.userAuthToken) && {
-        "x-plasmic-data-user-auth-token": opts.userAuthToken
-      }),
-      body: (0, import_fast_stringify.default)({
-        opId: op.opId,
-        userArgs: (_a = op.userArgs) != null ? _a : {},
-        paginate: opts == null ? void 0 : opts.paginate
-      })
-    });
-    if (resp.status !== 200) {
-      const text = yield resp.text();
-      throw new Error(text);
-    }
-    return yield resp.json();
-  });
-}
-function getConfig(key, defaultValue) {
-  var _a;
-  if (typeof globalThis === "undefined") {
-    return defaultValue;
-  } else {
-    return (_a = globalThis[key]) != null ? _a : defaultValue;
-  }
-}
-
-// src/hooks/usePlasmicDataOp.tsx
-function makeCacheKey(dataOp, opts) {
-  const queryDependencies = JSON.stringify({
-    sourceId: dataOp.sourceId,
-    opId: dataOp.opId,
-    args: dataOp.userArgs,
-    userAuthToken: opts == null ? void 0 : opts.userAuthToken,
-    paginate: opts == null ? void 0 : opts.paginate
-  });
-  return dataOp.cacheKey ? `${dataOp.cacheKey}${queryDependencies}` : queryDependencies;
-}
-function usePlasmicInvalidate() {
-  const { cache, fallback, mutate } = (0, import_query4.usePlasmicDataConfig)();
-  return (invalidatedKeys) => __async(null, null, function* () {
-    const getKeysToInvalidate = () => {
-      var _a, _b;
-      if (!invalidatedKeys) {
-        return [];
-      }
-      const allKeys = Array.from(
-        /* @__PURE__ */ new Set([
-          ...Array.from(cache.keys()),
-          ...fallback ? Object.keys(fallback) : [],
-          // If this is running within the Studio, we also take the
-          // opportunity to invalidate the Studio cache. The keys that
-          // Studio may have can be a superset of `cache` here, because
-          // `cache` is updated as swr hooks are mounted and unmounted,
-          // but Studio's data cache keys don't get removed when hooks
-          // are unmounted. This makes it possible for Studio to hold
-          // onto a stale cache entry that doesn't get invalidated.
-          // For example, Studio may render page1, with key X, then goes
-          // to page 2, which performs a mutate. At this point, Studio
-          // has a cache entry for key X, but `cache` does not, because
-          // page2 does not use that query. But page 2 may perform a
-          // mutation that invalidates X. So we need to invalidate not
-          // only keys in `cache`, but also keys that Studio is still
-          // holding onto.
-          ...(_b = (_a = globalThis.__PLASMIC_GET_ALL_CACHE_KEYS) == null ? void 0 : _a.call(globalThis)) != null ? _b : []
-        ])
-      ).filter((key) => typeof key === "string");
-      if (invalidatedKeys.includes("plasmic_refresh_all")) {
-        return allKeys;
-      }
-      return allKeys.filter(
-        (key) => invalidatedKeys.some((k) => key.includes(`.$.${k}.$.`))
-      );
-    };
-    const keys = getKeysToInvalidate();
-    if (keys.length === 0) {
-      return;
-    }
-    const invalidateKey = (key) => __async(null, null, function* () {
-      const studioInvalidate = globalThis.__PLASMIC_MUTATE_DATA_OP;
-      if (studioInvalidate) {
-        yield studioInvalidate(key);
-      }
-      return mutate(key);
-    });
-    return yield Promise.all(keys.map((key) => invalidateKey(key)));
-  });
-}
-function resolveDataOp(dataOp) {
-  if (typeof dataOp === "function") {
-    try {
-      return dataOp();
-    } catch (err) {
-      if (isPlasmicUndefinedDataErrorPromise(err)) {
-        return err;
-      }
-      return null;
-    }
-  } else {
-    return dataOp;
-  }
-}
-function usePlasmicDataOp(dataOp, opts) {
-  const resolvedDataOp = resolveDataOp(dataOp);
-  const ctx = (0, import_data_sources_context.usePlasmicDataSourceContext)();
-  const key = !resolvedDataOp || isPlasmicUndefinedDataErrorPromise(resolvedDataOp) ? null : makeCacheKey(resolvedDataOp, {
-    paginate: opts == null ? void 0 : opts.paginate,
-    userAuthToken: ctx == null ? void 0 : ctx.userAuthToken
-  });
-  const fetcher = (op) => {
-    return executePlasmicDataOp(op, {
-      userAuthToken: (ctx == null ? void 0 : ctx.userAuthToken) || void 0,
-      user: ctx == null ? void 0 : ctx.user,
-      paginate: opts == null ? void 0 : opts.paginate
-    });
-  };
-  const resultMapper = (result) => {
-    var _a;
-    return __spreadValues(__spreadValues({}, (_a = result.data) != null ? _a : {}), pick(result, "error", "isLoading"));
-  };
-  return usePlasmicFetch(
-    key,
-    resolvedDataOp,
-    fetcher,
-    resultMapper,
-    ["data", "schema", "error"],
-    {
-      noUndefinedDataProxy: opts == null ? void 0 : opts.noUndefinedDataProxy
-    }
-  );
-}
-function usePlasmicDataMutationOp(dataOp) {
-  const ctx = (0, import_data_sources_context.usePlasmicDataSourceContext)();
-  const userToken = ctx == null ? void 0 : ctx.userAuthToken;
-  const getRealDataOp = React4.useCallback(() => __async(null, null, function* () {
-    const tryGetRealDataOp = () => __async(null, null, function* () {
-      const resolved = resolveDataOp(dataOp);
-      if (!resolved) {
-        return null;
-      } else if (isPlasmicUndefinedDataErrorPromise(resolved)) {
-        yield resolved;
-        return tryGetRealDataOp();
-      } else {
-        return resolved;
-      }
-    });
-    return yield tryGetRealDataOp();
-  }), [dataOp]);
-  return React4.useCallback(() => __async(null, null, function* () {
-    var _a;
-    const { sourceId, opId, userArgs } = (_a = yield getRealDataOp()) != null ? _a : {};
-    if (!sourceId || !opId) {
-      return void 0;
-    }
-    return executePlasmicDataOp(
-      { sourceId, opId, userArgs },
-      {
-        userAuthToken: userToken || void 0,
-        user: ctx == null ? void 0 : ctx.user
-      }
-    );
-  }), [getRealDataOp, userToken]);
-}
-
-// src/components/Fetcher.tsx
 function Fetcher(props) {
   var _a;
   const { dataOp, children, name, pageIndex, pageSize } = props;