commit 7ddccc130cf51823dd95a2908ada2c39b82b593c · kitten.sh/urql

.changeset/eleven-snakes-look.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       '@urql/exchange-graphcache': patch

     

       3
       3
       +
       ---

     

       4
       4
       +
       

     

       5
       5
       +
       Allow `offlineExchange` to once again issue all request policies, instead of mapping them to `cache-first`. When replaying operations after rehydrating it will now prioritise network policies, and before rehydrating receiving a network result will prevent a network request from being issued again.

.changeset/two-ants-relate.md

···

       1
       1
       +
       ---

     

       2
       2
       +
       '@urql/exchange-graphcache': patch

     

       3
       3
       +
       '@urql/core': patch

     

       4
       4
       +
       ---

     

       5
       5
       +
       

     

       6
       6
       +
       Add `OperationContext.optimistic` flag as an internal indication on whether a mutation triggered an optimistic update in `@urql/exchange-graphcache`'s `cacheExchange`.

+7 -1

exchanges/graphcache/src/cacheExchange.ts

···

       4
       4
        
         makeOperation,

     

       5
       5
        
         Operation,

     

       6
       6
        
         OperationResult,

     

       7
       7
       +
         OperationContext,

     

       7
       8
        
         RequestPolicy,

     

       8
       9
        
         CacheOutcome,

     

       9
       10
        
       } from '@urql/core';

     
···

       144
       145
        
       

     

       145
       146
        
           // This registers queries with the data layer to ensure commutativity

     

       146
       147
        
           const prepareForwardedOperation = (operation: Operation) => {

     

       148
       148
       +
             let context: Partial<OperationContext> | undefined;

     

       147
       149
        
             if (operation.kind === 'query') {

     

       148
       150
        
               // Pre-reserve the position of the result layer

     

       149
       151
        
               reserveLayer(store.data, operation.key);

     
···

       155
       157
        
               reexecutingOperations.delete(operation.key);

     

       156
       158
        
               // Mark operation layer as done

     

       157
       159
        
               noopDataState(store.data, operation.key);

     

       160
       160
       +
               return operation;

     

       158
       161
        
             } else if (

     

       159
       162
        
               operation.kind === 'mutation' &&

     

       160
       163
        
               operation.context.requestPolicy !== 'network-only'

     
···

       175
       178
        
                 const pendingOperations: Operations = new Set();

     

       176
       179
        
                 collectPendingOperations(pendingOperations, dependencies);

     

       177
       180
        
                 executePendingOperations(operation, pendingOperations, true);

     

       181
       181
       +
       

     

       182
       182
       +
                 // Mark operation as optimistic

     

       183
       183
       +
                 context = { optimistic: true };

     

       178
       184
        
               }

     

       179
       185
        
             }

     

       180
       186
        
       

     
···

       190
       196
        
                     )

     

       191
       197
        
                   : operation.variables,

     

       192
       198
        
               },

     

       193
       193
       -
               operation.context

     

       199
       199
       +
               { ...operation.context, ...context }

     

       194
       200
        
             );

     

       195
       201
        
           };

     

       196
       202

+38 -63

exchanges/graphcache/src/offlineExchange.ts

