Fix JSON.stringify issue with circular ref objects

api/src/services/payload.ts

@@ -1,6 +1,6 @@
 import { Accountability, Query, SchemaOverview } from '@directus/shared/types';
 import { format, parseISO, isValid } from 'date-fns';
-import { parseJSON, toArray } from '@directus/shared/utils';
+import { parseJSON, toArray, JSONstringifyWithCircularRefs } from '@directus/shared/utils';
 import { unflatten } from 'flat';
 import Joi from 'joi';
 import { Knex } from 'knex';
@@ -176,7 +176,7 @@ export class PayloadService {
 				for (const [key, value] of Object.entries(record)) {
 					if (Array.isArray(value) || (typeof value === 'object' && !(value instanceof Date) && value !== null)) {
 						if (!value.isRawInstance) {
-							record[key] = JSON.stringify(value);
+							record[key] = JSONstringifyWithCircularRefs(value);
 						}
 					}
 				}

packages/shared/src/utils/index.ts

@@ -22,6 +22,7 @@ export * from './move-in-array';
 export * from './parse-filter';
 export * from './parse-json';
 export * from './pluralize';
+export * from './stringify-json';
 export * from './to-array';
 export * from './validate-extension-manifest';
 export * from './validate-payload';

packages/shared/src/utils/stringify-json.ts

@@ -0,0 +1,64 @@
+// https://stackoverflow.com/a/61962964/7185314
+// This falls under the license CC BY-SA 4.0
+// Read the license: https://creativecommons.org/licenses/by-sa/4.0/
+
+export const JSONstringifyWithCircularRefs = (() => {
+	const refs = new Map();
+	const parents: any[] = [];
+	const path = ['this'];
+
+	function clear() {
+		refs.clear();
+		parents.length = 0;
+		path.length = 1;
+	}
+
+	function updateParents(key: string, value: any) {
+		let idx = parents.length - 1;
+		let prev = parents[idx];
+		if (prev[key] === value || idx === 0) {
+			path.push(key);
+			parents.push(value);
+		} else {
+			while (idx-- >= 0) {
+				prev = parents[idx];
+				if (prev[key] === value) {
+					idx += 2;
+					parents.length = idx;
+					path.length = idx;
+					--idx;
+					parents[idx] = value;
+					path[idx] = key;
+					break;
+				}
+			}
+		}
+	}
+
+	function checkCircular(key: string, value: any) {
+		if (value != null) {
+			if (typeof value === 'object') {
+				if (key) {
+					updateParents(key, value);
+				}
+
+				const other = refs.get(value);
+				if (other) {
+					return '[Circular Reference]' + other;
+				} else {
+					refs.set(value, path.join('.'));
+				}
+			}
+		}
+		return value;
+	}
+
+	return function stringifyWithCircularRefs(obj: any, space?: string | number) {
+		try {
+			parents.push(obj);
+			return JSON.stringify(obj, checkCircular, space);
+		} finally {
+			clear();
+		}
+	};
+})();