fix(graphcache): Fix partial optimistic mutation results

.changeset/lovely-monkeys-wink.md

@@ -0,0 +1,5 @@
+---
+'@urql/exchange-graphcache': patch
+---
+
+Fix optimistic mutations containing partial results (`undefined` fields), which previously actually caused a hidden cache miss, which may then affect a subsequent non-optimistic mutation result.

exchanges/graphcache/src/operations/write.ts

@@ -259,7 +259,9 @@ const writeSelection = (
       // Skip typename fields and assume they've already been written above
       fieldName === '__typename' ||
       // Fields marked as deferred that aren't defined must be skipped
-      (fieldValue === undefined && deferRef.current)
+      // Otherwise, we also ignore undefined values in optimistic updaters
+      (fieldValue === undefined &&
+        (deferRef.current || (ctx.optimistic && !isRoot)))
     ) {
       continue;
     }

exchanges/graphcache/src/store/store.test.ts

@@ -784,6 +784,46 @@ describe('Store with OptimisticMutationConfig', () => {
     });
   });
 
+  it('should be able to optimistically mutate with partial data', () => {
+    const { dependencies } = writeOptimistic(
+      store,
+      {
+        query: gql`
+          mutation {
+            addTodo(id: "0", complete: true, __typename: "Todo") {
+              id
+              text
+              complete
+              __typename
+            }
+          }
+        `,
+      },
+      1
+    );
+    expect(dependencies).toEqual(new Set(['Todo:0']));
+    let { data } = query(store, { query: Todos });
+    expect(data).toEqual({
+      __typename: 'Query',
+      todos: [
+        {
+          ...todosData.todos[0],
+          complete: true,
+        },
+        todosData.todos[1],
+        todosData.todos[2],
+      ],
+    });
+
+    InMemoryData.noopDataState(store.data, 1);
+
+    ({ data } = query(store, { query: Todos }));
+    expect(data).toEqual({
+      __typename: 'Query',
+      todos: todosData.todos,
+    });
+  });
+
   describe('Invalidating an entity', () => {
     it('removes an entity from a list.', () => {
       store.invalidate(todosData.todos[1]);