···

       1
       1
        
       import { pipe, share, merge, makeSubject, filter, onPush } from 'wonka';

     

       2
       2
       -
       import { SelectionNode } from '@0no-co/graphql.web';

     

       3
       2
        
       

     

       4
       3
        
       import {

     

       5
       4
        
         Operation,

     
···

       7
       6
        
         Exchange,

     

       8
       7
        
         ExchangeIO,

     

       9
       8
        
         CombinedError,

     

       9
       9
       +
         RequestPolicy,

     

       10
       10
        
         stringifyDocument,

     

       11
       11
        
         createRequest,

     

       12
       12
        
         makeOperation,

     

       13
       13
        
       } from '@urql/core';

     

       14
       14
        
       

     

       15
       15
       -
       import {

     

       16
       16
       -
         getMainOperation,

     

       17
       17
       -
         getFragments,

     

       18
       18
       -
         isInlineFragment,

     

       19
       19
       -
         isFieldNode,

     

       20
       20
       -
         shouldInclude,

     

       21
       21
       -
         getSelectionSet,

     

       22
       22
       -
         getName,

     

       23
       23
       -
       } from './ast';

     

       24
       24
       -
       

     

       25
       25
       -
       import {

     

       26
       26
       -
         SerializedRequest,

     

       27
       27
       -
         OptimisticMutationConfig,

     

       28
       28
       -
         Variables,

     

       29
       29
       -
         CacheExchangeOpts,

     

       30
       30
       -
         StorageAdapter,

     

       31
       31
       -
       } from './types';

     

       15
       15
       +
       import { SerializedRequest, CacheExchangeOpts, StorageAdapter } from './types';

     

       32
       16
        
       

     

       33
       17
        
       import { cacheExchange } from './cacheExchange';

     

       34
       18
        
       import { toRequestPolicy } from './helpers/operation';

     

       35
       19
        
       

     

       36
       36
       -
       /** Determines whether a given query contains an optimistic mutation field */

     

       37
       37
       -
       const isOptimisticMutation = <T extends OptimisticMutationConfig>(

     

       38
       38
       -
         config: T,

     

       39
       39
       -
         operation: Operation

     

       40
       40
       -
       ) => {

     

       41
       41
       -
         const vars: Variables = operation.variables || {};

     

       42
       42
       -
         const fragments = getFragments(operation.query);

     

       43
       43
       -
         const selections = [...getSelectionSet(getMainOperation(operation.query))];

     

       44
       44
       -
       

     

       45
       45
       -
         let field: void | SelectionNode;

     

       46
       46
       -
         while ((field = selections.pop())) {

     

       47
       47
       -
           if (!shouldInclude(field, vars)) {

     

       48
       48
       -
             continue;

     

       49
       49
       -
           } else if (!isFieldNode(field)) {

     

       50
       50
       -
             const fragmentNode = !isInlineFragment(field)

     

       51
       51
       -
               ? fragments[getName(field)]

     

       52
       52
       -
               : field;

     

       53
       53
       -
             if (fragmentNode) selections.push(...getSelectionSet(fragmentNode));

     

       54
       54
       -
           } else if (config[getName(field)]) {

     

       55
       55
       -
             return true;

     

       56
       56
       -
           }

     

       57
       57
       -
         }

     

       58
       58
       -
       

     

       59
       59
       -
         return false;

     

       60
       60
       -
       };

     

       20
       20
       +
       const policyLevel = {

     

       21
       21
       +
         'cache-only': 0,

     

       22
       22
       +
         'cache-first': 1,

     

       23
       23
       +
         'network-only': 2,

     

       24
       24
       +
         'cache-and-network': 3,

     

       25
       25
       +
       } as const;

     

       61
       26
        
       

     

       62
       27
        
       /** Input parameters for the {@link offlineExchange}.

     

       63
       28
        
        * @remarks

     
···

       126
       91
        
           ) {

     

       127
       92
        
             const { forward: outerForward, client, dispatchDebug } = input;

     

       128
       93
        
             const { source: reboundOps$, next } = makeSubject<Operation>();

     

       129
       129
       -
             const optimisticMutations = opts.optimistic || {};

     

       130
       94
        
             const failedQueue: Operation[] = [];

     

       131
       95
        
             let hasRehydrated = false;

     

       132
       96
        
             let isFlushingQueue = false;

     
···

       148
       112
        
               }

     

       149
       113
        
             };

     

       150
       114
        
       

     

       115
       115
       +
             const filterQueue = (key: number) => {

     

       116
       116
       +
               for (let i = failedQueue.length - 1; i >= 0; i--)

     

       117
       117
       +
                 if (failedQueue[i].key === key) failedQueue.splice(i, 1);

     

       118
       118
       +
             };

     

       119
       119
       +
       

     

       151
       120
        
             const flushQueue = () => {

     

       152
       121
        
               if (!isFlushingQueue) {

     

       153
       153
       -
                 isFlushingQueue = true;

     

       154
       154
       -
       

     

       155
       122
        
                 const sent = new Set<number>();

     

       123
       123
       +
                 isFlushingQueue = true;

     

       156
       124
        
                 for (let i = 0; i < failedQueue.length; i++) {

     

       157
       125
        
                   const operation = failedQueue[i];

     

       158
       126
        
                   if (operation.kind === 'mutation' || !sent.has(operation.key)) {

     

       159
       159
       -
                     if (operation.kind !== 'subscription')

     

       127
       127
       +
                     sent.add(operation.key);

     

       128
       128
       +
                     if (operation.kind !== 'subscription') {

     

       160
       129
        
                       next(makeOperation('teardown', operation));

     

       161
       161
       -
                     sent.add(operation.key);

     

       162
       162
       -
                     next(toRequestPolicy(operation, 'cache-first'));

     

       130
       130
       +
                       let overridePolicy: RequestPolicy = 'cache-first';

     

       131
       131
       +
                       for (let i = 0; i < failedQueue.length; i++) {

     

       132
       132
       +
                         const { requestPolicy } = failedQueue[i].context;

     

       133
       133
       +
                         if (policyLevel[requestPolicy] > policyLevel[overridePolicy])

     

       134
       134
       +
                           overridePolicy = requestPolicy;

     

       135
       135
       +
                       }

     

       136
       136
       +
                       next(toRequestPolicy(operation, overridePolicy));

     

       137
       137
       +
                     } else {

     

       138
       138
       +
                       next(toRequestPolicy(operation, 'cache-first'));

     

       139
       139
       +
                     }

     

       163
       140
        
                   }

     

       164
       141
        
                 }

     

       165
       165
       -
       

     

       166
       166
       -
                 failedQueue.length = 0;

     

       167
       142
        
                 isFlushingQueue = false;

     

       143
       143
       +
                 failedQueue.length = 0;

     

       168
       144
        
                 updateMetadata();

     

       169
       145
        
               }

     

       170
       146
        
             };

     
···

       176
       152
        
                   if (

     

       177
       153
        
                     hasRehydrated &&

     

       178
       154
        
                     res.operation.kind === 'mutation' &&

     

       179
       179
       -
                     isOfflineError(res.error, res) &&

     

       180
       180
       -
                     isOptimisticMutation(optimisticMutations, res.operation)

     

       155
       155
       +
                     res.operation.context.optimistic &&

     

       156
       156
       +
                     isOfflineError(res.error, res)

     

       181
       157
        
                   ) {

     

       182
       158
        
                     failedQueue.push(res.operation);

     

       183
       159
        
                     updateMetadata();

     
···

       231
       207
        
                     if (operation.kind === 'query' && !hasRehydrated) {

     

       232
       208
        
                       failedQueue.push(operation);

     

       233
       209
        
                     } else if (operation.kind === 'teardown') {

     

       234
       234
       -
                       for (let i = failedQueue.length - 1; i >= 0; i--)

     

       235
       235
       -
                         if (failedQueue[i].key === operation.key)

     

       236
       236
       -
                           failedQueue.splice(i, 1);

     

       210
       210
       +
                       filterQueue(operation.key);

     

       237
       211
        
                     }

     

       238
       212
        
                   })

     

       239
       213
        
                 ),

     
···

       242
       216
        
               return pipe(

     

       243
       217
        
                 cacheResults$(opsAndRebound$),

     

       244
       218
        
                 filter(res => {

     

       245
       245
       -
                   if (

     

       246
       246
       -
                     res.operation.kind === 'query' &&

     

       247
       247
       -
                     isOfflineError(res.error, res)

     

       248
       248
       -
                   ) {

     

       249
       249
       -
                     next(toRequestPolicy(res.operation, 'cache-only'));

     

       250
       250
       -
                     failedQueue.push(res.operation);

     

       251
       251
       -
                     return false;

     

       219
       219
       +
                   if (res.operation.kind === 'query') {

     

       220
       220
       +
                     if (isOfflineError(res.error, res)) {

     

       221
       221
       +
                       next(toRequestPolicy(res.operation, 'cache-only'));

     

       222
       222
       +
                       failedQueue.push(res.operation);

     

       223
       223
       +
                       return false;

     

       224
       224
       +
                     } else if (!hasRehydrated) {

     

       225
       225
       +
                       filterQueue(res.operation.key);

     

       226
       226
       +
                     }

     

       252
       227
        
                   }

     

       253
       228
        
                   return true;

     

       254
       229
        
                 })

+30 -1

exchanges/graphcache/src/test-utils/examples-1.test.ts

···

       534
       534
        
         `;

     

       535
       535
        
       

     

       536
       536
        
         write(store, { query: getRoot }, queryData);

     

       537
       537
       -
         writeOptimistic(store, { query: updateItem, variables: { id: '2' } }, 1);

     

       537
       537
       +
         const { dependencies } = writeOptimistic(

     

       538
       538
       +
           store,

     

       539
       539
       +
           { query: updateItem, variables: { id: '2' } },

     

       540
       540
       +
           1

     

       541
       541
       +
         );

     

       542
       542
       +
         expect(dependencies.size).not.toBe(0);

     

       538
       543
        
         InMemoryData.noopDataState(store.data, 1);

     

       539
       544
        
         const queryRes = query(store, { query: getRoot });

     

       540
       545
        
       

     

       541
       546
        
         expect(queryRes.partial).toBe(false);

     

       542
       547
        
         expect(queryRes.data).not.toBe(null);

     

       548
       548
       +
       });

     

       549
       549
       +
       

     

       550
       550
       +
       it('skips non-optimistic mutation fields on writes', () => {

     

       551
       551
       +
         const store = new Store();

     

       552
       552
       +
       

     

       553
       553
       +
         const updateItem = gql`

     

       554
       554
       +
           mutation UpdateItem($id: ID!) {

     

       555
       555
       +
             updateItem(id: $id) {

     

       556
       556
       +
               __typename

     

       557
       557
       +
               item {

     

       558
       558
       +
                 __typename

     

       559
       559
       +
                 id

     

       560
       560
       +
                 name

     

       561
       561
       +
               }

     

       562
       562
       +
             }

     

       563
       563
       +
           }

     

       564
       564
       +
         `;

     

       565
       565
       +
       

     

       566
       566
       +
         const { dependencies } = writeOptimistic(

     

       567
       567
       +
           store,

     

       568
       568
       +
           { query: updateItem, variables: { id: '2' } },

     

       569
       569
       +
           1

     

       570
       570
       +
         );

     

       571
       571
       +
         expect(dependencies.size).toBe(0);

     

       543
       572
        
       });

     

       544
       573
        
       

     

       545
       574
        
       it('allows cumulative optimistic updates', () => {

packages/core/src/types.ts

···

       528
       528
        
          * @see {@link https://beta.reactjs.org/blog/2022/03/29/react-v18#new-suspense-features} for more information on React Suspense.

     

       529
       529
        
          */

     

       530
       530
        
         suspense?: boolean;

     

       531
       531
       +
         /** A metdata flag indicating whether this operation triggered optimistic updates.

     

       532
       532
       +
          *

     

       533
       533
       +
          * @remarks

     

       534
       534
       +
          * This configuration flag is reserved for `@urql/exchange-graphcache` and is flipped

     

       535
       535
       +
          * when an operation triggerd optimistic updates.

     

       536
       536
       +
          */

     

       537
       537
       +
         optimistic?: boolean;

     

       531
       538
        
         [key: string]: any;

     

       532
       539
        
       }

     

       533
       540