Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 1 + --- 2 + '@urql/exchange-graphcache': patch 3 + --- 4 + 5 + Optimistic mutation results should never result in dependent operations being blocked.
+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 })