@plasmicpkgs/plasmic-query 0.0.80 → 0.0.83

package/dist/Fetcher.d.ts

@@ -1,25 +1,48 @@
 import registerComponent, { ComponentMeta } from "@plasmicapp/host/registerComponent";
 import { ReactNode } from "react";
-export interface FetchProps {
-    url: string;
-    method?: string;
-    body?: any;
-    headers?: any;
-}
-export interface DataFetcherProps extends FetchProps {
+export interface GenericFetcherProps {
     children?: ReactNode;
-    spinner?: ReactNode;
+    loadingDisplay?: ReactNode;
     previewSpinner?: boolean;
     errorDisplay?: ReactNode;
     previewErrorDisplay?: boolean;
-    queryKey?: string;
     dataName?: string;
+    noLayout?: boolean;
+    className?: string;
+}
+declare type PropMetas<P> = ComponentMeta<P>["props"];
+export declare const genericFetcherPropsMeta: PropMetas<GenericFetcherProps>;
+export declare function GenericFetcherShell<T>({ result, children, loadingDisplay, previewSpinner, errorDisplay, previewErrorDisplay, dataName, noLayout, className, }: GenericFetcherProps & {
+    result: {
+        data?: T;
+        error?: Error;
+        isLoading?: boolean;
+    };
+}): JSX.Element;
+export interface FetchProps {
+    url?: string;
+    method?: string;
+    body?: string | {};
+    headers?: Record<string, string>;
 }
-export declare function DataFetcher({ queryKey, children, spinner, previewSpinner, errorDisplay, previewErrorDisplay, dataName, ...fetchProps }: DataFetcherProps): JSX.Element;
-export interface PlasmicQueryProviderProps {
-    children: ReactNode;
+export interface DataFetcherProps extends FetchProps, GenericFetcherProps {
+    queryKey?: string;
 }
+export declare function DataFetcher(props: DataFetcherProps): JSX.Element;
 export declare const dataFetcherMeta: ComponentMeta<DataFetcherProps>;
 export declare function registerDataFetcher(loader?: {
     registerComponent: typeof registerComponent;
 }, customDataFetcherMeta?: ComponentMeta<DataFetcherProps>): void;
+export interface GraphqlFetcherProps extends GenericFetcherProps, Omit<FetchProps, "body"> {
+    query?: string;
+    queryKey?: string;
+}
+export declare function GraphqlFetcher(props: GraphqlFetcherProps): JSX.Element;
+export declare const graphqlFetcherMeta: ComponentMeta<GraphqlFetcherProps>;
+export declare function registerGraphqlFetcher(loader?: {
+    registerComponent: typeof registerComponent;
+}, customDataFetcherMeta?: ComponentMeta<GraphqlFetcherProps>): void;
+export declare function registerAll(loader?: {
+    registerComponent: typeof registerComponent;
+}): void;
+export {};

package/dist/plasmic-query.cjs.development.js

@@ -45,6 +45,24 @@ function _asyncToGenerator(fn) {
   };
 }
 
+function _extends() {
+  _extends = Object.assign || 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);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -789,119 +807,194 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   }
 });
 
