@tinacms/graphql 0.60.5 → 0.60.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # tina-graphql
 
+## 0.60.6
+
+### Patch Changes
+
+- e2aafcd93: Add more GraphQL variables to the generated queries.
+- a20fed8b7: Resolve Cloud URLs to Relative URLs when saving TinaCloud's media
+
+  Introduces a pair of functions (inside `media-utils.ts`) for handling URLs provided by TinaCloud (`resolveMediaCloudToRelative` and `resolveMediaRelativeToCloud`).
+
+  These are used in conjuction with two pairs of functions:
+
+  - When providing data to the preview: `resolveFieldData` and `parseMDX`
+  - When saving data to the document: `buildFieldMutations` and `stringifyMDX`
+
+  I also introduced tests around `media-utils.ts` (`media-utils.test.ts`).
+
 ## 0.60.5
 
 ### Patch Changes

package/dist/ast-builder/index.d.ts

@@ -126,9 +126,11 @@ export declare const astBuilder: {
         queryName: string;
         fragName: string;
     }) => OperationDefinitionNode;
-    ListQueryOperationDefinition: ({ queryName, fragName, }: {
+    ListQueryOperationDefinition: ({ queryName, fragName, filterType, dataLayer, }: {
         queryName: string;
         fragName: string;
+        filterType: string;
+        dataLayer: boolean;
     }) => OperationDefinitionNode;
     toGraphQLAst: (ast: {
         globalTemplates: TypeDefinitionNode[];

package/dist/index.js

@@ -10954,8 +10954,208 @@ var astBuilder = {
   },
   ListQueryOperationDefinition: ({
     queryName,
-    fragName
+    fragName,
+    filterType,
+    dataLayer
   }) => {
+    const variableDefinitions = [
+      {
+        kind: "VariableDefinition",
+        variable: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "before"
+          }
+        },
+        type: {
+          kind: "NamedType",
+          name: {
+            kind: "Name",
+            value: "String"
+          }
+        },
+        directives: []
+      },
+      {
+        kind: "VariableDefinition",
+        variable: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "after"
+          }
+        },
+        type: {
+          kind: "NamedType",
+          name: {
+            kind: "Name",
+            value: "String"
+          }
+        },
+        directives: []
+      },
+      {
+        kind: "VariableDefinition",
+        variable: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "first"
+          }
+        },
+        type: {
+          kind: "NamedType",
+          name: {
+            kind: "Name",
+            value: "Float"
+          }
+        },
+        directives: []
+      },
+      {
+        kind: "VariableDefinition",
+        variable: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "last"
+          }
+        },
+        type: {
+          kind: "NamedType",
+          name: {
+            kind: "Name",
+            value: "Float"
+          }
+        },
+        directives: []
+      },
+      {
+        kind: "VariableDefinition",
+        variable: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "sort"
+          }
+        },
+        type: {
+          kind: "NamedType",
+          name: {
+            kind: "Name",
+            value: "String"
+          }
+        },
+        directives: []
+      }
+    ];
+    const queryArguments = [
+      {
+        kind: "Argument",
+        name: {
+          kind: "Name",
+          value: "before"
+        },
+        value: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "before"
+          }
+        }
+      },
+      {
+        kind: "Argument",
+        name: {
+          kind: "Name",
+          value: "after"
+        },
+        value: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "after"
+          }
+        }
+      },
+      {
+        kind: "Argument",
+        name: {
+          kind: "Name",
+          value: "first"
+        },
+        value: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "first"
+          }
+        }
+      },
+      {
+        kind: "Argument",
+        name: {
+          kind: "Name",
+          value: "last"
+        },
+        value: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "last"
+          }
+        }
+      },
+      {
+        kind: "Argument",
+        name: {
+          kind: "Name",
+          value: "sort"
+        },
+        value: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "sort"
+          }
+        }
+      }
+    ];
+    if (dataLayer) {
+      queryArguments.push({
+        kind: "Argument",
+        name: {
+          kind: "Name",
+          value: "filter"
+        },
+        value: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "filter"
+          }
+        }
+      });
+      variableDefinitions.push({
+        kind: "VariableDefinition",
+        variable: {
+          kind: "Variable",
+          name: {
+            kind: "Name",
+            value: "filter"
+          }
+        },
+        type: {
+          kind: "NamedType",
+          name: {
+            kind: "Name",
+            value: filterType
+          }
+        },
+        directives: []
+      });
+    }
     return {
       kind: "OperationDefinition",
       operation: "query",
@@ -10963,7 +11163,7 @@ var astBuilder = {
         kind: "Name",
         value: queryName
       },
-      variableDefinitions: [],
+      variableDefinitions,
       directives: [],
       selectionSet: {
         kind: "SelectionSet",
@@ -10974,7 +11174,7 @@ var astBuilder = {
               kind: "Name",
               value: queryName
             },
-            arguments: [],
+            arguments: queryArguments,
             directives: [],
             selectionSet: {
               kind: "SelectionSet",
@@ -12480,7 +12680,7 @@ var validateField = async (field) => {
 
 // pnp:/home/runner/work/tinacms/tinacms/packages/@tinacms/graphql/package.json
 var name = "@tinacms/graphql";
-var version = "0.60.5";
+var version = "0.60.6";
 var main = "dist/index.js";
 var typings = "dist/index.d.ts";
 var files = [
@@ -12850,13 +13050,17 @@ var _buildQueries = async (builder, tinaSchema, rootPath) => {
   const operationsDefinitions = [];
   const collections = tinaSchema.getCollections();
   await sequential(collections, async (collection) => {
+    var _a, _b, _c;
     const queryName = NAMER.queryName(collection.namespace);
     const queryListName = NAMER.generateQueryListName(collection.namespace);
+    const queryFilterTypeName = NAMER.dataFilterTypeName(collection.namespace);
     const fragName = NAMER.fragmentName(collection.namespace);
     operationsDefinitions.push(astBuilder.QueryOperationDefinition({ fragName, queryName }));
     operationsDefinitions.push(astBuilder.ListQueryOperationDefinition({
       fragName,
-      queryName: queryListName
+      queryName: queryListName,
+      filterType: queryFilterTypeName,
+      dataLayer: Boolean((_c = (_b = (_a = tinaSchema.config) == null ? void 0 : _a.meta) == null ? void 0 : _b.flags) == null ? void 0 : _c.find((x) => x === "experimentalData"))
     }));
   });
   const queryDoc = {
@@ -20222,11 +20426,42 @@ var visit = function(tree, test, visitor, reverse) {
 
 // pnp:/home/runner/work/tinacms/tinacms/packages/@tinacms/graphql/src/mdx/parse.ts
 var import_lodash4 = __toModule(require("lodash"));
-var parseMDX = (value, field) => {
+
+// pnp:/home/runner/work/tinacms/tinacms/packages/@tinacms/graphql/src/resolver/media-utils.ts
+var resolveMediaCloudToRelative = (value, config = { useRelativeMedia: true }) => {
+  if (config && value) {
+    if (config.useRelativeMedia === true) {
+      return value;
+    } else {
+      const assetsURL = `https://${config.assetsHost}/${config.clientId}`;
+      if (typeof value === "string" && value.includes(assetsURL)) {
+        return value.replace(assetsURL, "");
+      } else {
+        return value;
+      }
+    }
+  } else {
+    return value;
+  }
+};
+var resolveMediaRelativeToCloud = (value, config = { useRelativeMedia: true }) => {
+  if (config && value) {
+    if (config.useRelativeMedia === true) {
+      return value;
+    } else {
+      return `https://${config.assetsHost}/${config.clientId}${value}`;
+    }
+  } else {
+    return value;
+  }
+};
+
+// pnp:/home/runner/work/tinacms/tinacms/packages/@tinacms/graphql/src/mdx/parse.ts
+var parseMDX = (value, field, graphQLconfig) => {
   const tree = unified().use(remark_parse_default).use(import_remark_mdx.default).parse(value);
-  return parseMDXInner(tree, field);
+  return parseMDXInner(tree, field, graphQLconfig);
 };
-var parseMDXInner = (tree, field) => {
+var parseMDXInner = (tree, field, graphQLconfig) => {
   visit(tree, (node) => {
     delete node.position;
   });
@@ -20234,7 +20469,7 @@ var parseMDXInner = (tree, field) => {
     var _a;
     let props = {};
     if (!node.name) {
-      props = parseMDXInner({ type: "root", children: node.children }, field);
+      props = parseMDXInner({ type: "root", children: node.children }, field, graphQLconfig);
     }
     const template = (_a = field.templates) == null ? void 0 : _a.find((template2) => {
       const templateName = typeof template2 === "string" ? template2 : template2.name;
@@ -20265,7 +20500,7 @@ var parseMDXInner = (tree, field) => {
           if (!field2) {
             throw new Error(`Unknown property '${attribute.name}' for embedded structure '${node.name}'`);
           }
-          parseField(attribute, field2, props);
+          parseField(attribute, field2, props, graphQLconfig);
         }
       } else {
         console.log(`Not sure what this is, type: ${attribute.type}`);
@@ -20274,15 +20509,19 @@ var parseMDXInner = (tree, field) => {
     delete node.attributes;
     node.props = props;
   });
-  const slateTree = tree.children.map(remarkToSlate);
+  const slateTree = tree.children.map((node) => remarkToSlate(node, graphQLconfig));
   return { type: "root", children: slateTree };
 };
-var parseField = (attribute, field, props) => {
+var parseField = (attribute, field, props, graphQLconfig) => {
   var _a, _b;
   switch (field.type) {
     case "boolean":
     case "datetime":
+      props[field.name] = attribute.value;
+      break;
     case "image":
+      props[field.name] = resolveMediaRelativeToCloud(attribute.value, graphQLconfig);
+      break;
     case "number":
     case "string":
       if (field.list) {
@@ -20344,7 +20583,7 @@ var parseField = (attribute, field, props) => {
                       throw new Error(`Global fields not supported at this time`);
                     }
                     field.fields.forEach((field2) => {
-                      parseField(property, field2, objectProps);
+                      parseField(property, field2, objectProps, graphQLconfig);
                     });
                   }
                 });
@@ -20366,7 +20605,7 @@ var parseField = (attribute, field, props) => {
                           throw new Error(`Global fields not supported at this time`);
                         }
                         field.fields.forEach((field2) => {
-                          parseField(property, field2, objectProps);
+                          parseField(property, field2, objectProps, graphQLconfig);
                         });
                       }
                       if (field.templates) {
@@ -20375,7 +20614,7 @@ var parseField = (attribute, field, props) => {
                             throw new Error(`Global fields not supported at this time`);
                           }
                           fieldTemplate.fields.forEach((field2) => {
-                            parseField(property, field2, objectProps);
+                            parseField(property, field2, objectProps, graphQLconfig);
                           });
                         });
                       }
@@ -20398,13 +20637,13 @@ var parseField = (attribute, field, props) => {
       if (attribute.value) {
         if (field.name === "children") {
           if (Array.isArray(attribute.value)) {
-            props[field.name] = parseMDXInner({ type: "root", children: attribute.value }, field);
+            props[field.name] = parseMDXInner({ type: "root", children: attribute.value }, field, graphQLconfig);
           } else {
             throw Error(`Expected an array of MDX strings for rich-text field with the special name 'children'`);
           }
         } else {
           try {
-            const mdx2 = parseMDX(attribute.value.value, field);
+            const mdx2 = parseMDX(attribute.value.value, field, graphQLconfig);
             props[field.name] = mdx2.children[0].props;
           } catch (e) {
             console.log(e);
@@ -20475,7 +20714,7 @@ var defaultNodeTypes = {
   break: "break",
   image: plateElements.ELEMENT_IMAGE
 };
-function remarkToSlate(node) {
+function remarkToSlate(node, graphQLconfig) {
   const types = __spreadProps(__spreadValues({}, defaultNodeTypes), {
     heading: __spreadValues({}, defaultNodeTypes.heading)
   });
@@ -20483,12 +20722,12 @@ function remarkToSlate(node) {
     case "heading":
       return {
         type: types.heading[node.depth],
-        children: node.children.map(remarkToSlate)
+        children: node.children.map((node2) => remarkToSlate(node2, graphQLconfig))
       };
     case "list":
       return {
         type: node.ordered ? types.ol_list : types.ul_list,
-        children: node.children.map(remarkToSlate)
+        children: node.children.map((node2) => remarkToSlate(node2, graphQLconfig))
       };
     case "listItem":
       const realChildren = [];
@@ -20496,12 +20735,12 @@ function remarkToSlate(node) {
         if (child.type === "list") {
           realChildren.push({
             type: child.ordered ? types.ol_list : types.ul_list,
-            children: child.children.map(remarkToSlate)
+            children: child.children.map((node2) => remarkToSlate(node2, graphQLconfig))
           });
         } else {
           realChildren.push({
             type: plateElements.ELEMENT_LIC,
-            children: child.children.map(remarkToSlate)
+            children: child.children.map((node2) => remarkToSlate(node2, graphQLconfig))
           });
         }
       });
@@ -20512,25 +20751,26 @@ function remarkToSlate(node) {
     case "paragraph":
       return {
         type: types.paragraph,
-        children: node.children.map(remarkToSlate)
+        children: node.children.map((node2) => remarkToSlate(node2, graphQLconfig))
       };
     case "link":
       return {
         type: types.link,
         url: node.url,
-        children: node.children.map(remarkToSlate)
+        children: node.children.map((node2) => remarkToSlate(node2, graphQLconfig))
       };
     case "image":
+      const url = resolveMediaRelativeToCloud(node.url, graphQLconfig);
       return {
         type: types.image,
-        url: node.url,
+        url,
         alt: node.alt,
         caption: node.title
       };
     case "blockquote":
       return {
         type: types.block_quote,
-        children: node.children.map(remarkToSlate)
+        children: node.children.map((node2) => remarkToSlate(node2, graphQLconfig))
       };
     case "code":
       return {
@@ -21991,10 +22231,10 @@ var mdxToMarkdown = {
 };
 
 // pnp:/home/runner/work/tinacms/tinacms/packages/@tinacms/graphql/src/mdx/stringify.ts
-var stringifyMDX = (value, field) => {
+var stringifyMDX = (value, field, graphQLconfig) => {
   const slateTree = value.children;
   try {
-    const tree = stringifyChildren(slateTree, field);
+    const tree = stringifyChildren(slateTree, field, graphQLconfig);
     const out = toMarkdown({
       type: "root",
       children: tree
@@ -22012,13 +22252,13 @@ var allChildrenEmpty = (children) => {
   }
   return false;
 };
-var stringifyChildren = (children, field) => {
+var stringifyChildren = (children, field, graphQLconfig) => {
   if (!children) {
     return [];
   }
-  return children.map((child) => stringify(child, field)).filter(Boolean);
+  return children.map((child) => stringify(child, field, graphQLconfig)).filter(Boolean);
 };
-var stringify = (node, field) => {
+var stringify = (node, field, graphQLconfig) => {
   var _a;
   if (!node.type) {
     if (node == null ? void 0 : node.code) {
@@ -22044,40 +22284,40 @@ var stringify = (node, field) => {
       return {
         type: "heading",
         depth: 1,
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_H2:
       return {
         type: "heading",
         depth: 2,
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_H3:
       return {
         type: "heading",
         depth: 3,
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_H4:
       return {
         type: "heading",
         depth: 4,
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_H5:
       return {
         type: "heading",
         depth: 5,
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_H6:
       return {
         type: "heading",
         depth: 6,
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_PARAGRAPH:
-      const children = stringifyChildren(node.children, field);
+      const children = stringifyChildren(node.children, field, graphQLconfig);
       if (allChildrenEmpty(children)) {
         return false;
       }
@@ -22097,7 +22337,7 @@ var stringify = (node, field) => {
         ordered: false,
         spread: false,
         check: null,
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_OL:
       return {
@@ -22105,7 +22345,7 @@ var stringify = (node, field) => {
         ordered: true,
         spread: false,
         check: null,
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_LI:
       const realChildren = [];
@@ -22128,21 +22368,22 @@ var stringify = (node, field) => {
         spread: false,
         check: null,
         children: [
-          ...stringifyChildren([p], field),
-          ...stringifyChildren(extraChildren, field)
+          ...stringifyChildren([p], field, graphQLconfig),
+          ...stringifyChildren(extraChildren, field, graphQLconfig)
         ]
       };
     case plateElements.ELEMENT_LIC:
       return {
         type: "paragraph",
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_IMAGE:
+      const url = resolveMediaCloudToRelative(node.url, graphQLconfig);
       return {
         type: "image",
         title: node.caption,
         alt: node.alt,
-        url: node.url
+        url
       };
     case plateElements.ELEMENT_HR:
       return {
@@ -22153,12 +22394,12 @@ var stringify = (node, field) => {
         type: "link",
         url: node.url,
         title: node.title,
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case plateElements.ELEMENT_BLOCKQUOTE:
       return {
         type: "blockquote",
-        children: stringifyChildren(node.children, field)
+        children: stringifyChildren(node.children, field, graphQLconfig)
       };
     case "mdxJsxTextElement":
     case "mdxJsxFlowElement":
@@ -22323,7 +22564,7 @@ var stringify = (node, field) => {
                 }
                 break;
               case "rich-text":
-                const tree = stringifyChildren(value.children, field2);
+                const tree = stringifyChildren(value.children, field2, graphQLconfig);
                 if (field2.name === "children") {
                   children2 = tree;
                 } else {
@@ -22844,15 +23085,16 @@ var Resolver = class {
           case "string":
           case "boolean":
           case "number":
-          case "image":
             accum[fieldName] = fieldValue;
             break;
+          case "image":
+            accum[fieldName] = resolveMediaCloudToRelative(fieldValue, this.config);
+            break;
           case "object":
             accum[fieldName] = this.buildObjectMutations(fieldValue, field);
             break;
           case "rich-text":
-            field;
-            accum[fieldName] = stringifyMDX(fieldValue, field);
+            accum[fieldName] = stringifyMDX(fieldValue, field, this.config);
             break;
           case "reference":
             accum[fieldName] = fieldValue;
@@ -22885,18 +23127,10 @@ var Resolver = class {
           accumulator[field.name] = value;
           break;
         case "image":
-          if (this.config) {
-            if (this.config.useRelativeMedia === true) {
-              accumulator[field.name] = value;
-            } else {
-              accumulator[field.name] = `https://${this.config.assetsHost}/${this.config.clientId}/${value}`;
-            }
-          } else {
-            accumulator[field.name] = value;
-          }
+          accumulator[field.name] = resolveMediaRelativeToCloud(value, this.config);
           break;
         case "rich-text":
-          const tree = parseMDX(value, field);
+          const tree = parseMDX(value, field, this.config);
           accumulator[field.name] = tree;
           break;
         case "object":

package/dist/mdx/parse.d.ts

@@ -16,8 +16,8 @@ limitations under the License.
 
 */
 import type { Content } from 'mdast';
-import type { RichTypeInner } from '../types';
-export declare const parseMDX: (value: string, field: RichTypeInner) => {
+import type { GraphQLConfig, RichTypeInner } from '../types';
+export declare const parseMDX: (value: string, field: RichTypeInner, graphQLconfig: GraphQLConfig) => {
     type: string;
     children: any;
 };
@@ -70,7 +70,7 @@ export declare const parseMDX: (value: string, field: RichTypeInner) => {
  * 2. We don't need to do any client-side parsing. Since TinaMarkdown and the slate editor work with the same
  * format we can just allow Tina to do it's thing and update the form valuse with no additional work.
  */
-export declare const parseMDXInner: (tree: any, field: RichTypeInner) => {
+export declare const parseMDXInner: (tree: any, field: RichTypeInner, graphQLconfig: GraphQLConfig) => {
     type: string;
     children: any;
 };
@@ -226,5 +226,5 @@ export declare const plateElements: {
     MARK_UNDERLINE: string;
 };
 export declare const defaultNodeTypes: NodeTypes;
-export default function remarkToSlate(node: MdxAstNode): any;
+export default function remarkToSlate(node: MdxAstNode, graphQLconfig: GraphQLConfig): any;
 export {};

package/dist/mdx/stringify.d.ts

@@ -15,10 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 
 */
-import type { RichTypeInner } from '../types';
+import type { GraphQLConfig, RichTypeInner } from '../types';
 import { plateElements } from './parse';
 import type { Content } from 'mdast';
-export declare const stringifyMDX: (value: unknown, field: RichTypeInner) => string;
+export declare const stringifyMDX: (value: unknown, field: RichTypeInner, graphQLconfig: GraphQLConfig) => string;
 export declare const stringify: (node: {
     type: typeof plateElements;
-}, field: RichTypeInner) => Content;
+}, field: RichTypeInner, graphQLconfig: GraphQLConfig) => Content;

package/dist/resolver/media-utils.d.ts

@@ -0,0 +1,29 @@
+/**
+Copyright 2021 Forestry.io Holdings, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { GraphQLConfig } from '../types';
+/**
+ * Strips away the Tina Cloud Asset URL from an `image` value
+ *
+ * @param {string} value
+ * @param {GraphQLConfig} config
+ * @returns {string}
+ */
+export declare const resolveMediaCloudToRelative: (value: string, config?: GraphQLConfig) => string;
+/**
+ * Adds Tina Cloud Asset URL to an `image` value
+ *
+ * @param {string} value
+ * @param {GraphQLConfig} config
+ * @returns {string}
+ */
+export declare const resolveMediaRelativeToCloud: (value: string, config?: GraphQLConfig) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/graphql",
-  "version": "0.60.5",
+  "version": "0.60.6",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [