npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@maxired/apollo-link-serialize

v2.0.0

Published

A link that serializes requests by key, making sure that they execute in the exact order submitted

Downloads

2

Readme

apollo-link-serialize

npm version Build Status codecov

An Apollo Link that serializes requests by key, making sure that they execute in the exact order in which they were submitted.

Motivation

When sending requests to the server using HTTP there are no guarantees in which order requests will reach the server. Worse yet, when using a RetryLink, it is very likely that requests will get reordered in case of transient network or server errors. For requests where the order matters, you can use apollo-link-serialize to guarantee that they are executed in the exact order in which they were submitted. If we have requests A and B, request B will not be forwarded by the serialization link until request A has completed or errored.

Note: If combining apollo-link-serialize with apollo-link-retry, make sure the retry link is closer to the network stack than the serializing link. If it isn't, requests may get reordered before they reach the serializing link.

Let's take a simple example: A page that lets the user input two values, their favorite color and their favorite number (yeah, I know, but it's just an example, so bear with me, okay!). When the user changes these values, they get sent to the server, and the server simply updates a database entry for that user with the new value. In this case, the order in which the updates reach the server is highly significant. If the user first sets the favorite color to "Red" and then to "Blue", the update setting it to "Blue" should arrive after the update setting it to "Red", otherwise the value that sticks will be "Red" instead of "Blue"! Same for the favorite number: The last update that the server sees has to be the last update the user made. apollo-link-serialize can help you make sure that that happens by not sending new requests until previous ones have completed.

Note that in the example above, the ordering between requests for favorite color and favorite number don't matter, so ordering only needs to be preserved between requests of the same type. Preserving ordering between unrelated requests would be wasteful and increase latency, so apollo-link-serialize lets you specify which requests to serialize behind which other requests by specifying { context: { serializationKey: 'key here' } }. In the example above, we could use serializationKey: 'favoriteColor' and serializationKey: 'favoriteNumber'.

Requests whose context does not contain serializationKey will be passed through to the next link and not serialized.

Install

npm install apollo-link-serialize

or

yarn add apollo-link-serialize

Usage

import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { RetryLink } from 'apollo-link-retry';
import gql from 'graphql-tag';

import SerializingLink from 'apollo-link-serialize';

this.link = ApolloLink.from([
    new SerializingLink(),
    new HttpLink({ uri: URI_TO_YOUR_GRAPHQL_SERVER }),
]);

// Assume the server/network delay for this request is 100ms
const opColor = {
    query: gql`mutation { setFavoriteColor(color: "RED") }`,
    context: {
        // A request only gets serialized if it has context.serializationKey
        serializationKey: 'favoriteColor',
    },
};

// Assume the server/network delay for this request is 10ms
const opColor2 = {
    query: gql`mutation { setFavoriteColor(color: "BLUE") }`,
    context: {
        // A request only gets serialized if it has context.serializationKey
        serializationKey: 'favoriteColor',
    },
};

// Assume the server/network delay for this request is 50ms
const opNumber = {
    query: gql`mutation { setFavoriteNumber(number: 7) }`,
    context: {
        // A request only gets serialized if it has context.serializationKey
        serializationKey: 'favoriteNumber',
    },
};

link.execute(opColor).subscribe({
    next(response) { console.log(response.data.setFavoriteColor); },
});
link.execute(opColor2).subscribe({
    next(response) { console.log(response.data.setFavoriteColor); },
});

link.execute(opNumber).subscribe({
    next(response) { console.log(response.data.setFavoriteNumber); },
});

// Assuming the server/network delays mentioned above, this code will output:
// 7 (after 50ms)
// RED (after 100ms)
// BLUE (after 110ms)