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

    3.0.0 • Public • Published


    npm version Build Status codecov

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


    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.


    npm install apollo-link-debounce


    yarn add apollo-link-debounce


    import { gql, ApolloLink, HttpLink } from '@apollo/client';
    import { RetryLink } from '@apollo/client/link/retry';
    import DebounceLink from 'apollo-link-debounce';
    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!"
        next(response) { console.log('A', response.data.moveSlider); },
        complete() { console.log('A complete!'); },
        next(response) { console.log('B', response.data.moveSlider); },
        complete() { console.log('B complete!'); },
        next(response) { console.log('C', response.data.autoComplete.value); },
        complete() { console.log('C complete!'); },
        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!


    npm i apollo-link-debounce

    DownloadsWeekly Downloads






    Unpacked Size

    60.6 kB

    Total Files


    Last publish


    • helfer