apollo-link-debounce
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    apollo-link-debounce

    npm version Build Status codecov

    An Apollo Link that debounces requests made within a certain interval of each other.

    Motivation

    Sometimes it can be useful to debounce updates by the user before sending them to the server if all that matters is the final state, for example the value at which a slider comes to rest after being moved by the user. You could debounce the slider event at the component level, but that's not always an option when there are other parts of the UI that depend on having the most up-to-date information on the slider position.

    Apollo-link-debounce can help in such situations by allowing you to debounce requests. Slider position, for example, could be debounced such that if multiple slider events happen within 100ms of each other, only the last position update (mutation) gets sent to the server. Once the server response comes back, all subscribers will receive the response to the last event. (Another option would be to immediately complete all but the last request. If you need that, feel free to make a PR implementing it!)

    It is possible to debounce different events separately by setting different debounce keys. For example: if there are two sliders, they can use separate debounce keys (eg. the slider's name) to ensure that their updates don't get mixed up together.

    Read more about debounce here. See a real-world example of using a debounce link here.

    Installation

    npm install apollo-link-debounce

    or

    yarn add apollo-link-debounce
    

    Usage

    import { gql, ApolloLink, HttpLink } from '@apollo/client';
    import { RetryLink } from '@apollo/client/link/retry';
    
    import DebounceLink from 'apollo-link-debounce';
    
    const DEFAULT_DEBOUNCE_TIMEOUT = 100;
    this.link = ApolloLink.from([
        new DebounceLink(DEFAULT_DEBOUNCE_TIMEOUT),
        new HttpLink({ uri: URI_TO_YOUR_GRAPHQL_SERVER }),
    ]);
    
    const op = {
        query: gql`mutation slide($val: Float){ moveSlider(value: $val) }`,
        variables: { val: 99 }
        context: {
            // Requests get debounced together if they share the same debounceKey.
            // Requests without a debounce key are passed to the next link unchanged.
            debounceKey: '1',
        },
    };
    
    const op2 = {
        query: gql`mutation slide($val: Float){ moveSlider(value: $val) }`,
        variables: { val: 100 },
        context: {
            // Requests get debounced together if they share the same debounceKey.
            // Requests without a debounce key are passed to the next link unchanged.
            debounceKey: '1',
        },
    };
    
    // Different debounceKeys can have different debounceTimeouts
    const op3 = {
        query: gql`query autoComplete($val: String) { autoComplete(value: $val) { value } }`,
        variables: { val: 'apollo-link-de' }, // Server returns "apollo-link-debounce"
        context: {
            // DEFAULT_DEBOUNCE_TIMEOUT is overridden by setting debounceTimeout
            debounceKey: '2',
            debounceTimeout: 10,
        },
    };
    
    
    // No debounce key, so this request does not get debounced
    const op4 = {
        query: gql`{ hello }`, // Server returns "World!"
    };
    
    link.execute(op).subscribe({
        next(response) { console.log('A', response.data.moveSlider); },
        complete() { console.log('A complete!'); },
    });
    link.execute(op2).subscribe({
        next(response) { console.log('B', response.data.moveSlider); },
        complete() { console.log('B complete!'); },
    });
    link.execute(op3).subscribe({
        next(response) { console.log('C', response.data.autoComplete.value); },
        complete() { console.log('C complete!'); },
    });
    link.execute(op4).subscribe({
        next(response) { console.log('Hello', response.data.hello); },
        complete() { console.log('Hello complete!'); },
    });
    
    // Assuming the server responds with the value that was set, this will print
    // -- no delay --
    // Hello World!
    // Hello complete!
    // -- 10 ms delay --
    // C apollo-link-debounce
    // C complete!
    // -- 100 ms delay --
    // A 100 (after 100ms)
    // A complete!
    // B 100
    // B complete!

    Install

    npm i apollo-link-debounce

    DownloadsWeekly Downloads

    15,700

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    60.6 kB

    Total Files

    21

    Last publish

    Collaborators

    • helfer