chore: json field now edits string but saves json in db

src/admin/components/forms/field-types/JSON/JSON.tsx

@@ -1,5 +1,4 @@
-
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import Editor from '@monaco-editor/react';
 import useField from '../../useField';
@@ -9,6 +8,7 @@ import Error from '../../Error';
 import FieldDescription from '../../FieldDescription';
 import { json } from '../../../../../fields/validations';
 import { Props } from './types';
+import useThrottledEffect from '../../../../hooks/useThrottledEffect';
 
 import './index.scss';
 
@@ -39,6 +39,7 @@ const JSONField: React.FC<Props> = (props) => {
 
   const {
     value,
+    initialValue,
     showError,
     setValue,
     errorMessage,
@@ -48,6 +49,16 @@ const JSONField: React.FC<Props> = (props) => {
     condition,
   });
 
+  const [stringValue, setStringValue] = useState<string>();
+
+  useThrottledEffect(() => {
+    setValue(JSON.parse(stringValue));
+  }, 200, [setValue, stringValue]);
+
+  useEffect(() => {
+    setStringValue(JSON.stringify(initialValue, null, 2));
+  }, [initialValue]);
+
   const classes = [
     baseClass,
     'field-type',
@@ -76,9 +87,11 @@ const JSONField: React.FC<Props> = (props) => {
       <Editor
         height="50vh"
         defaultLanguage="json"
-        value={typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
-        onChange={readOnly ? () => null : (val) => setValue(val)}
+        value={stringValue}
+        onChange={readOnly ? () => null : (val) => setStringValue(val)}
         options={{
+          tabSize: 2,
+          detectIndentation: true,
           minimap: {
             enabled: false,
           },

src/fields/config/types.ts

@@ -475,7 +475,7 @@ export type FieldWithMaxDepth =
   | RelationshipField
 
 export function fieldHasSubFields(field: Field): field is FieldWithSubFields {
-  return (field.type === 'group' || field.type === 'array' || field.type === 'row' || field.type === 'collapsible' || field.type === 'relationship');
+  return (field.type === 'group' || field.type === 'array' || field.type === 'row' || field.type === 'collapsible');
 }
 
 export function fieldIsArrayType(field: Field): field is ArrayField {

src/graphql/schema/fieldToWhereInputSchemaMap.ts

@@ -13,6 +13,7 @@ import {
   CheckboxField,
   CodeField, CollapsibleField, DateField,
   EmailField, fieldAffectsData, fieldHasSubFields, GroupField,
+  JSONField,
   NumberField, optionIsObject, PointField,
   RadioField, RelationshipField,
   RichTextField, RowField, SelectField,
@@ -82,6 +83,17 @@ const fieldToSchemaMap: (parentName: string) => any = (parentName: string) => ({
       ),
     };
   },
+  json: (field: JSONField) => {
+    const type = GraphQLJSON;
+    return {
+      type: withOperators(
+        field,
+        type,
+        parentName,
+        [...operators.equality, ...operators.partial],
+      ),
+    };
+  },
   code: (field: CodeField) => {
     const type = GraphQLString;
     return {