+10

.changeset/wise-cherries-juggle.md

reviewed

··· 1 1 + --- 2 2 + '@urql/core': minor 3 3 + --- 4 4 + 5 5 + Deprecate the `dedupExchange`. The functionality of deduplicating queries and subscriptions has now been moved into and absorbed by the `Client`. 6 6 + 7 7 + Previously, the `Client` already started doing some work to share results between 8 8 + queries, and to avoid dispatching operations as needed. It now only dispatches operations 9 9 + strictly when the `dedupExchange` would allow so as well, moving its logic into the 10 10 + `Client`.

+1 -1

packages/core/src/client.test.ts

reviewed

··· 909 909 return merge([ 910 910 pipe( 911 911 ops$, 912 912 - map(op => ({ data: 1, operation: op })), 912 912 + map(op => ({ hasNext: true, data: 1, operation: op })), 913 913 take(1) 914 914 ), 915 915 never,

+36 -22

packages/core/src/client.ts

reviewed

··· 12 12 Source, 13 13 take, 14 14 takeUntil, 15 15 + takeWhile, 15 16 publish, 16 17 subscribe, 17 18 switchMap, ··· 566 567 567 568 // This subject forms the input of operations; executeOperation may be 568 569 // called to dispatch a new operation on the subject 569 569 - const { source: operations$, next: nextOperation } = makeSubject<Operation>(); 570 570 + const operations = makeSubject<Operation>(); 571 571 + 572 572 + function nextOperation(operation: Operation) { 573 573 + const prevReplay = replays.get(operation.key); 574 574 + if (operation.kind === 'mutation' || !prevReplay || !prevReplay.hasNext) 575 575 + operations.next(operation); 576 576 + } 570 577 571 578 // We define a queued dispatcher on the subject, which empties the queue when it's 572 579 // activated to allow `reexecuteOperation` to be trampoline-scheduled 573 580 let isOperationBatchActive = false; 574 581 function dispatchOperation(operation?: Operation | void) { 575 582 if (operation) nextOperation(operation); 583 583 + 576 584 if (!isOperationBatchActive) { 577 585 isOperationBatchActive = true; 578 586 while (isOperationBatchActive && (operation = queue.shift())) ··· 602 610 ); 603 611 } 604 612 613 613 + if (operation.kind !== 'query') { 614 614 + result$ = pipe( 615 615 + result$, 616 616 + onStart(() => { 617 617 + nextOperation(operation); 618 618 + }) 619 619 + ); 620 620 + } 621 621 + 605 622 // A mutation is always limited to just a single result and is never shared 606 623 if (operation.kind === 'mutation') { 607 607 - return pipe( 624 624 + return pipe(result$, take(1)); 625 625 + } 626 626 + 627 627 + if (operation.kind === 'subscription') { 628 628 + result$ = pipe( 608 629 result$, 609 609 - onStart(() => nextOperation(operation)), 610 610 - take(1) 630 630 + takeWhile(result => !!result.hasNext) 611 631 ); 612 632 } 613 633 614 614 - const source = pipe( 634 634 + return pipe( 615 635 result$, 616 636 // End the results stream when an active teardown event is sent 617 637 takeUntil( 618 638 pipe( 619 619 - operations$, 639 639 + operations.source, 620 640 filter(op => op.kind === 'teardown' && op.key === operation.key) 621 641 ) 622 642 ), ··· 629 649 fromValue(result), 630 650 // Mark a result as stale when a new operation is sent for it 631 651 pipe( 632 632 - operations$, 652 652 + operations.source, 633 653 filter( 634 654 op => 635 655 op.kind === 'query' && ··· 656 676 }), 657 677 share 658 678 ); 659 659 - 660 660 - return source; 661 679 }; 662 680 663 681 const instance: Client = 664 682 this instanceof Client ? this : Object.create(Client.prototype); 665 683 const client: Client = Object.assign(instance, { 666 684 suspense: !!opts.suspense, 667 667 - operations$, 685 685 + operations$: operations.source, 668 686 669 687 reexecuteOperation(operation: Operation) { 670 688 // Reexecute operation only if any subscribers are still subscribed to the ··· 708 726 709 727 return make<OperationResult>(observer => { 710 728 let source = active.get(operation.key); 711 711 - 712 729 if (!source) { 713 730 active.set(operation.key, (source = makeResultSource(operation))); 714 731 } 715 732 716 716 - const isNetworkOperation = 717 717 - operation.context.requestPolicy === 'cache-and-network' || 718 718 - operation.context.requestPolicy === 'network-only'; 719 719 - 720 733 return pipe( 721 734 source, 722 735 onStart(() => { 723 736 const prevReplay = replays.get(operation.key); 724 724 - 725 725 - if (operation.kind === 'subscription') { 726 726 - return dispatchOperation(operation); 737 737 + const isNetworkOperation = 738 738 + operation.context.requestPolicy === 'cache-and-network' || 739 739 + operation.context.requestPolicy === 'network-only'; 740 740 + if (operation.kind !== 'query') { 741 741 + return; 727 742 } else if (isNetworkOperation) { 728 743 dispatchOperation(operation); 744 744 + if (prevReplay && !prevReplay.hasNext) prevReplay.stale = true; 729 745 } 730 746 731 747 if ( 732 748 prevReplay != null && 733 749 prevReplay === replays.get(operation.key) 734 750 ) { 735 735 - observer.next( 736 736 - isNetworkOperation ? { ...prevReplay, stale: true } : prevReplay 737 737 - ); 751 751 + observer.next(prevReplay); 738 752 } else if (!isNetworkOperation) { 739 753 dispatchOperation(operation); 740 754 } ··· 824 838 client, 825 839 dispatchDebug, 826 840 forward: fallbackExchange({ dispatchDebug }), 827 827 - })(operations$) 841 841 + })(operations.source) 828 842 ); 829 843 830 844 // Prevent the `results$` exchange pipeline from being closed by active

-104

packages/core/src/exchanges/dedup.test.ts

reviewed

··· 1 1 - import { 2 2 - filter, 3 3 - makeSubject, 4 4 - map, 5 5 - pipe, 6 6 - publish, 7 7 - Source, 8 8 - Subject, 9 9 - } from 'wonka'; 10 10 - import { vi, expect, it, beforeEach } from 'vitest'; 11 11 - 12 12 - import { 13 13 - mutationOperation, 14 14 - queryOperation, 15 15 - queryResponse, 16 16 - } from '../test-utils'; 17 17 - import { Operation } from '../types'; 18 18 - import { dedupExchange } from './dedup'; 19 19 - import { makeOperation } from '../utils'; 20 20 - 21 21 - const dispatchDebug = vi.fn(); 22 22 - let shouldRespond = false; 23 23 - let exchangeArgs; 24 24 - let forwardedOperations: Operation[]; 25 25 - let input: Subject<Operation>; 26 26 - 27 27 - beforeEach(() => { 28 28 - shouldRespond = false; 29 29 - forwardedOperations = []; 30 30 - input = makeSubject<Operation>(); 31 31 - 32 32 - // Collect all forwarded operations 33 33 - const forward = (s: Source<Operation>) => { 34 34 - return pipe( 35 35 - s, 36 36 - map(op => { 37 37 - forwardedOperations.push(op); 38 38 - return queryResponse; 39 39 - }), 40 40 - filter(() => !!shouldRespond) 41 41 - ); 42 42 - }; 43 43 - 44 44 - exchangeArgs = { forward, client: {}, dispatchDebug }; 45 45 - }); 46 46 - 47 47 - it('forwards query operations correctly', async () => { 48 48 - const { source: ops$, next, complete } = input; 49 49 - const exchange = dedupExchange(exchangeArgs)(ops$); 50 50 - 51 51 - publish(exchange); 52 52 - next(queryOperation); 53 53 - complete(); 54 54 - expect(forwardedOperations.length).toBe(1); 55 55 - }); 56 56 - 57 57 - it('forwards only non-pending query operations', async () => { 58 58 - shouldRespond = false; // We filter out our mock responses 59 59 - const { source: ops$, next, complete } = input; 60 60 - const exchange = dedupExchange(exchangeArgs)(ops$); 61 61 - 62 62 - publish(exchange); 63 63 - next(queryOperation); 64 64 - next(queryOperation); 65 65 - complete(); 66 66 - expect(forwardedOperations.length).toBe(1); 67 67 - }); 68 68 - 69 69 - it('forwards duplicate query operations as usual after they respond', async () => { 70 70 - shouldRespond = true; // Response will immediately resolve 71 71 - const { source: ops$, next, complete } = input; 72 72 - const exchange = dedupExchange(exchangeArgs)(ops$); 73 73 - 74 74 - publish(exchange); 75 75 - next(queryOperation); 76 76 - next(queryOperation); 77 77 - complete(); 78 78 - expect(forwardedOperations.length).toBe(2); 79 79 - }); 80 80 - 81 81 - it('forwards duplicate query operations after one was torn down', async () => { 82 82 - shouldRespond = false; // We filter out our mock responses 83 83 - const { source: ops$, next, complete } = input; 84 84 - const exchange = dedupExchange(exchangeArgs)(ops$); 85 85 - 86 86 - publish(exchange); 87 87 - next(queryOperation); 88 88 - next(makeOperation('teardown', queryOperation, queryOperation.context)); 89 89 - next(queryOperation); 90 90 - complete(); 91 91 - expect(forwardedOperations.length).toBe(3); 92 92 - }); 93 93 - 94 94 - it('always forwards mutation operations without deduplicating them', async () => { 95 95 - shouldRespond = false; // We filter out our mock responses 96 96 - const { source: ops$, next, complete } = input; 97 97 - const exchange = dedupExchange(exchangeArgs)(ops$); 98 98 - 99 99 - publish(exchange); 100 100 - next(mutationOperation); 101 101 - next(mutationOperation); 102 102 - complete(); 103 103 - expect(forwardedOperations.length).toBe(2); 104 104 - });

+3 -53

packages/core/src/exchanges/dedup.ts

reviewed

··· 1 1 - import { filter, pipe, tap } from 'wonka'; 2 1 import { Exchange } from '../types'; 3 2 4 3 /** Default deduplication exchange. 5 5 - * 6 6 - * @remarks 7 7 - * The `dedupExchange` deduplicates queries and subscriptions that are 8 8 - * started with identical documents and variables by deduplicating by 9 9 - * their {@link Operation.key}. 10 10 - * This can prevent duplicate requests from being sent to your GraphQL API. 11 11 - * 12 12 - * Because this is a very safe exchange to add to any GraphQL setup, it’s 13 13 - * not only the default, but we also recommend you to always keep this 14 14 - * exchange added and included in your setup. 15 15 - * 16 16 - * Hint: In React and Vue, some common usage patterns can trigger duplicate 17 17 - * operations. For instance, in React a single render will actually 18 18 - * trigger two phases that execute an {@link Operation}. 4 4 + * @deprecated 5 5 + * This exchange's functionality is now built into the {@link Client}. 19 6 */ 20 20 - export const dedupExchange: Exchange = ({ forward, dispatchDebug }) => { 21 21 - const inFlightKeys = new Set<number>(); 22 22 - return ops$ => 23 23 - pipe( 24 24 - forward( 25 25 - pipe( 26 26 - ops$, 27 27 - filter(operation => { 28 28 - if ( 29 29 - operation.kind === 'teardown' || 30 30 - operation.kind === 'mutation' 31 31 - ) { 32 32 - inFlightKeys.delete(operation.key); 33 33 - return true; 34 34 - } 35 35 - 36 36 - const isInFlight = inFlightKeys.has(operation.key); 37 37 - inFlightKeys.add(operation.key); 38 38 - 39 39 - if (isInFlight) { 40 40 - dispatchDebug({ 41 41 - type: 'dedup', 42 42 - message: 'An operation has been deduped.', 43 43 - operation, 44 44 - }); 45 45 - } 46 46 - 47 47 - return !isInFlight; 48 48 - }) 49 49 - ) 50 50 - ), 51 51 - tap(result => { 52 52 - if (!result.hasNext) { 53 53 - inFlightKeys.delete(result.operation.key); 54 54 - } 55 55 - }) 56 56 - ); 57 57 - }; 7 7 + export const dedupExchange: Exchange = ({ forward }) => ops$ => forward(ops$);