-var _excluded = ["queryKey", "children", "spinner", "previewSpinner", "errorDisplay", "previewErrorDisplay", "dataName"];
+var _excluded = ["url", "query", "method", "headers", "queryKey"];
+var genericFetcherPropsMeta = {
+  children: "slot",
+  loadingDisplay: {
+    type: "slot",
+    defaultValue: "Loading..."
+  },
+  errorDisplay: {
+    type: "slot",
+    defaultValue: "Error fetching data"
+  },
+  dataName: {
+    type: "string",
+    defaultValue: "myVariable",
+    description: "Variable name to store the fetched data in"
+  },
+  previewSpinner: {
+    type: "boolean",
+    description: "Force preview the loading state",
+    displayName: "Preview loading"
+  },
+  previewErrorDisplay: {
+    type: "boolean",
+    description: "Force preview the error display",
+    displayName: "Preview error"
+  },
+  noLayout: {
+    type: "boolean",
+    displayName: "No layout",
+    description: "When set, CMS Data Loader will not layout its children; instead, the layout set on its parent element will be used. Useful if you want to set flex gap or control container tag type.",
+    defaultValue: false
+  }
+};
+function GenericFetcherShell(_ref) {
+  var result = _ref.result,
+      children = _ref.children,
+      loadingDisplay = _ref.loadingDisplay,
+      previewSpinner = _ref.previewSpinner,
+      errorDisplay = _ref.errorDisplay,
+      previewErrorDisplay = _ref.previewErrorDisplay,
+      dataName = _ref.dataName,
+      noLayout = _ref.noLayout,
+      className = _ref.className;
+  var inEditor = !!host.usePlasmicCanvasContext();
+
+  if (inEditor && previewSpinner || !("error" in result) && !("data" in result)) {
+    return React.createElement(React.Fragment, null, loadingDisplay != null ? loadingDisplay : null);
+  } else if (inEditor && previewErrorDisplay || "error" in result) {
+    return React.createElement(React.Fragment, null, errorDisplay != null ? errorDisplay : null);
+  } else {
+    var content = React.createElement(host.DataProvider, {
+      name: dataName,
+      data: result.data
+    }, children);
+    return noLayout ? content : React.createElement("div", {
+      className: className
+    }, content);
+  }
+}
+/**
+ * Tries to return the JSON response, or else returns an object with a text key containing the response body text.
+ */
 
 function performFetch(_x) {
   return _performFetch.apply(this, arguments);
 }
 
 function _performFetch() {
-  _performFetch = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref) {
+  _performFetch = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
     var url, method, body, headers, response, text;
     return runtime_1.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            url = _ref.url, method = _ref.method, body = _ref.body, headers = _ref.headers;
-            _context.next = 3;
+            url = _ref2.url, method = _ref2.method, body = _ref2.body, headers = _ref2.headers;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            throw new Error("Please specify a URL to fetch");
+
+          case 3:
+            _context.next = 5;
             return fetch(url, {
               method: method,
               headers: headers,
-              body: body
+              body: body === undefined ? body : typeof body === "string" ? body : JSON.stringify(body)
             });
 
-          case 3:
+          case 5:
             response = _context.sent;
 
             if (response.ok) {
-              _context.next = 6;
+              _context.next = 8;
               break;
             }
 
             throw new Error(response.statusText);
 
-          case 6:
-            _context.next = 8;
+          case 8:
+            _context.next = 10;
             return response.text();
 
-          case 8:
+          case 10:
             text = _context.sent;
-            _context.prev = 9;
+            _context.prev = 11;
             return _context.abrupt("return", JSON.parse(text));
 
-          case 13:
-            _context.prev = 13;
-            _context.t0 = _context["catch"](9);
+          case 15:
+            _context.prev = 15;
+            _context.t0 = _context["catch"](11);
             return _context.abrupt("return", {
               text: text
             });
 
-          case 16:
+          case 18:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[9, 13]]);
+    }, _callee, null, [[11, 15]]);
   }));
   return _performFetch.apply(this, arguments);
 }
 
