Skip to content
An Apollo Link that debounces requests
Branch: master
Clone or download
Latest commit 68bb9a7 Dec 7, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fix lint errors Dec 7, 2018
.gitignore Initial commit (copied from helfer/zetteli) Dec 3, 2017
.npmignore Initial commit (copied from helfer/zetteli) Dec 3, 2017
.travis.yml Add build and coverage status badges Dec 4, 2017
LICENSE Initial commit (copied from helfer/zetteli) Dec 3, 2017
README.md feat: Add `debounceTimeout` context option for per-query timeouts. Dec 7, 2018
package.json 2.1.0 Dec 7, 2018
tsconfig.json Includes DebounceLink.ts Dec 7, 2018
tsconfig.old.json Initial commit (copied from helfer/zetteli) Dec 3, 2017
tsconfig.test.json Adds jest types to test config Dec 7, 2018
tslint.json Add tslint.json Dec 7, 2018
yarn.lock

README.md

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 { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { RetryLink } from 'apollo-link-retry';
import gql from 'graphql-tag';

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!
You can’t perform that action at this time.