(core) - Fix stringifyVariables (and thus operation keys) for Fi… (#650)

* Fix stringifyVariables for Files

* Add changeset

* Fix hashing by generating random, stable key for non-objects

Any object without any enumerable keys that isn't a plain
object will now receive a random key.

* Add more details to changeset

.changeset/wicked-cows-heal.md

@@ -0,0 +1,5 @@
+---
+'@urql/core': patch
+---
+
+Add support for variables that contain non-plain objects without any enumerable keys, e.g. `File` or `Blob`. In this case `stringifyVariables` will now use a stable (but random) key, which means that mutations containing `File`s — or other objects like this — will now be distinct, as they should be.

packages/core/src/utils/stringifyVariables.test.ts

@@ -29,7 +29,22 @@ it('throws for circular structures', () => {
   }).toThrow();
 });
 
-it('stringifies date correctly', () => {
+it('stringifies dates correctly', () => {
   const date = new Date('2019-12-11T04:20:00');
   expect(stringifyVariables(date)).toBe(date.toJSON());
 });
+
+it('stringifies dictionaries (Object.create(null)) correctly', () => {
+  expect(stringifyVariables(Object.create(null))).toBe('{}');
+});
+
+it('stringifies files correctly', () => {
+  const file = new File([0] as any, 'test.js');
+  Object.defineProperty(file, 'lastModified', { value: 123 });
+  const str = stringifyVariables(file);
+  expect(str).toBe(stringifyVariables(file));
+
+  const otherFile = new File([0] as any, 'otherFile.js');
+  Object.defineProperty(otherFile, 'lastModified', { value: 234 });
+  expect(str).not.toBe(stringifyVariables(otherFile));
+});

packages/core/src/utils/stringifyVariables.ts

@@ -1,4 +1,5 @@
 const seen = new Set();
+const cache = new WeakMap();
 
 const stringify = (x: any): string => {
   if (x === undefined) {
@@ -29,6 +30,15 @@ const stringify = (x: any): string => {
   }
 
   const keys = Object.keys(x).sort();
+  if (!keys.length && x.constructor && x.constructor !== Object) {
+    const key =
+      cache.get(x) ||
+      Math.random()
+        .toString(36)
+        .slice(2);
+    cache.set(x, key);
+    return `{"__key":"${key}"}`;
+  }
 
   seen.add(x);
   out = '{';