+5

.changeset/large-frogs-tease.md

reviewed

··· 1 1 + --- 2 2 + '@urql/core': minor 3 3 + --- 4 4 + 5 5 + With the "single-source behavior" the `Client` will now also avoid executing an operation if it's already active, has a previous result available, and is either run with the `cache-first` or `cache-only` request policies. This is similar to a "short circuiting" behavior, where unnecessary work is avoided by not issuing more operations into the exchange pipeline than expected.

+121 -13

packages/core/src/client.test.ts

reviewed

··· 519 519 jest.useRealTimers(); 520 520 }); 521 521 522 522 - it('replays results from prior operation result as needed', async () => { 522 522 + it('replays results from prior operation result as needed (cache-first)', async () => { 523 523 const exchange: Exchange = () => ops$ => { 524 524 let i = 0; 525 525 return pipe( ··· 556 556 557 557 expect(resultTwo).toHaveBeenCalledWith({ 558 558 data: 1, 559 559 + operation: queryOperation, 560 560 + }); 561 561 + 562 562 + jest.advanceTimersByTime(1); 563 563 + 564 564 + // With cache-first we don't expect a new operation to be issued 565 565 + expect(resultTwo).toHaveBeenCalledTimes(1); 566 566 + }); 567 567 + 568 568 + it('replays results from prior operation result as needed (network-only)', async () => { 569 569 + const exchange: Exchange = () => ops$ => { 570 570 + let i = 0; 571 571 + return pipe( 572 572 + ops$, 573 573 + map(op => ({ 574 574 + data: ++i, 575 575 + operation: op, 576 576 + })), 577 577 + delay(1) 578 578 + ); 579 579 + }; 580 580 + 581 581 + const client = createClient({ 582 582 + url: 'test', 583 583 + exchanges: [exchange], 584 584 + }); 585 585 + 586 586 + const operation = makeOperation('query', queryOperation, { 587 587 + ...queryOperation.context, 588 588 + requestPolicy: 'network-only', 589 589 + }); 590 590 + 591 591 + const resultOne = jest.fn(); 592 592 + const resultTwo = jest.fn(); 593 593 + 594 594 + pipe(client.executeRequestOperation(operation), subscribe(resultOne)); 595 595 + 596 596 + expect(resultOne).toHaveBeenCalledTimes(0); 597 597 + 598 598 + jest.advanceTimersByTime(1); 599 599 + 600 600 + expect(resultOne).toHaveBeenCalledTimes(1); 601 601 + expect(resultOne).toHaveBeenCalledWith({ 602 602 + data: 1, 603 603 + operation, 604 604 + }); 605 605 + 606 606 + pipe(client.executeRequestOperation(operation), subscribe(resultTwo)); 607 607 + 608 608 + expect(resultTwo).toHaveBeenCalledWith({ 609 609 + data: 1, 610 610 + operation, 559 611 stale: true, 612 612 + }); 613 613 + 614 614 + jest.advanceTimersByTime(1); 615 615 + 616 616 + // With network-only we expect a new operation to be issued, hence a new result 617 617 + expect(resultTwo).toHaveBeenCalledTimes(2); 618 618 + 619 619 + expect(resultTwo).toHaveBeenCalledWith({ 620 620 + data: 2, 621 621 + operation, 622 622 + }); 623 623 + }); 624 624 + 625 625 + it('does not replay values from a past subscription', async () => { 626 626 + const exchange: Exchange = () => ops$ => { 627 627 + let i = 0; 628 628 + return pipe( 629 629 + ops$, 630 630 + filter(op => op.kind !== 'teardown'), 631 631 + map(op => ({ 632 632 + data: ++i, 633 633 + operation: op, 634 634 + })), 635 635 + delay(1) 636 636 + ); 637 637 + }; 638 638 + 639 639 + const client = createClient({ 640 640 + url: 'test', 641 641 + exchanges: [exchange], 642 642 + }); 643 643 + 644 644 + // We keep the source in-memory 645 645 + const source = client.executeRequestOperation(queryOperation); 646 646 + const resultOne = jest.fn(); 647 647 + let subscription; 648 648 + 649 649 + subscription = pipe(source, subscribe(resultOne)); 650 650 + 651 651 + expect(resultOne).toHaveBeenCalledTimes(0); 652 652 + jest.advanceTimersByTime(1); 653 653 + 654 654 + expect(resultOne).toHaveBeenCalledWith({ 655 655 + data: 1, 560 656 operation: queryOperation, 561 657 }); 562 658 659 659 + subscription.unsubscribe(); 660 660 + const resultTwo = jest.fn(); 661 661 + subscription = pipe(source, subscribe(resultTwo)); 662 662 + 663 663 + expect(resultTwo).toHaveBeenCalledTimes(0); 563 664 jest.advanceTimersByTime(1); 564 665 565 666 expect(resultTwo).toHaveBeenCalledWith({ ··· 586 687 exchanges: [exchange], 587 688 }); 588 689 690 690 + const operation = makeOperation('query', queryOperation, { 691 691 + ...queryOperation.context, 692 692 + requestPolicy: 'network-only', 693 693 + }); 694 694 + 589 695 const resultOne = jest.fn(); 590 696 const resultTwo = jest.fn(); 591 697 592 592 - pipe(client.executeRequestOperation(queryOperation), subscribe(resultOne)); 698 698 + pipe(client.executeRequestOperation(operation), subscribe(resultOne)); 699 699 + pipe(client.executeRequestOperation(operation), subscribe(resultTwo)); 593 700 594 594 - pipe(client.executeRequestOperation(queryOperation), subscribe(resultTwo)); 595 595 - 596 596 - expect(resultOne).toHaveBeenCalledTimes(1); 597 701 expect(resultTwo).toHaveBeenCalledTimes(1); 598 598 - 599 702 expect(resultTwo).toHaveBeenCalledWith({ 600 703 data: 1, 601 601 - operation: queryOperation, 704 704 + operation, 602 705 stale: true, 603 706 }); 604 707 }); ··· 628 731 expect(resultTwo).toHaveBeenCalledTimes(0); 629 732 }); 630 733 631 631 - it('skips replaying results when a result is emitted immediately', () => { 734 734 + it('skips replaying results when a result is emitted immediately (network-only)', () => { 632 735 const exchange: Exchange = () => ops$ => { 633 736 let i = 0; 634 737 return pipe( ··· 642 745 exchanges: [exchange], 643 746 }); 644 747 748 748 + const operation = makeOperation('query', queryOperation, { 749 749 + ...queryOperation.context, 750 750 + requestPolicy: 'network-only', 751 751 + }); 752 752 + 645 753 const resultOne = jest.fn(); 646 754 const resultTwo = jest.fn(); 647 755 648 648 - pipe(client.executeRequestOperation(queryOperation), subscribe(resultOne)); 756 756 + pipe(client.executeRequestOperation(operation), subscribe(resultOne)); 649 757 650 758 expect(resultOne).toHaveBeenCalledWith({ 651 759 data: 1, 652 652 - operation: queryOperation, 760 760 + operation, 653 761 }); 654 762 655 655 - pipe(client.executeRequestOperation(queryOperation), subscribe(resultTwo)); 763 763 + pipe(client.executeRequestOperation(operation), subscribe(resultTwo)); 656 764 657 765 expect(resultTwo).toHaveBeenCalledWith({ 658 766 data: 2, 659 659 - operation: queryOperation, 767 767 + operation, 660 768 }); 661 769 662 770 expect(resultOne).toHaveBeenCalledWith({ 663 771 data: 2, 664 664 - operation: queryOperation, 772 772 + operation, 665 773 }); 666 774 }); 667 775

+6 -1

packages/core/src/client.ts

reviewed

··· 273 273 share 274 274 ); 275 275 } else { 276 276 + const mode = 277 277 + operation.context.requestPolicy === 'cache-and-network' || 278 278 + operation.context.requestPolicy === 'network-only' 279 279 + ? 'pre' 280 280 + : 'post'; 276 281 active = pipe( 277 282 result$, 278 278 - replayOnStart(() => { 283 283 + replayOnStart(mode, () => { 279 284 this.activeOperations.set(operation.key, active!); 280 285 this.dispatchOperation(operation); 281 286 })

+20 -8

packages/core/src/utils/streamUtils.ts

reviewed

··· 20 20 return source$ as PromisifiedSource<T>; 21 21 } 22 22 23 23 + export type ReplayMode = 'pre' | 'post'; 24 24 + 23 25 export function replayOnStart<T extends OperationResult>( 24 24 - start?: () => void 26 26 + mode: ReplayMode, 27 27 + start: () => void 25 28 ): Operator<T, T> { 26 29 return source$ => { 27 30 let replay: T | void; 28 31 29 32 const shared$ = pipe( 30 33 source$, 34 34 + onEnd(() => { 35 35 + replay = undefined; 36 36 + }), 31 37 onPush(value => { 32 38 replay = value; 33 39 }), ··· 37 43 return make<T>(observer => { 38 44 const prevReplay = replay; 39 45 40 40 - const subscription = pipe( 46 46 + return pipe( 41 47 shared$, 42 48 onEnd(observer.complete), 43 49 onStart(() => { 44 44 - if (start) start(); 45 45 - if (prevReplay !== undefined && prevReplay === replay) 46 46 - observer.next({ ...prevReplay, stale: true }); 50 50 + if (mode === 'pre') { 51 51 + start(); 52 52 + } 53 53 + 54 54 + if (prevReplay !== undefined && prevReplay === replay) { 55 55 + observer.next( 56 56 + mode === 'pre' ? { ...prevReplay, stale: true } : prevReplay 57 57 + ); 58 58 + } else if (mode === 'post') { 59 59 + start(); 60 60 + } 47 61 }), 48 62 subscribe(observer.next) 49 49 - ); 50 50 - 51 51 - return subscription.unsubscribe; 63 63 + ).unsubscribe; 52 64 }); 53 65 }; 54 66 }