-function DataFetcher(_ref2) {
-  var queryKey = _ref2.queryKey,
-      children = _ref2.children,
-      spinner = _ref2.spinner,
-      errorDisplay = _ref2.errorDisplay,
-      dataName = _ref2.dataName,
-      fetchProps = _objectWithoutPropertiesLoose(_ref2, _excluded);
-
-  var query$1 = query.usePlasmicQueryData(queryKey != null ? queryKey : JSON.stringify(fetchProps), function () {
+function DataFetcher(props) {
+  var url = props.url,
+      method = props.method,
+      body = props.body,
+      headers = props.headers,
+      queryKey = props.queryKey;
+  var fetchProps = {
+    url: url,
+    method: method,
+    body: body,
+    headers: headers
+  };
+  var result = query.usePlasmicQueryData(queryKey != null ? queryKey : JSON.stringify(_extends({
+    type: "DataFetcher"
+  }, fetchProps)), function () {
     return performFetch(fetchProps);
   });
-
-  if (!("error" in query$1) && !("data" in query$1)) {
-    return React.createElement(React.Fragment, null, spinner != null ? spinner : null);
-  } else if ("error" in query$1) {
-    return React.createElement(React.Fragment, null, errorDisplay != null ? errorDisplay : null);
-  } else {
-    return React.createElement(host.DataProvider, {
-      name: dataName != null ? dataName : queryKey,
-      data: query$1.data
-    }, children);
-  }
+  return React.createElement(GenericFetcherShell, Object.assign({
+    result: result
+  }, props));
 }
-var dataFetcherMeta = {
-  name: "hostless-plasmic-query-data-fetcher",
-  displayName: "Data Fetcher",
-  importName: "DataFetcher",
-  importPath: "@plasmicpkgs/react-query",
-  providesData: true,
-  props: {
+
+function mkFetchProps(defaultUrl, defaultMethod) {
+  return {
     url: {
       type: "string",
-      defaultValue: "https://api.github.com/users/plasmicapp/repos",
+      defaultValue: defaultUrl,
       description: "Where to fetch the data from"
     },
     method: {
       type: "choice",
       options: ["GET", "DELETE", "CONNECT", "HEAD", "OPTIONS", "POST", "PUT", "TRACE"],
-      defaultValue: "GET",
-      description: "Method to be used when fetching"
+      defaultValue: defaultMethod,
+      description: "Method to use when fetching"
     },
     headers: {
       type: "object",
-      description: "JSON object of the headers to be sent with the request"
+      description: "JSON object of the headers to be sent with the request",
+      defaultValue: {
+        "Content-type": "application/json"
+      }
     },
+    queryKey: {
+      type: "string",
+      description: "A globally unique ID for this query, used for invalidating queries"
+    }
+  };
+}
+
+var dataFetcherMeta = {
+  name: "hostless-plasmic-query-data-fetcher",
+  displayName: "Data Fetcher",
+  importName: "DataFetcher",
+  importPath: "@plasmicpkgs/plasmic-query",
+  providesData: true,
+  props: /*#__PURE__*/_extends({}, /*#__PURE__*/mkFetchProps("https://api.github.com/users/plasmicapp/repos", "GET"), {
     body: {
       type: "object",
       description: "JSON object of the body to be sent with the request"
-    },
-    dataName: {
-      type: "string",
-      defaultValue: "myVariable",
-      description: "Variable name to store the fetched data in"
-    },
-    children: "slot"
-  },
+    }
+  }, genericFetcherPropsMeta),
   defaultStyles: {
     maxWidth: "100%"
   }
@@ -913,8 +1006,88 @@ function registerDataFetcher(loader, customDataFetcherMeta) {
     registerComponent(DataFetcher, customDataFetcherMeta != null ? customDataFetcherMeta : dataFetcherMeta);
   }
 }
+function GraphqlFetcher(props) {
+  var query$1 = props.query,
+      url = props.url,
+      method = props.method,
+      headers = props.headers,
+      queryKey = props.queryKey;
+  var fetchProps = {
+    body: query$1,
+    url: url,
+    method: method,
+    headers: headers
+  };
+  var result = query.usePlasmicQueryData(queryKey != null ? queryKey : JSON.stringify(_extends({
+    type: "GraphqlFetcher"
+  }, fetchProps)), function () {
+    return performFetch(fetchProps);
+  });
+  return React.createElement(GenericFetcherShell, Object.assign({
+    result: result
+  }, props));
+}
+var graphqlFetcherMeta = {
+  name: "hostless-plasmic-query-graphql-fetcher",
+  displayName: "GraphQL Fetcher",
+  importName: "GraphqlFetcher",
+  importPath: "@plasmicpkgs/plasmic-query",
+  providesData: true,
+  props: /*#__PURE__*/function () {
+    var gqlMetas = {
+      query: {
+        type: "code",
+        lang: "graphql",
+        endpoint: function endpoint(props) {
+          var _props$url;
+
+          return (_props$url = props.url) != null ? _props$url : "";
+        },
+        defaultValue: /*#__PURE__*/JSON.stringify({
+          query: "{\n  allPokemon {\n    name\n    sprites {\n      front_default\n    }\n  }\n}"
+        })
+      }
+    }; // Reorder the props
+
+    var _mkFetchProps$gqlMeta = /*#__PURE__*/_extends({}, /*#__PURE__*/mkFetchProps("https://dex-server.herokuapp.com/", "POST"), gqlMetas, genericFetcherPropsMeta),
+        url = _mkFetchProps$gqlMeta.url,
+        query = _mkFetchProps$gqlMeta.query,
+        method = _mkFetchProps$gqlMeta.method,
+        headers = _mkFetchProps$gqlMeta.headers,
+        queryKey = _mkFetchProps$gqlMeta.queryKey,
+        rest = /*#__PURE__*/_objectWithoutPropertiesLoose(_mkFetchProps$gqlMeta, _excluded);
+
+    return _extends({
+      url: url,
+      query: query,
+      method: method,
+      headers: headers,
+      queryKey: queryKey
+    }, rest);
+  }(),
+  defaultStyles: {
+    maxWidth: "100%"
+  }
+};
+function registerGraphqlFetcher(loader, customDataFetcherMeta) {
+  if (loader) {
+    loader.registerComponent(GraphqlFetcher, customDataFetcherMeta != null ? customDataFetcherMeta : graphqlFetcherMeta);
+  } else {
+    registerComponent(GraphqlFetcher, customDataFetcherMeta != null ? customDataFetcherMeta : graphqlFetcherMeta);
+  }
+}
+function registerAll(loader) {
+  registerDataFetcher(loader);
+  registerGraphqlFetcher(loader);
+}
 
 exports.DataFetcher = DataFetcher;
+exports.GenericFetcherShell = GenericFetcherShell;
+exports.GraphqlFetcher = GraphqlFetcher;
 exports.dataFetcherMeta = dataFetcherMeta;
+exports.genericFetcherPropsMeta = genericFetcherPropsMeta;
+exports.graphqlFetcherMeta = graphqlFetcherMeta;
+exports.registerAll = registerAll;
 exports.registerDataFetcher = registerDataFetcher;
+exports.registerGraphqlFetcher = registerGraphqlFetcher;
 //# sourceMappingURL=plasmic-query.cjs.development.js.map