Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
fix(graphcache): Prevent marking operations as reexecuting after optimistic mutation (#3265)
authored by
Phil Pluckthun
and committed by
GitHub
3d6b0c83
008c61bb
+18
-10
+5
.changeset/serious-dots-sit.md
+5
.changeset/serious-dots-sit.md
+13
-10
exchanges/graphcache/src/cacheExchange.ts
+13
-10
exchanges/graphcache/src/cacheExchange.ts
···
111
111
112
112
const executePendingOperations = (
113
113
operation: Operation,
114
-
pendingOperations: Operations
114
+
pendingOperations: Operations,
115
+
isOptimistic: boolean
115
116
) => {
116
117
// Reexecute collected operations and delete them from the mapping
117
118
for (const key of pendingOperations.values()) {
···
130
131
}
131
132
}
132
133
133
-
// Upon completion, all dependent operations become reexecuting operations, preventing
134
-
// them from reexecuting prior operations again, causing infinite loops
135
-
const _reexecutingOperations = reexecutingOperations;
136
-
if (operation.kind === 'query') {
137
-
(reexecutingOperations = dependentOperations).add(operation.key);
134
+
if (!isOptimistic) {
135
+
// Upon completion, all dependent operations become reexecuting operations, preventing
136
+
// them from reexecuting prior operations again, causing infinite loops
137
+
const _reexecutingOperations = reexecutingOperations;
138
+
if (operation.kind === 'query') {
139
+
(reexecutingOperations = dependentOperations).add(operation.key);
140
+
}
141
+
(dependentOperations = _reexecutingOperations).clear();
138
142
}
139
-
(dependentOperations = _reexecutingOperations).clear();
140
143
};
141
144
142
145
// This registers queries with the data layer to ensure commutativity
···
171
174
// Update related queries
172
175
const pendingOperations: Operations = new Set();
173
176
collectPendingOperations(pendingOperations, dependencies);
174
-
executePendingOperations(operation, pendingOperations);
177
+
executePendingOperations(operation, pendingOperations, true);
175
178
}
176
179
}
177
180
···
424
427
// Update the cache with the incoming API result
425
428
const cacheResult = updateCacheWithResult(result, pendingOperations);
426
429
// Execute all dependent queries
427
-
executePendingOperations(result.operation, pendingOperations);
430
+
executePendingOperations(result.operation, pendingOperations, false);
428
431
return cacheResult;
429
432
})
430
433
);
···
458
461
);
459
462
460
463
// Execute all dependent queries as a single batch
461
-
executePendingOperations(result.operation, pendingOperations);
464
+
executePendingOperations(result.operation, pendingOperations, false);
462
465
463
466
return fromArray(results);
464
467
})